为规范开发者的用户个人信息处理行为，保障用户的合法权益，自2023年9月15日起，对于涉及处理用户个人信息的小程序开发者，微信要求，仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后，方可调用微信提供的隐私接口。 开发者首先需确定小程序是否涉及处理用户个人信息，如涉及，则需配置用户隐私授权弹窗，且仅有在平台《小程序用户隐私保护指引》中声明了所处理的用户个人信息，才可以调用平台提供的对应接口或组件。（隐私相关接口） 隐私协议设置整体流程参考下方指引： 一、设置《小程序用户隐私保护指引》 开发者需在「小程序管理后台」设置《小程序用户隐私保护指引》 [图片] [图片] 二、填写《小程序用户隐私保护指引》 [图片] 只有在指引中声明所处理的用户个人信息，才可以调用平台提供的对应接口或组件。若未声明，对应接口或组件将无法调用成功。隐私接口与对应的处理的用户个人信息关系可见：小程序用户隐私保护指引内容介绍 三、配置用户隐私授权弹窗 微信提供了wx.onNeedPrivacyAuthorization(function callback) 接口，意为用户触发了一个微信侧未记录过同意的隐私接口调用，开发者可通过响应该事件选择提示用户的时机。此外，微信还提供了 wx.requirePrivacyAuthorize(Object object) 接口，可用于模拟触发 onNeedPrivacyAuthorization 事件。 小程序开发者可自行设计提示方式与触发时机，详细文档可查看隐私协议开发指南。 仅有在指引中声明所处理的用户个人信息，才可以调用平台提供的对应接口或组件。若未声明，对应接口或组件将直接禁用。 [图片] （参考样例） 四、如要进行代码提审，开发者需先自行声明是否有采集用户隐私，如有，则需在提审页面-「用户隐私保护设置」选择“采集用户隐私” [图片]

解决方案： 1. 通过 https://myssl.com/ 检测证书状态，该网站有缓存，如果有更换过证书记得手动点刷新报告 2. 如果是证书链不完整，参照指引 https://blog.myssl.com/faq-miss-ca-certificate/ 解决即可

