小程序開發經驗總結

時間 2019-12-06

原文原文鏈接

1、WXML

1.1：wx:if與wx:else

前端經過後端的接口獲取信息列表，若是有數據則展現數據內容，不然則顯示找不到信息。
若是if-else使用布爾值的狀態做這個開關的話，頁面會先出現false的狀態，再更新爲true，即閃現找不到信息的內容，這種交互不是很理想。javascript

<view wx:if="{{true}}">
    <text>這是信息列表</text>
</view>
<view wx:else>
    <text>找不到信息</text>
</view>

最好的作法是使用下面這種，一開始設置info爲null,css

data:{
    info:null
}

<view wx:if="{{info === 1}}">
    <text>這是信息列表</text>
</view>
<view wx:if="{{info === 0}}">
    <text>找不到信息</text>
</view>

1.2：wx:for

for循環要添加wx:for-item="item" wx:key="item"html

1.3：block標籤

wx:if、wx:for、wx:else這些沒有樣式意義的語法儘可能使用block前端

1.4：template組件模板

公共的頁面模塊/組件，可直接在wxml使用，也可使用import方式。若是涉及到css，須要在wxss裏@import引入。vue

/**
* 方式一：直接使用
* 1. 給template 設置name屬性
* 2. 組件傳過來的值能夠直接使用  hidden="{{!isloading}}"
*/
<template name="loading">
  <view class="weui-loadmore" hidden="{{!isloading}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加載</view>
  </view> 
</template>

/** 
* 方式二：按路役引入 
* 1. is 等同方式一的name
* 2. data="{{isloading}}" 給template的數據
*/
<import src="../template/loading.wxml"/>
<template is="loading" data="{{isloading}}"></template>

1.5：腳本語言wxs

專門運行於wxml頁面的腳本語言，與javascript不一樣，不支持使用ES6語法，也不能引用js。java

<wxs module="wxs" src="../../utils/wxs.wxs"></wxs>

module.exports = {
    //輸出百分比
    formatProgress: function (c,m) {
        return c/m*100
    }
}

2、WXSS

2.1：背景Icon

小程序的 background 裏只能使用完整的https圖片路徑，項目中使用icon的方式：react

矢量圖svg：具有完美的可伸縮性，容易進行調整（顏色、大小等）;
data-uri：圖片體積小於20Kb使用base64方式。前端圖片最優化的引入方式分析
較大文件：直接在wxml使用image標籤
引入外部icon：如阿里巴巴矢量圖庫，可以使用網絡路徑和下載到本地的方式來使用。

png本地壓縮工具：Tinypngios

2.2：重置樣式

部分樣式重置git

2.3：font-family標準規範

font-family: 
/*西文：*/
-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,
/*中文：*/
PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;

參考文章：最標準的系統字體規範font-familygithub