微信小程序开发文档 第69页

存储 每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync，wx.removeStorage/wx.removeStorageSync 对本地缓存进行读写和清理。 隔离策略 同一个微信用户，同一个小程序 storage 上限为 10MB。storage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据；不同小程序之间也无法互相读写数据。 清理策略 本地缓存的清理时机跟代码包一样，只有在代码包被清理的时候本地缓存才会被清理。

插件使用组件的限制 在插件开发中，以下组件不能在插件页面中使用： 开放能力（open-type）为以下之一的 button： contact（打开客服会话） getPhoneNumber（获取用户手机号） getUserInfo（获取用户信息） open-data web-view 以下组件的使用对基础库版本有要求： navigator 需要基础库版本 2.1.0 live-player 和 live-pusher 需要基础库版本 2.3.0

开发第三方自定义组件 小程序从基础库版本 2.2.1 开始支持使用 npm 安装第三方包，因此也支持开发和使用第三方自定义组件包。关于 npm 功能的详情可先阅读[相关文档]((npm 支持))。 准备 开发一个开源的自定义组件包给他人使用，首先需要明确他人是要如何使用这个包的，如果只是拷贝小程序目录下直接使用的话，可以跳过此文档。此文档中后续内容是以 npm 管理自定义组件包的前提下进行说明的。 在开发之前，要求开发者具有基础的 node.js 和 npm 相关的知识，同时需要准备好支持 npm 功能的开发者工具，点此下载。 下载模板 为了方便开发者能够快速搭建好一个可用于开发、调试、测试的自定义组件包项目，官方提供了一个项目模板，下载使用模板的方式有三种： 直接从 github 上下载 zip 文件并解压。 直接将 github 上的仓库 clone 下来。 使用官方提供的命令行工具初始化项目，下面会进行介绍。 项目模板中的构建是基于 gulp + webpack 来执行的，支持开发、构建、测试等命令，详情可参阅项目模板的 README.md 文件。 命令行工具 官方提供了命令行工具，用于快速初始化一个项目。执行如下命令安装命令行工具： npm install -g @wechat-miniprogram/miniprogram-cli 然后新建一个空目录作为项目根目录，在此根目录下执行： miniprogram init --type custom-component 命令执行完毕后会发现项目根目录下生成了许多文件，这是根据官方的项目模板生成的完整项目，之后开发者可直接在此之上进行开发修改。 命令行工具的更多用法可以查看 github 仓库上的 README.md 文件。 PS：第一次使用 miniprogram init 初始化项目会去 github 上拉取模板，因此需要保证网络畅通。 测试工具 针对自定义组件的单元测试，可参阅文档单元测试。 自定义组件示例 以下为官方提供的自定义组件，可以参考并使用： weui-miniprogram recycle-view 自定义组件扩展示例 以下为官方提供的自定义组件扩展，可以参考并使用： computed

抽象节点 这个特性自小程序基础库版本 1.9.6 开始支持。 在组件中使用抽象节点 有时，自定义组件模板中的一些节点，其对应的自定义组件不是由自定义组件本身确定的，而是自定义组件的调用者确定的。这时可以把这个节点声明为“抽象节点”。 例如，我们现在来实现一个“选框组”（selectable-group）组件，它其中可以放置单选框（custom-radio）或者复选框（custom-checkbox）。这个组件的 wxml 可以这样编写： 代码示例： <!-- selectable-group.wxml --> <view wx:for="{{labels}}"> <label> <selectable disabled="{{false}}"></selectable> {{item}} </label> </view> 其中，“selectable”不是任何在 json 文件的 usingComponents 字段中声明的组件，而是一个抽象节点。它需要在 componentGenerics 字段中声明： { "componentGenerics": { "selectable": true } } 使用包含抽象节点的组件 在使用 selectable-group 组件时，必须指定“selectable”具体是哪个组件： <selectable-group generic:selectable="custom-radio" /> 这样，在生成这个 selectable-group 组件的实例时，“selectable”节点会生成“custom-radio”组件实例。类似地，如果这样使用： <selectable-group generic:selectable="custom-checkbox" /> “selectable”节点则会生成“custom-checkbox”组件实例。 注意：上述的 custom-radio 和 custom-checkbox 需要包含在这个 wxml 对应 json 文件的 usingComponents 定义段中。 { "usingComponents": { "custom-radio": "path/to/custom/radio", "custom-checkbox": "path/to/custom/checkbox" } } 抽象节点的默认组件 抽象节点可以指定一个默认组件，当具体组件未被指定时，将创建默认组件的实例。默认组件可以在 componentGenerics 字段中指定： { "componentGenerics": { "selectable": { "default": "path/to/default/component" } } } 提示： 节点的 generic 引用 generic:xxx=”yyy” 中，值 yyy 只能是静态值，不能包含数据绑定。因而抽象节点特性并不适用于动态决定节点名的场景。