小程序基础库的组成 基础库成分 关于基础库的成分，不得不提到我们之前说过的小程序渲染机制，参考 React 的 Virtual DOM。 [图片] 基础库除了处理 VD 的渲染问题，它还包括内置组件和逻辑层API，总的来说负责处理数据绑定、组件系统、事件系统、通信系统等一系列框架逻辑。 小程序的基础库是 JavaScript 编写的，它可以被注入到渲染层和逻辑层运行。在渲染层可以用各类组件组建界面的元素，在逻辑层可以用各类 API 来处理各种逻辑。 同时，小程序的一些补充能力：自定义组件和插件，也有相应的基础代码，当然也需要添加到基础库里。 所以我们可以看到，小程序的基础库主要包括： 提供 VD 渲染机制相关基础代码。（Exparser 框架） 提供封装后的内置组件。 提供逻辑层的 API。 提供其他补充能力（自定义组件和插件等）的基础代码。 [图片] Exparser 框架 Exparser 是微信小程序的组件组织框架，内置在小程序基础库中，为小程序的各种组件提供基础的支持。 小程序内的所有组件，包括内置组件和自定义组件，都由 Exparser 组织管理。 Exparser 会维护整个页面的节点树相关信息，包括节点的属性、事件绑定等，相当于一个简化版的 Shadow DOM 实现。Exparser 的主要特点包括以下几点： 基于 Shadow DOM 模型：模型上与 WebComponents 的 ShadowDOM 高度相似，但不依赖浏览器的原生支持，也没有其他依赖库；实现时，还针对性地增加了其他 API 以支持小程序组件编程。 可在纯 JS 环境中运行：这意味着逻辑层也具有一定的组件树组织能力。 高效轻量：性能表现好，在组件实例极多的环境下表现尤其优异，同时代码尺寸也较小。 基于这个框架，内置了一套组件，以涵盖小程序的基础功能，便于开发者快速搭建出任何界面。同时也提供了自定义组件的能力，开发者可以自行扩展更多的组件，以实现代码复用。 内置组件 小程序基于 Exparser 框架，内置了一套组件，提供了视图容器类、表单类、导航类、媒体类、开放类等几十种组件。 内置组件在小程序框架里的定义是：在小程序架构里无法实现或者实现不好某类功能，使用组件内置到小程序框架里。 常见包括： 开放类组件：如 open-data 组件提供展示群名称、用户信息等微信体系下的隐私信息，有 button 组件里 open-type 属性所提供分享、跳转 App 等敏感操作的能力 视图容器类组件：如 movable-view 这种因双线程模型导致手势识别不好实现的组件（在双线程模型中，触摸事件从渲染层发出，派发到逻辑层，这中间是有一定的延时而导致视图跟随手指运动这类交互变得有些卡顿） API 宿主环境提供了丰富的API，可以很方便调起微信提供的能力。 小程序提供的 API 按照功能主要分为几大类：网络、媒体、文件、数据缓存、位置、设备、界面、界面节点信息还有一些特殊的开放接口。 需要注意 API 调用大多都是异步的。 自定义组件 自定义组件是开发者可以自行扩充的组件。开发者可以将常用的节点树结构提取成自定义组件，实现代码复用。 在使用自定义组件的小程序页面中，Exparser 将接管所有的自定义组件注册与实例化。以 Component 为例： 在小程序启动时，构造器会将开发者设置的 properties、data、methods 等定义段，写入 Exparser 的组件注册表中。 这个组件在被其它组件引用时，就可以根据这些注册信息来创建自定义组件的实例。 Page 构造器的大体运行流程与之相仿，只是参数形式不一样。这样每个页面就有一个与之对应的组件，称为“页面根组件”。 在初始化页面时，Exparser 会创建出页面根组件的一个实例，用到的其他组件也会响应创建组件实例（这是一个递归的过程）。 插件 插件是对一组 js 接口、自定义组件或页面的封装，用于嵌入到小程序中使用。 插件不能独立运行，必须嵌入在其他小程序中才能被用户使用；而第三方小程序在使用插件时，也无法看到插件的代码。因此，插件适合用来封装自己的功能或服务，提供给第三方小程序进行展示和使用。 插件开发者可以像开发小程序一样编写一个插件并上传代码，在插件发布之后，其他小程序方可调用。小程序平台会托管插件代码，其他小程序调用时，上传的插件代码会随小程序一起下载运行。 小程序基础库机制 基础库的载入 在开发网页时，经常会引用很多开源的 JS 库，在使用到这些库所提供的 API 前，我们需要先在业务代码前边引入这些库。 同样道理，我们需要在启动 APP 之前载入基础库，接着再载入业务代码。由于小程序的渲染层和逻辑层是两个线程管理，而我们 一般说起基础库，也通常包括 WebView 基础库（渲染层），和 AppService 基础库（逻辑层）。 显然，所有小程序在微信客户端打开的时候，都需要注入相同的基础库。所以，小程序的基础库不会被打包在某个小程序的代码包里边，它会被提前内置在微信客户端。 将基础库内置在微信客户端，有两个好处： 降低业务小程序的代码包大小。 可以单独修复基础库中的Bug，无需修改到业务小程序的代码包。 小程序的启动 在小程序启动前，微信会提前准备好一个页面层级用于展示小程序的首页。 这里就包括了逻辑层和渲染层分别的初始化以及公共库的注入。 [图片] 在小程序启动时，微信会为小程序展示一个固定的启动界面，界面内包含小程序的图标、名称和加载提示图标。此时，微信会在背后完成几项工作：下载小程序代码包、加载小程序代码包、初始化小程序首页。 [图片] 基础库的更新 小程序的很多能力需要微信客户端来支撑，例如蓝牙、直播能力、微信运动等，可以说，小程序基础库的迭代离不开微信客户端的发布。 为了避免新版本的基础库给线上小程序带来未知的影响，微信客户端都是携带上一个稳定版的基础库发布的。等到微信客户端正式发布后，小程序会开始灰度推送新版本的基础库到微信客户端里，在这个过程需要仔细监控各类异常现象以及开发者和用户的反馈，一般灰度时长为12小时，灰度结束后，用户设备上就会有新版本的基础库。如果存在重大Bug，那此次推送会被回退。 参考 《小程序开发指南——小程序基础库的更新迭代》 《小程序开发指南——6.2 组件系统》 结束语 本节大致结合了小程序的启动来讲了下小程序的基础库。其实很多都能在小程序开发指南里找到，只是文字非常详（fan）细（duo），看一遍未必能记住，但是第二遍又找不到了。 哈哈哈吐槽下小程序的文档，很详细就是有点容易找不到。

