小程序开发经验的总结

一、WXML1.1：
wx:if与wx:else前端通过后端的接口获取信息列表，如果有数据则展示数据内容，否则则显示找不到信息。
如果if-else使用布尔值的状态作这个开关的话，页面会先出现false的状态，再更新为true，即闪现找不到信息的内容，这种交互不是很理想。
这是信息列表找不到信息最好的做法是使用下面这种，一开始设置info为null,data:{
info:null }
这是信息列表找不到信息1.2：
wx:forfor循环要添加wx:for-item="item" wx:key="item"1.3：
block标签wx:if、wx:for、wx:else这些没有样式意义的语法尽量使用block1.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 }
}
二、WXSS2.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绘图，比如二维码、分享图片等。
三、JavaScript3.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.navigateBack4.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：
二维码生成器推荐教程：
《微信小程序》以上就是小程序开发经验的总结的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
小程序本文转载于：
掘金社区，如有侵犯，请联系a@php.cn删除
上一篇：
怎么退出微信小程序的登录？
下一篇：
用微信小程序实现WebSocket心跳重连相关文章相关视频微信小程序必须买域名吗微信小程序502是什么意思如何实现微信小程序url传值微信小程序：
一个json帮你完成分享朋友圈图片小程序开发经验的总结初识微信小程序(2)初识微信小程序(3)初识微信小程序(4) [温州做小程序]