纯数据字段 纯数据字段是一些不用于界面渲染的 data 字段，可以用于提升页面更新性能。从小程序基础库版本 2.8.2 开始支持。 组件数据中的纯数据字段 有些情况下，某些 data 中的字段（包括 setData 设置的字段）既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。 此时，可以指定这样的数据字段为“纯数据字段”，它们将仅仅被记录在 this.data 中，而不参与任何界面渲染过程，这样有助于提升页面更新性能。 指定“纯数据字段”的方法是在 Component 构造器的 options 定义段中指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段。 代码示例： Component({ options: { pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段 }, data: { a: true, // 普通数据字段 _b: true, // 纯数据字段 }, methods: { myMethod() { this.data._b // 纯数据字段可以在 this.data 中获取 this.setData({ c: true, // 普通数据字段 _d: true, // 纯数据字段 }) } } }) 上述组件中的纯数据字段不会被应用到 WXML 上： <view wx:if="{{a}}"> 这行会被展示 </view> <view wx:if="{{_b}}"> 这行不会被展示 </view> 组件属性中的纯数据字段 属性也可以被指定为纯数据字段（遵循 pureDataPattern 的正则表达式）。 属性中的纯数据字段可以像普通属性一样接收外部传入的属性值，但不能将它直接用于组件自身的 WXML 中。 代码示例： Component({ options: { pureDataPattern: /^_/ }, properties: { a: Boolean, _b: { type: Boolean, observer() { // 不要这样做！这个 observer 永远不会被触发 } }, } }) 注意：属性中的纯数据字段的属性 observer 永远不会触发！如果想要监听属性值变化，使用 数据监听器 代替。 从小程序基础库版本 2.10.1 开始，也可以在页面或自定义组件的 json 文件中配置 pureDataPattern （这样就不需在 js 文件的 options 中再配置）。此时，其值应当写成字符串形式： { "pureDataPattern": "^_" } 使用数据监听器监听纯数据字段 数据监听器  可以用于监听纯数据字段（与普通数据字段一样）。这样，可以通过监听、响应纯数据字段的变化来改变界面。 下面的示例是一个将 JavaScript 时间戳转换为可读时间的自定义组件。 代码示例： Component({ options: { pureDataPattern: /^timestamp$/ // 将 timestamp 属性指定为纯数据字段...

小程序的运行环境 微信小程序运行在多种平台上：iOS（iPhone/iPad）微信客户端、Android 微信客户端、PC 微信客户端、Mac 微信客户端和用于调试的微信开发者工具。 各平台脚本执行环境以及用于渲染非原生组件的环境是各不相同的： 在 iOS 上，小程序逻辑层的 javascript 代码运行在 JavaScriptCore 中，视图层是由 WKWebView 来渲染的，环境有 iOS 12、iOS 13 等； 在 Android 上，小程序逻辑层的 javascript 代码运行在 V8 中，视图层是由自研 XWeb 引擎基于 Mobile Chrome 内核来渲染的； 在 开发工具上，小程序逻辑层的 javascript 代码是运行在 NW.js 中，视图层是由 Chromium Webview 来渲染的。 平台差异 尽管各运行环境是十分相似的，但是还是有些许区别： JavaScript 语法和 API 支持不一致：语法上开发者可以通过开启 ES6 转 ES5 的功能来规避（详情）；此外，小程序基础库内置了必要的Polyfill，来弥补API的差异（详情)。 WXSS 渲染表现不一致：尽管可以通过开启样式补全来规避大部分的问题，还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。 开发者工具仅供调试使用，最终的表现以客户端为准。

响应显示区域变化 显示区域尺寸 显示区域指小程序界面中可以自由布局展示的区域。在默认情况下，小程序显示区域的尺寸自页面初始化起就不会发生变化。但以下两种方式都可以改变这一默认行为。 在手机上启用屏幕旋转支持 从小程序基础库版本 2.4.0 开始，小程序在手机上支持屏幕旋转。使小程序中的页面支持屏幕旋转的方法是：在 app.json 的 window 段中设置 “pageOrientation”: “auto” ，或在页面 json 文件中配置 “pageOrientation”: “auto” 。 以下是在单个页面 json 文件中启用屏幕旋转的示例。 代码示例： { "pageOrientation": "auto" } 如果页面添加了上述声明，则在屏幕旋转时，这个页面将随之旋转，显示区域尺寸也会随着屏幕旋转而变化。 从小程序基础库版本 2.5.0 开始， pageOrientation 还可以被设置为 landscape ，表示固定为横屏显示。 在 iPad 上启用屏幕旋转支持 从小程序基础库版本 2.3.0 开始，在 iPad 上运行的小程序可以支持屏幕旋转。使小程序支持 iPad 屏幕旋转的方法是：在 app.json 中添加 “resizable”: true 。 代码示例： { "resizable": true } 如果小程序添加了上述声明，则在屏幕旋转时，小程序将随之旋转，显示区域尺寸也会随着屏幕旋转而变化。注意：在 iPad 上不能单独配置某个页面是否支持屏幕旋转。 Media Query 有时，对于不同尺寸的显示区域，页面的布局会有所差异。此时可以使用 media query 来解决大多数问题。 代码示例： .my-class { width: 40px; } @media (min-width: 480px) { /* 仅在 480px 或更宽的屏幕上生效的样式规则 */ .my-class { width: 200px; } } 在 WXML 中，可以使用 match-media 组件来根据 media query 匹配状态展示、隐藏节点。 此外，可以在页面或者自定义组件 JS 中使用 this.createMediaQueryObserver() 方法来创建一个 MediaQueryObserver 对象，用于监听指定的 media query 的匹配状态。 屏幕旋转事件 有时，仅仅使用 media query 无法控制一些精细的布局变化。此时可以使用 js 作为辅助。 在 js 中读取页面的显示区域尺寸，可以使用 selectorQuery.selectViewport 。 页面尺寸发生改变的事件，可以使用页面的 onResize 来监听。对于自定义组件，可以使用 resize 生命周期来监听。回调函数中将返回显示区域的尺寸信息。（从基础库版本 2.4.0 开始支持。） 代码示例： Page({ onResize(res) { res.size.windowWidth // 新的显示区域宽度 res.size.windowHeight // 新的显示区域高度 } }) Component({ pageLifetimes: { resize(res) { res.size.windowWidth // 新的显示区域宽度 res.size.windowHeight // 新的显示区域高度 } } }) 此外，还可以使用 wx.onWindowResize 来监听（但这不是推荐的方式）。 Bug & tips: Bug： Android...

WXS WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。 注意 WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。 WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。 WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。 WXS 函数不能作为组件的事件回调。 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。 以下是一些使用 WXS 的简单示例，要完整了解 WXS 语法，请参考WXS 语法参考。 页面渲染 <!--wxml--> <wxs module="m1"> var msg = "hello world"; module.exports.message = msg; </wxs> <view> {{m1.message}} </view> 页面输出： hello world 数据处理 // page.js Page({ data: { array: [1, 2, 3, 4, 5, 1, 2, 3, 4] } }) <!--wxml--> <!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 --> <wxs module="m1"> var getMax = function(array) { var max = undefined; for (var i = 0; i < array.length; ++i) { max = max === undefined ? array[i] : (max >= array[i] ? max : array[i]); }...

生命周期 以下内容你不需要立马完全弄明白，不过以后它会有帮助。 下图说明了页面 Page 实例的生命周期。

微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。 具体配置说明 页面收录设置：可对整个小程序的索引进行关闭，小程序管理后台-功能-页面内容接入-页面收录开关；详情 sitemap 配置：可对特定页面的索引进行关闭 sitemap 配置 小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。 完整配置项说明请参考小程序 sitemap 配置 例1： { "rules":[{ "action": "allow", "page": "*" }] } 所有页面都会被微信索引（默认情况） 例2： { "rules":[{ "action": "disallow", "page": "path/to/page" }] } 配置 path/to/page 页面不被索引，其余页面允许被索引 例3： { "rules":[{ "action": "allow", "page": "path/to/page" }, { "action": "disallow", "page": "*" }] } 配置 path/to/page 页面被索引，其余页面不被索引 例4： { "rules":[{ "action": "allow", "page": "path/to/page", "params": ["a", "b"], "matching": "inclusive" }, { "action": "allow", "page": "*" }] } 包含 a 和 b 参数的 path/to/page 页面会被微信优先索引，其他页面都会被索引，例如： path/to/page?a=1&b=2 => 优先被索引 path/to/page?a=1&b=2&c=3 => 优先被索引 path/to/page => 被索引 path/to/page?a=1 => 被索引 其他页面都会被索引 例5： { "rules":[{ "action": "allow", "page": "path/to/page", "params": ["a", "b"], "matching": "inclusive" }, { "action": "disallow", "page": "*" }, { "action": "allow", "page": "*" }] } path/to/page?a=1&b=2 => 优先被索引 path/to/page?a=1&b=2&c=3 => 优先被索引 path/to/page => 不被索引 path/to/page?a=1 => 不被索引 其他页面由于命中第二条规则，所以不会被索引 由于优先级的问题，第三条规则是没有意义的 注：没有 sitemap.json 则默认所有页面都能被索引...