小编给大家分享一下小程序开发经验分享示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联于2013年成立，先为市中等服务建站，市中等地企业，进行企业商务咨询服务。为市中企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
一、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单位
三、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：冒泡事件
四、小程序功能
4.1：canvas生成图片
4.2：插件的使用
4.3：页面栈限制
小程序的页面栈最新版本限制为10个，超过10个之后无法进入下一个页面。
故要慎用页面数量，导航API要灵活结合wx.navigateTo、wx.redirectTo、wx.navigateBack
4.4：提示弹窗Dialog
五、其它
5.1：主流框架
5.2：常用插件
wxParse：富文本解析
wx-charts：图表工具
wxapp-qrcode：二维码生成器
以上是“小程序开发经验分享示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
网页名称：小程序开发经验分享示例
分享网址：
http://www.tsicrk.com/article/jgsejc.html
