小程序开发经验的总结

互联网 20-6-15

一、WXML

1.1：wx:if与wx:else

前端通过后端的接口获取信息列表，如果有数据则展示数据内容，否则则显示找不到信息。如果if-else使用布尔值的状态作这个开关的话，页面会先出现false的状态，再更新为true，即闪现找不到信息的内容，这种交互不是很理想。

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

最好的做法是使用下面这种，一开始设置info为null,

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"

1.3：block标签

wx:if、wx:for、wx:else这些没有样式意义的语法尽量使用block

1.4：template组件模板

公共的页面模块/组件，可直接在wxml使用，也可以使用import方式。如果涉及到css，需要在wxss里@import引入。

/** * 方式一：直接使用 * 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。

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

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

二、WXSS

2.1：背景Icon

小程序的 background 里只能使用完整的https图片路径，项目中使用icon的方式：

矢量图svg：具备完美的可伸缩性，容易进行调整（颜色、大小等）;
data-uri：图片体积小于20Kb使用base64方式。[前端图片最优化的引入方式分析][segmentfault.com/a/119000001…]
较大文件：直接在wxml使用image标签
引入外部icon：如阿里巴巴矢量图库，可使用网络路径和下载到本地的方式来使用。

2.2：重置样式

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;

2.4：合理使用rpx单位

rpx 是一个相当于屏幕宽度百分比的相对单位，以下情况不建议使用：
font-size和border-width；animation动画中涉及translate位移：部分机器在rpx转成px出现小数时，如262.89px，微信会向下取值为262px，产生1px的差距。
canvas绘图，比如二维码、分享图片等。

三、JavaScript

3.1：二次封装wx.request方法

3.2：页面的生命周期