微信小程序开发笔记

一、常见小程序开发框架对比

图解小程序开发框架.png

---

二、小程序更新机制

1. 概念：

• 冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。
• 热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。

    // 在app.js中，即小程序启动时
    onShow: function(options) {
        this.checkUpdateVersion();
    },
    checkUpdateVersion() {
        // 判断微信版本是否 兼容小程序更新机制API的使用
        if (wx.canIUse('getUpdateManager')) {
            // 创建 UpdateManager 实例
            const updateManager = wx.getUpdateManager();
            // 检测版本更新
            updateManager.onCheckForUpdate(function(res) {
                console.log('获取版本', res);
                // 请求完新版本信息的回调
                if (res.hasUpdate) {
                    // 监听小程序有版本更新事件
                    updateManager.onUpdateReady(function() {
                        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 （ 此处进行了自动更新操作）
                        updateManager.applyUpdate();
                    })
                    updateManager.onUpdateFailed(function() {
                        // 新版本下载失败
                        wx.showModal({
                            title: '已经有新版本喽~',
                            content: '请您删除当前小程序，到微信 “发现-小程序” 页，重新搜索打开哦~',
                        });
                    })
                }
            })
        } else {
            // 此时微信版本太低（一般而言版本都是支持的）
            wx.showModal({
                title: '溫馨提示',
                content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
            });
        }
    },

图解原理.png

---

三、关于数据请求时机的要求：

1. onLaunch:：小程序启动以后便不会改变的数据
2. onShow（app.js内的）：小程序启动以后便不再改动的数据
3. onLoad： 页面加载以后便不会改变的数据
4. onShow(page内的）：「页面显示/从后台跳回前端显示/从跳转页返回」时便需要更新的数据

image.png

---

四、规范setData操作：

原理图.png

• 推荐方案：

1. 减少setData数据传输量：
   a) 仅传输视图层使用到的数据，JS环境用到的数据存放到data对象外;
   b) 合理利用局部更新。setData支持使用数据路径的方式对对象的局部字段进行更新。
2. 降低setData执行频率：
   c) 将多个setData调用合并执行，减少线程间通信频次;
   d) 当需要在频繁触发的用户事件（如PageScroll、Resize事件）中调用setData，合理的利用函数防抖（debounce）和函数节流（throttle）可以减少setData执行次数。

// 合理利用局部更新。setData支持使用数据路径的方式对对象的局部字段进行更新。
let tarIndex = 2;
 this.setData({
         [`dotList[${tarIndex}].dotShow`]: false,
         [`dotList[${tarIndex}].dotNum`]: 0
});