大家都知道小程序提交审核发布以后是不会马上更新版本的，用户需要下次使用才会更新到新的版本，这就是冷更新。 那么如果要做到及时生效怎么办呢？这时候就要做处理了，将下面的代码添加到app.js，提交审核，发布就会生效了 [代码]onLaunch: [代码][代码]function[代码] [代码](options) {[代码] [代码]    [代码][代码]this[代码][代码].autoUpdate()[代码] [代码]  [代码][代码]},[代码] [代码]  [代码][代码]autoUpdate: [代码][代码]function[代码] [代码]() {[代码] [代码]    [代码][代码]var[代码] [代码]self = [代码][代码]this[代码] [代码]    [代码][代码]// 获取小程序更新机制兼容[代码] [代码]    [代码][代码]if[代码] [代码](wx.canIUse([代码][代码]'getUpdateManager'[代码][代码])) {[代码] [代码]      [代码][代码]const updateManager = wx.getUpdateManager()[代码] [代码]      [代码][代码]//1. 检查小程序是否有新版本发布[代码] [代码]      [代码][代码]updateManager.onCheckForUpdate([代码][代码]function[代码] [代码](res) {[代码] [代码]        [代码][代码]// 请求完新版本信息的回调[代码] [代码]        [代码][代码]if[代码] [代码](res.hasUpdate) {[代码] [代码]          [代码][代码]//检测到新版本，需要更新，给出提示[代码] [代码]          [代码][代码]wx.showModal({[代码] [代码]            [代码][代码]title: [代码][代码]'更新提示'[代码][代码],[代码] [代码]            [代码][代码]content: [代码][代码]'检测到新版本，是否下载新版本并重启小程序？'[代码][代码],[代码] [代码]            [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码] [代码]              [代码][代码]if[代码] [代码](res.confirm) {[代码] [代码]                [代码][代码]//2. 用户确定下载更新小程序，小程序下载及更新静默进行[代码] [代码]                [代码][代码]self.downLoadAndUpdate(updateManager)[代码] [代码]              [代码][代码]} [代码][代码]else[代码] [代码]if[代码] [代码](res.cancel) {[代码] [代码]                [代码][代码]//用户点击取消按钮的处理，如果需要强制更新，则给出二次弹窗，如果不需要，则这里的代码都可以删掉了[代码] [代码]                [代码][代码]wx.showModal({[代码] [代码]                  [代码][代码]title: [代码][代码]'温馨提示'[代码][代码],[代码] [代码]                  [代码][代码]content: [代码][代码]'本次版本更新涉及到新的功能添加，旧版本可能无法正常访问哦'[代码][代码],[代码] [代码]                  [代码][代码]showCancel: [代码][代码]false[代码][代码],[代码][代码]//隐藏取消按钮[代码] [代码]                  [代码][代码]confirmText: [代码][代码]"确定更新"[代码][代码],[代码][代码]//只保留确定更新按钮[代码] [代码]                  [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码] [代码]                    [代码][代码]if[代码] [代码](res.confirm) {[代码] [代码]                      [代码][代码]//下载新版本，并重新应用[代码] [代码]                      [代码][代码]self.downLoadAndUpdate(updateManager)[代码] [代码]                    [代码][代码]}[代码] [代码]                  [代码][代码]}[代码] [代码]                [代码][代码]})[代码] [代码]              [代码][代码]}[代码] [代码]            [代码][代码]}[代码] [代码]          [代码][代码]})[代码] [代码]        [代码][代码]}[代码] [代码]      [代码][代码]})[代码] [代码]    [代码][代码]} [代码][代码]else[代码] [代码]{[代码] [代码]      [代码][代码]// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示[代码] [代码]      [代码][代码]wx.showModal({[代码] [代码]        [代码][代码]title: [代码][代码]'提示'[代码][代码],[代码] [代码]        [代码][代码]content: [代码][代码]'当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'[代码] [代码]      [代码][代码]})[代码] [代码]    [代码][代码]}[代码] [代码]  [代码][代码]},[代码]     [代码]  [代码][代码]/**[代码] [代码]   [代码][代码]* 下载小程序新版本并重启应用[代码] [代码]   [代码][代码]*/[代码] [代码]  [代码][代码]downLoadAndUpdate: [代码][代码]function[代码] [代码](updateManager) {[代码] [代码]    [代码][代码]var[代码] [代码]self = [代码][代码]this[代码] [代码]    [代码][代码]wx.showLoading();[代码] [代码]    [代码][代码]//静默下载更新小程序新版本[代码] [代码]    [代码][代码]updateManager.onUpdateReady([代码][代码]function[代码] [代码]() {[代码] [代码]      [代码][代码]wx.hideLoading()[代码] [代码]      [代码][代码]//新的版本已经下载好，调用 applyUpdate 应用新版本并重启[代码] [代码]      [代码][代码]updateManager.applyUpdate()[代码] [代码]    [代码][代码]})[代码] [代码]    [代码][代码]updateManager.onUpdateFailed([代码][代码]function[代码] [代码]() {[代码] [代码]      [代码][代码]// 新的版本下载失败[代码] [代码]      [代码][代码]wx.showModal({[代码] [代码]        [代码][代码]title: [代码][代码]'已经有新版本了哟'[代码][代码],[代码] [代码]        [代码][代码]content: [代码][代码]'新版本已经上线啦，请您删除当前小程序，重新搜索打开哟'[代码][代码],[代码] [代码]      [代码][代码]})[代码] [代码]    [代码][代码]})[代码] [代码]  [代码][代码]},[代码]

案例代码https://developers.weixin.qq.com/s/ps4RIvmO7Sbe，在小程序开发者工具中即可复现，基础库2.4.4，版本为最新版本 描述：在scroll-view内部的第一个盒子添加margin-top时，scroll-view就出现滚动条，超出的部分就是margin-top的值，这个滚动条在自定义navbar页面影响效果，求官方验证？

在swiper中只触发一次onReachBottom，必须回到顶部再滑到底部才能再一次触发onReachBottom，这问题什么时候解决？？？？

小程序提供了路由功能来实现页面跳转，但是在使用的过程中我们还是发现有些不方便的地方，通过封装，我们可以实现诸如路由管理、简化api等功能。 页面的跳转存在哪些问题呢？ 与接口的调用一样面临url的管理问题； 传递参数的方式不太友好，只能拼装url； 参数类型单一，只支持string。 alias 第一个问题很好解决，我们做一个集中管理，比如新建一个[代码]router/routes.js[代码]文件来实现alias： [代码]// routes.js module.exports = { // 主页 home: '/pages/index/index', // 个人中心 uc: '/pages/user_center/index', }; [代码] 然后使用的时候变成这样： [代码]const routes = require('../../router/routes.js'); Page({ onReady() { wx.navigateTo({ url: routes.uc, }); }, }); [代码] query 第二个问题，我们先来看个例子，假如我们跳转[代码]pages/user_center/index[代码]页面的同时还要传[代码]userId[代码]过去，正常情况下是这么来操作的： [代码]const routes = require('../../router/routes.js'); Page({ onReady() { const userId = '123456'; wx.navigateTo({ url: `${routes.uc}?userId=${userId}`, }); }, }); [代码] 这样确实不好看，我能不能把参数部分单独拿出来，不用拼接到url上呢？ 可以，我们试着实现一个[代码]navigateTo[代码]函数： [代码]const routes = require('../../router/routes.js'); function navigateTo({ url, query }) { const queryStr = Object.keys(query).map(k => `${k}=${query[k]}`).join('&'); wx.navigateTo({ url: `${url}?${queryStr}`, }); } Page({ onReady() { const userId = '123456'; navigateTo({ url: routes.uc, query: { userId, }, }); }, }); [代码] 嗯，这样貌似舒服一点。 参数保真 第三个问题的情况是，当我们传递的参数argument不是[代码]string[代码]，而是[代码]number[代码]或者[代码]boolean[代码]时，也只能在下个页面得到一个[代码]string[代码]值： [代码]// pages/index/index.js Page({ onReady() { navigateTo({ url: routes.uc, query: { isActive: true, }, }); }, }); // pages/user_center/index.js Page({ onLoad(options) { console.log(options.isActive); // => "true" console.log(typeof options.isActive); // => "string" console.log(options.isActive === true); // => false }, }); [代码] 上面这种情况想必很多人都遇到过，而且感到很抓狂，本来就想传递一个boolean，结果不管传什么都会变成string。 有什么办法可以让数据变成字符串之后，还能还原成原来的类型？ 好熟悉，这不就是json吗？我们把要传的数据转成json字符串（[代码]JSON.stringify[代码]），然后在下个页面把它转回json数据（[代码]JSON.parse[代码]）不就好了嘛！ 我们试着修改原来的[代码]navigateTo[代码]： [代码]const routes = require('../../router/routes.js'); function navigateTo({ url, data }) { const dataStr = JSON.stringify(data); wx.navigateTo({ url: `${url}?jsonStr=${dataStr}`, }); } Page({ onReady() { navigateTo({ url: routes.uc, data: { isActive: true, }, }); }, }); [代码] 这样我们在页面中接受json字符串并转换它： [代码]// pages/user_center/index.js Page({ onLoad(options) { const json = JSON.parse(options.jsonStr); console.log(json.isActive); // => true console.log(typeof json.isActive); // => "boolean" console.log(json.isActive === true); // => true }, }); [代码] 这里其实隐藏了一个问题，那就是url的转义，假如json字符串中包含了类似[代码]?[代码]、[代码]&[代码]之类的符号，可能导致我们参数解析出错，所以我们要把json字符串encode一下： [代码]function navigateTo({ url, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } // pages/user_center/index.js Page({ onLoad(options) { const json = JSON.parse(decodeURIComponent(options.encodedData)); console.log(json.isActive); // => true console.log(typeof json.isActive); // => "boolean" console.log(json.isActive === true); // => true }, }); [代码] 这样使用起来不方便，我们封装一下，新建文件[代码]router/index.js[代码]： [代码]const routes = require('./routes.js'); function navigateTo({ url, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } function extract(options) { return JSON.parse(decodeURIComponent(options.encodedData)); } module.exports = { routes, navigateTo, extract, }; [代码] 页面中我们这样来使用： [代码]const router = require('../../router/index.js'); // page home Page({ onLoad(options) { router.navigateTo({ url: router.routes.uc, data: { isActive: true, }, }); }, }); // page uc Page({ onLoad(options) { const json = router.extract(options); console.log(json.isActive); // => true console.log(typeof json.isActive); // => "boolean" console.log(json.isActive === true); // => true }, }); [代码] route name 这样貌似还不错，但是[代码]router.navigateTo[代码]不太好记，[代码]router.routes.uc[代码]有点冗长，我们考虑把[代码]navigateTo[代码]换成简单的[代码]push[代码]，至于路由，我们可以使用[代码]name[代码]的方式来替换原来[代码]url[代码]参数： [代码]const routes = require('./routes.js'); function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const url = routes[name]; wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } function extract(options) { return JSON.parse(decodeURIComponent(options.encodedData)); } module.exports = { push, extract, }; [代码] 在页面中使用： [代码]const router = require('../../router/index.js'); Page({ onLoad(options) { router.push({ name: 'uc', data: { isActive: true, }, }); }, }); [代码] navigateTo or switchTab 页面跳转除了navigateTo之外还有switchTab，我们是不是可以把这个差异抹掉？答案是肯定的，如果我们在配置routes的时候就已经指定是普通页面还是tab页面，那么程序完全可以切换到对应的跳转方式。 我们修改一下[代码]router/routes.js[代码]，假设home是一个tab页面： [代码]module.exports = { // 主页 home: { type: 'tab', path: '/pages/index/index', }, uc: { path: '/pages/a/index', }, }; [代码] 然后修改[代码]router/index.js[代码]中[代码]push[代码]的实现： [代码]function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const route = routes[name]; if (route.type === 'tab') { wx.switchTab({ url: `${route.path}`, // 注意tab页面是不支持传参的 }); return; } wx.navigateTo({ url: `${route.path}?encodedData=${dataStr}`, }); } [代码] 搞定，这样我们一个[代码]router.push[代码]就能自动切换两种跳转方式了，而且之后一旦页面类型有变动，我们也只需要修改[代码]route[代码]的定义就可以了。 直接寻址 alias用着很不错，但是有一点挺麻烦得就是每新建一个页面都要写一个alias，即使没有别名的需要，我们是不是可以处理一下，如果在alias没命中，那就直接把name转化成url？这也是阔以的。 [代码]function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const route = routes[name]; const url = route ? route.path : name; if (route.type === 'tab') { wx.switchTab({ url: `${url}`, // 注意tab页面是不支持传参的 }); return; } wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } [代码] 在页面中使用： [代码]Page({ onLoad(options) { router.push({ name: 'pages/user_center/a/index', data: { isActive: true, }, }); }, }); [代码] 注意，为了方便维护，我们规定了每个页面都必须存放在一个特定的文件夹，一个文件夹的当前路径下只能存在一个index页面，比如[代码]pages/index[代码]下面会存放[代码]pages/index/index.js[代码]、[代码]pages/index/index.wxml[代码]、[代码]pages/index/index.wxss[代码]、[代码]pages/index/index.json[代码]，这时候你就不能继续在这个文件夹根路径存放另外一个页面，而必须是新建一个文件夹来存放，比如[代码]pages/index/pageB/index.js[代码]、[代码]pages/index/pageB/index.wxml[代码]、[代码]pages/index/pageB/index.wxss[代码]、[代码]pages/index/pageB/index.json[代码]。 这样是能实现功能，但是这个name怎么看都跟alias风格差太多，我们试着定义一套转化规则，让直接寻址的name与alias风格统一一些，[代码]pages[代码]和[代码]index[代码]其实我们可以省略掉，[代码]/[代码]我们可以用[代码].[代码]来替换，那么原来的name就变成了[代码]user_center.a[代码]： [代码]Page({ onLoad(options) { router.push({ name: 'user_center.a', data: { isActive: true, }, }); }, }); [代码] 我们再来改进[代码]router/index.js[代码]中[代码]push[代码]的实现： [代码]function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const route = routes[name]; const url = route ? route.path : `pages/${name.replace(/\./g, '/')}/index`; if (route.type === 'tab') { wx.switchTab({ url: `${url}`, // 注意tab页面是不支持传参的 }); return; } wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } [代码] 这样一来，由于支持直接寻址，跳转home和uc还可以写成这样： [代码]router.push({ name: 'index', // => /pages/index/index }); router.push({ name: 'user_center', // => /pages/user_center/index }); [代码] 这样一来，除了一些tab页面以及特定的路由需要写alias之外，我们也不需要新增一个页面就写一条alias这么麻烦了。 其他 除了上面介绍的navigateTo和switchTab外，其实还有[代码]wx.redirectTo[代码]、[代码]wx.navigateBack[代码]以及[代码]wx.reLaunch[代码]等，我们也可以做一层封装，过程雷同，所以我们就不再一个个介绍，这里贴一下最终简化后的api以及原生api的映射关系： [代码]router.push => wx.navigateTo router.replace => wx.redirectTo router.pop => wx.navigateBack router.relaunch => wx.reLaunch [代码] 最终实现已经在发布在github上，感兴趣的朋友可以移步了解：mp-router。