小程序开发经验的总结

小程序开发经验的总结

一、WXML

1.1：wx:if与wx:else

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

这是信息列表 找不到信息-

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

data:{ info:null}-

这是信息列表 找不到信息-

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}}"*//** * 方式二：按路役引入 * 1. is 等同方式一的name* 2. data="{{isloading}}" 给template的数据*/-

1.5：脚本语言wxs

专门运行于wxml页面的脚本语言，与javascript不同，不支持使用ES6语法，也不能引用js。

-

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：页面的生命周期

onLoad: 页面加载，一个页面只会调用一次。能获得到页面参数options。onShow: 页面显示，每次打开页面都会调用一次，从后台切换前台也会调用一次：手机从熄屏切回显屏、从最小化回到最大化。onReady: 页面初次渲染完成，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。onHide: 页面切换到后台、navigateTo 、 tab 切换时调用。onUnload: 页面卸载。当页面被关闭或内存不足主动销毁页面。

3.3： new Date兼容性

安卓能识别new Date("2018-05-30 00:00:00")格式，但在IOS只能识别2018/05/30 00:00:00格式。需要将短横替换为斜杠。var iosDate= date.replace(/-/g, '/')。

3.4：冒泡事件

bindtap ：事件绑定不会阻止冒泡事件向上冒泡catchtap：事件绑定可以阻止冒泡事件向上冒泡

四、小程序功能

4.1：canvas生成图片

4.2：插件的使用

4.3：页面栈限制

小程序的页面栈最新版本限制为10个，超过10个之后无法进入下一个页面。

故要慎用页面数量，导航API要灵活结合wx.navigateTo、wx.redirectTo、wx.navigateBack

4.4：提示弹窗Dialog

代码前面使用wx.hideLoading会导致后面的wx.showToast出不来。因为wx.showToast具备隐藏wx.showLoading()提示框的功能。

五、其它

5.1：主流框架

mpvue：使用vue语法规范编译成小程序和h5语法Taro：基于react可同时编译成小程序、h5、react-native等。

5.2：常用插件

wxParse：富文本解析wx-charts：图表工具wxapp-qrcode：二维码生成器

推荐教程：《微信小程序》

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。