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

多线程 Worker 一些异步处理的任务，可以放置于 Worker 中运行，待运行结束后，再把结果返回到小程序主线程。Worker 运行于一个单独的全局上下文与线程中，不能直接调用主线程的方法。 Worker 与主线程之间的数据传输，双方使用 Worker.postMessage() 来发送数据，Worker.onMessage() 来接收数据，传输的数据并不是直接共享，而是被复制的。 使用流程 1. 配置 Worker 信息 在 app.json 中可配置 Worker 代码放置的目录，目录下的代码将被打包成一个文件： 配置示例： { "workers": "workers" } 2. 添加 Worker 代码文件 根据步骤 1 中的配置，在代码目录下新建以下两个入口文件： workers/request/index.js workers/request/utils.js workers/response/index.js 添加后，目录结构如下： ├── app.js ├── app.json ├── project.config.json └── workers ├── request │ ├── index.js │ └── utils.js └── response └── index.js 3. 编写 Worker 代码 在 workers/request/index.js 编写 Worker 响应代码 const utils = require('./utils') // 在 Worker 线程执行上下文会全局暴露一个 worker 对象，直接调用 worker.onMeesage/postMessage 即可 worker.onMessage(function (res) { console.log(res) }) 4. 在主线程中初始化 Worker 在主线程的代码 app.js 中初始化 Worker const worker = wx.createWorker('workers/request/index.js') // 文件名指定 worker 的入口文件路径，绝对路径 5. 主线程向 Worker 发送消息 worker.postMessage({ msg: 'hello worker' }) worker 对象的其它接口请看 worker接口说明 注意事项 Worker 最大并发数量限制为 1 个，创建下一个前请用 Worker.terminate() 结束当前 Worker Worker 内代码只能 require 指定 Worker 路径内的文件，无法引用其它路径 Worker 的入口文件由 wx.createWorker() 时指定，开发者可动态指定 Worker 入口文件 Worker 内不支持 wx 系列的 API Workers...

网络 在小程序/小游戏中使用网络相关的 API 时，需要注意下列问题，请开发者提前了解。 1. 服务器域名配置 每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（ wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。 从基础库 2.4.0 开始，网络接口允许与局域网 IP 通信，但要注意 不允许与本机 IP 通信。 从 2.7.0 开始，提供了 UDP 通信（wx.createUDPSocket)。 配置流程 服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置，配置时需要注意： 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议； 域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost； 可以配置端口，如 https://myserver.com:8080，但是配置后只能向 https://myserver.com:8080 发起请求。如果向 https://myserver.com、https://myserver.com:9091 等 URL 请求则会失败。 如果不配置端口。如 https://myserver.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 https://myserver.com:443 请求则会失败。 域名必须经过 ICP 备案； 出于安全考虑，api.weixin.qq.com 不能被配置为服务器域名，相关API也不能在小程序内调用。 开发者应将 AppSecret 保存到后台服务器中，通过服务器使用 getAccessToken 接口获取 access_token，并调用相关 API； 对于每个接口，分别可以配置最多 20 个域名。 2. 网络请求 超时时间 默认超时时间和最大超时时间都是 60s； 超时时间可以在 app.json 或 game.json 中通过 networktimeout 配置。 使用限制 网络请求的 referer header 不可设置。其格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本； wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个； wx.connectSocket 的最大并发限制是 5 个。 小程序进入后台运行后，如果 5s 内网络请求没有结束，会回调错误信息 fail interrupted；在回到前台之前，网络请求接口调用都会无法调用。 返回值编码 建议服务器返回值使用 UTF-8 编码。对于非 UTF-8 编码，小程序会尝试进行转换，但是会有转换失败的可能。 小程序会自动对 BOM 头进行过滤（只过滤一个BOM头）。 回调函数 只要成功接收到服务器返回，无论 statusCode 是多少，都会进入 success 回调。请开发者根据业务逻辑对返回值进行判断。 3. 常见问题 HTTPS 证书 小程序必须使用 HTTPS/WSS 发起网络请求。请求时系统会对服务器域名使用的 HTTPS 证书进行校验，如果校验失败，则请求不能成功发起。由于系统限制，不同平台对于证书要求的严格程度不同。为了保证小程序的兼容性，建议开发者按照最高标准进行证书配置，并使用相关工具检查现有证书是否符合要求。 对证书要求如下： HTTPS 证书必须有效；证书必须被系统信任，即根证书被已系统内置部署 SSL 证书的网站域名必须与证书颁发的域名一致证书必须在有效期内证书的信任链必需完整（需要服务器配置） iOS 不支持自签名证书; iOS 下证书必须满足苹果 App Transport Security (ATS) 的要求; TLS 必须支持 1.2 及以上版本。部分旧 Android 机型还未支持 TLS 1.2，请确保 HTTPS 服务器的 TLS 版本支持 1.2 及以下版本; 部分 CA 可能不被操作系统信任，请开发者在选择证书时注意小程序和各系统的相关通告。 Chrome...

使用插件 添加插件 在使用插件前，首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件。开发者可登录小程序管理后台，通过 appid 查找插件并添加。如果插件无需申请，添加后可直接使用；否则需要申请并等待插件开发者通过后，方可在小程序中使用相应的插件。 引入插件代码包 使用插件前，使用者要在 app.json 中声明需要使用的插件，例如： 代码示例： { "plugins": { "myPlugin": { "version": "1.0.0", "provider": "wxidxxxxxxxxxxxxxxxx" } } } 如上例所示， plugins 定义段中可以包含多个插件声明，每个插件声明以一个使用者自定义的插件引用名作为标识，并指明插件的 appid 和需要使用的版本号。其中，引用名（如上例中的 myPlugin）由使用者自定义，无需和插件开发者保持一致或与开发者协调。在后续的插件使用中，该引用名将被用于表示该插件。 在分包内引入插件代码包 如果插件只在一个分包内用到，可以将插件仅放在这个分包内，例如： { "subpackages": [ { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ], "plugins": { "myPlugin": { "version": "1.0.0", "provider": "wxidxxxxxxxxxxxxxxxx" } } } ] } 在分包内使用插件有如下限制： 仅能在这个分包内使用该插件； 同一个插件不能被多个分包同时引用； 如果基础库版本低于 2.9.0 ，不能从分包外的页面直接跳入分包内的插件页面，需要先跳入分包内的非插件页面、再跳入同一分包内的插件页面。 使用插件 使用插件时，插件的代码对于使用者来说是不可见的。为了正确使用插件，使用者应查看插件详情页面中的“开发文档”一节，阅读由插件开发者提供的插件开发文档，通过文档来明确插件提供的自定义组件、页面名称及提供的 js 接口规范等。 自定义组件 使用插件提供的自定义组件，和使用普通自定义组件的方式相仿。在 json 文件定义需要引入的自定义组件时，使用 plugin:// 协议指明插件的引用名和自定义组件名，例如： 代码示例： { "usingComponents": { "hello-component": "plugin://myPlugin/hello-component" } } 出于对插件的保护，插件提供的自定义组件在使用上有一定的限制： 默认情况下，页面中的 this.selectComponent 接口无法获得插件的自定义组件实例对象； wx.createSelectorQuery 等接口的 >>> 选择器无法选入插件内部。 页面 插件的页面从小程序基础库版本 2.1.0 开始支持。 需要跳转到插件页面时，url 使用 plugin:// 前缀，形如 plugin://PLUGIN_NAME/PLUGIN_PAGE， 如： 代码示例： <navigator url="plugin://myPlugin/hello-page"> Go to pages/hello-page! </navigator> js 接口 使用插件的 js 接口时，可以使用 requirePlugin 方法。例如，插件提供一个名为 hello 的方法和一个名为 world 的变量，则可以像下面这样调用： var myPluginInterface = requirePlugin('myPlugin'); myPluginInterface.hello(); var myWorld = myPluginInterface.world; 导出到插件 从基础库 2.11.1 起，使用插件的小程序可以导出一些内容，供插件获取。具体来说，在声明使用插件时，可以通过 export 字段来指定一个文件，如： { "myPlugin": { "version": "1.0.0", "provider": "wxidxxxxxxxxxxxxxxxx", "export": "index.js" } } 则该文件（上面的例子里是 index.js）导出的内容可以被这个插件用全局函数获得。例如，在上面的文件中，使用插件的小程序做了如下导出： // index.js module.exports = { whoami: 'Wechat MiniProgram' }...

开发插件 开发插件前，请阅读了解《小程序插件接入指南》了解开通流程及开放范围，并开通插件功能。如果未开通插件功能，将无法上传插件。 创建插件项目 插件类型的项目可以在开发者工具中直接创建。 新建插件类型的项目后，如果创建示例项目，则项目中将包含三个目录： plugin 目录：插件代码目录。 miniprogram 目录：放置一个小程序，用于调试插件。 doc 目录：用于放置插件开发文档。 miniprogram 目录内容可以当成普通小程序来编写，用于插件调试、预览和审核。下面的内容主要介绍 plugin 中的插件代码及 doc 中的插件开发文档。 我们提供了一个可以直接在微信开发者工具中查看的完整插件示例，开发者可以和本文互相对照以便理解。请注意： 由于插件需要 appid 才能工作，请填入一个 appid； 由于当前代码片段的限制，打开该示例后请 手动将 appid 填写到 miniprogram/app.json 中（如下图）使示例正常运行。 插件目录结构 一个插件可以包含若干个自定义组件、页面，和一组 js 接口。插件的目录内容如下： plugin ├── components │   ├── hello-component.js // 插件提供的自定义组件（可以有多个） │   ├── hello-component.json │   ├── hello-component.wxml │   └── hello-component.wxss ├── pages │   ├── hello-page.js // 插件提供的页面（可以有多个，自小程序基础库版本 2.1.0 开始支持） │   ├── hello-page.json │   ├── hello-page.wxml │   └── hello-page.wxss ├── index.js // 插件的 js 接口 └── plugin.json // 插件配置文件 插件配置文件 向使用者小程序开放的所有自定义组件、页面和 js 接口都必须在插件配置文件 plugin.json 列出，格式如下： 代码示例： { "publicComponents": { "hello-component": "components/hello-component" }, "pages": { "hello-page": "pages/hello-page" }, "main": "index.js" } 这个配置文件将向使用者小程序开放一个自定义组件 hello-component，一个页面 hello-page 和 index.js 下导出的所有 js 接口。 进行插件开发 请注意：在插件开发中，只有部分接口可以直接调用；另外还有部分能力（如 获取用户信息 和 发起支付 等）可以通过插件功能页的方式使用。 自定义组件 插件可以定义若干个自定义组件，这些自定义组件都可以在插件内相互引用。但提供给使用者小程序使用的自定义组件必须在配置文件的 publicComponents 段中列出（参考上文）。 除去接口限制以外，自定义组件的编写和组织方式与一般的自定义组件相同，每个自定义组件由 wxml, wxss, js 和 json 四个文件组成。具体可以参考自定义组件的文档。 页面 插件从小程序基础库版本 2.1.0 开始支持页面。插件可以定义若干个插件页面，可以从本插件的自定义组件、其他页面中跳转，或从使用者小程序中跳转。所有页面必须在配置文件的 pages 段中列出（参考上文）。 除去接口限制以外，插件的页面编写和组织方式与一般的页面相同，每个页面由 wxml, wxss, js 和 json 四个文件组成。具体可以参考其他关于页面的文档。 插件执行页面跳转的时候，可以使用 navigator 组件。当插件跳转到自身页面时， url 应设置为这样的形式：plugin-private://PLUGIN_APPID/PATH/TO/PAGE 。需要跳转到其他插件时，也可以这样设置 url 。 代码示例： <navigator url="plugin-private://wxidxxxxxxxxxxxxxx/pages/hello-page"> Go to pages/hello-page! </navigator> 自基础库版本 2.2.2 开始，在插件自身的页面中，插件还可以调用 wx.navigateTo 来进行页面跳转， url 格式与使用 navigator 组件时相仿。 接口 插件可以在接口文件（在配置文件中指定，详情见上文）中 export 一些 js 接口，供插件的使用者调用，如： 代码示例： module.exports = { hello:...

单元测试 在编写高质量的自定义组件过程中，单元测试是永远避不开的一个话题。完善的测试用例是提高自定义组件可用性的保证，同时测试代码覆盖率也是必不可少的一个环节。小程序从基础库版本 2.2.1 开始拥抱开源，支持使用 npm 安装自定义组件，那针对自定义组件的单元测试也是必须支持的。 以下就来介绍如何对自定义组件进行单元测试。 测试框架 现在市面上流行的测试框架均可使用，只要它能兼顾 nodejs 端和 dom 环境。因为我们需要依赖到 nodejs 的一些库来完善测试环境，同时 dom 环境也是必须的，因为我们需要建成完整的 dom 树结构，才能更好的模拟自定义组件的运行。例如可以选用 mocha + jsdom 的组合，亦可选用 jest，下述例子选用 jest 作为测试框架来说明。 自定义组件测试工具集 小程序的运行环境比较特殊，不同于常见的浏览器环境，它采用的是双线程的架构。而在进行单元测试时，我们并不需要用到这样复杂的架构带来的利好，我们进行的是功能测试而无需苛求性能、安全等因素，因此我们提供了一个测试工具集以支持自定义组件在 nodejs 单线程中也能运行起来。 我们先安装一下测试工具集——miniprogram-simulate： npm i --save-dev miniprogram-simulate 编写测试用例 假设我们有如下自定义组件： <!-- /components/index.wmxl --> <view class="index">{{prop}}</view> // /components/index.js Component({ properties: { prop: { type: String, value: 'index.properties' }, }, }) /* /components/index.wxss */ .index { color: green; } 我们想要测试渲染的结果，可以按照如下方式编写测试用例： // /test/components/index.test.js const simulate = require('miniprogram-simulate') test('components/index', () => { const id = simulate.load('/components/index') // 此处必须传入绝对路径 const comp = simulate.render(id) // 渲染成自定义组件树实例 const parent = document.createElement('parent-wrapper') // 创建父亲节点 comp.attach(parent) // attach 到父亲节点上，此时会触发自定义组件的 attached 钩子 const view = comp.querySelector('.index') // 获取子组件 view expect(view.dom.innerHTML).toBe('index.properties') // 测试渲染结果 expect(window.getComputedStyle(view.dom).color).toBe('green') // 测试渲染结果 }) PS：测试工具集中的 wx 对象和内置组件都不会实现真正的功能，如果需要测试一些特殊场景的话，可以自行覆盖掉测试工具集中的 api 接口和内置组件。PS：目前因为有部分自定义组件功能仍未支持（如抽象节点等），故测试工具暂无法全部覆盖自定义组件的特性，后续会继续完善。 测试工具集中提供了一些方便测试的接口，比如： 模拟 touch 事件、自定义事件触发...

自定义组件扩展 为了更好定制自定义组件的功能，可以使用自定义组件扩展机制。从小程序基础库版本 2.2.3 开始支持。 扩展后的效果 为了更好的理解扩展后的效果，先举一个例子： // behavior.js module.exports = Behavior({ definitionFilter(defFields) { defFields.data.from = 'behavior' }, }) // component.js Component({ data: { from: 'component' }, behaviors: [require('behavior.js')], ready() { console.log(this.data.from) // 此处会发现输出 behavior 而不是 component } }) 通过例子可以发现，自定义组件的扩展其实就是提供了修改自定义组件定义段的能力，上述例子就是修改了自定义组件中的 data 定义段里的内容。 使用扩展 Behavior() 构造器提供了新的定义段 definitionFilter ，用于支持自定义组件扩展。 definitionFilter 是一个函数，在被调用时会注入两个参数，第一个参数是使用该 behavior 的 component/behavior 的定义对象，第二个参数是该 behavior 所使用的 behavior 的 definitionFilter 函数列表。 以下举个例子来说明： // behavior3.js module.exports = Behavior({ definitionFilter(defFields, definitionFilterArr) {}, }) // behavior2.js module.exports = Behavior({ behaviors: [require('behavior3.js')], definitionFilter(defFields, definitionFilterArr) { // definitionFilterArr[0](defFields) }, }) // behavior1.js module.exports = Behavior({ behaviors: [require('behavior2.js')], definitionFilter(defFields, definitionFilterArr) {}, }) // component.js Component({ behaviors: [require('behavior1.js')], }) 上述代码中声明了1个自定义组件和3个 behavior，每个 behavior 都使用了 definitionFilter 定义段。那么按照声明的顺序会有如下事情发生： 当进行 behavior2 的声明时就会调用 behavior3 的 definitionFilter 函数，其中 defFields 参数是 behavior2 的定义段， definitionFilterArr 参数即为空数组，因为 behavior3 没有使用其他的 behavior 。 当进行 behavior1 的声明时就会调用 behavior2 的 definitionFilter 函数，其中 defFields 参数是 behavior1 的定义段， definitionFilterArr 参数是一个长度为1的数组，definitionFilterArr[0] 即为 behavior3 的 definitionFilter 函数，因为 behavior2 使用了 behavior3。用户在此处可以自行决定在进行 behavior1 的声明时要不要调用 behavior3 的 definitionFilter 函数，如果需要调用，在此处补充代码 definitionFilterArr[0](defFields) 即可，definitionFilterArr 参数会由基础库补充传入。 同理，在进行...

数据监听器 数据监听器可以用于监听和响应任何属性和数据字段的变化。从小程序基础库版本 2.6.1 开始支持。 使用数据监听器 有时，在一些数据字段被 setData 设置时，需要执行一些操作。 例如， this.data.sum 永远是 this.data.numberA 与 this.data.numberB 的和。此时，可以使用数据监听器进行如下实现。 Component({ attached: function() { this.setData({ numberA: 1, numberB: 2, }) }, observers: { 'numberA, numberB': function(numberA, numberB) { // 在 numberA 或者 numberB 被设置时，执行这个函数 this.setData({ sum: numberA + numberB }) } } }) 监听字段语法 数据监听器支持监听属性或内部数据的变化，可以同时监听多个。一次 setData 最多触发每个监听器一次。 同时，监听器可以监听子数据字段，如下例所示。 Component({ observers: { 'some.subfield': function(subfield) { // 使用 setData 设置 this.data.some.subfield 时触发 // （除此以外，使用 setData 设置 this.data.some 也会触发） subfield === this.data.some.subfield }, 'arr[12]': function(arr12) { // 使用 setData 设置 this.data.arr[12] 时触发 // （除此以外，使用 setData 设置 this.data.arr 也会触发） arr12 === this.data.arr[12] }, } }) 如果需要监听所有子数据字段的变化，可以使用通配符 ** 。 Component({ observers: { 'some.field.**': function(field) { // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发 // （除此以外，使用 setData 设置 this.data.some 也会触发） field === this.data.some.field }, }, attached: function() { // 这样会触发上面的 observer this.setData({ 'some.field':...

behaviors behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。 每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior 。 详细的参数含义和使用请参考 Behavior 参考文档。 组件中使用 组件引用时，在 behaviors 定义段中将它们逐个列出即可。 代码示例： // my-component.js var myBehavior = require('my-behavior') Component({ behaviors: [myBehavior], properties: { myProperty: { type: String } }, data: { myData: 'my-component-data' }, created: function () { console.log('[my-component] created') }, attached: function () { console.log('[my-component] attached') }, ready: function () { console.log('[my-component] ready') }, methods: { myMethod: function () { console.log('[my-component] log by myMethod') }, } }) 在上例中， my-component 组件定义中加入了 my-behavior， 而 my-behavior 结构为： 属性：myBehaviorProperty 数据字段：myBehaviorData 方法：myBehaviorMethod 生命周期函数：attached、created、ready 这将使 my-component 最终结构为： 属性：myBehaviorProperty、myProperty 数据字段：myBehaviorData、myData 方法：myBehaviorMethod、myMethod 生命周期函数：attached、created、ready 当组件触发生命周期时，上例生命周期函数执行顺序为： [my-behavior] created [my-component] created [my-behavior] attached [my-component] attached [my-behavior] ready [my-component] ready 详细规则参考 同名字段的覆盖和组合规则。 同名字段的覆盖和组合规则 组件和它引用的 behavior 中可以包含同名的字段，对这些字段的处理方法如下： 如果有同名的属性 (properties) 或方法 (methods)：若组件本身有这个属性或方法，则组件的属性或方法会覆盖 behavior 中的同名属性或方法；若组件本身无这个属性或方法，则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法；在 2 的基础上，若存在嵌套引用 behavior 的情况，则规则为：父 behavior 覆盖 子 behavior 中的同名属性或方法。 如果有同名的数据字段 (data)：若同名的数据字段都是对象类型，会进行对象合并；其余情况会进行数据覆盖，覆盖规则为：组件 > 父 behavior > 子 behavior 、 靠后的 behavior > 靠前的 behavior。（优先级高的覆盖优先级低的，最大的为优先级最高） 生命周期函数不会相互覆盖，而是在对应触发时机被逐个调用：对于不同的生命周期函数之间，遵循组件生命周期函数的执行顺序；对于同种生命周期函数，遵循如下规则：behavior 优先于组件执行；子 behavior 优先于 父 behavior 执行；靠前的 behavior 优先于 靠后的 behavior 执行；如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数只会被执行一次。 代码示例： 在开发者工具中预览效果 内置 behaviors 自定义组件可以通过引用内置的 behavior 来获得内置组件的一些行为。 Component({...

Component 构造器 Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。 详细的参数含义和使用请参考 Component 参考文档。 Component({ behaviors: [], properties: { myProperty: { // 属性名 type: String, value: '' }, myProperty2: String // 简化的定义方式 }, data: {}, // 私有数据，可用于模板渲染 lifetimes: { // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () { }, moved: function () { }, detached: function () { }, }, // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖 ready: function() { }, pageLifetimes: { // 组件所在页面的生命周期函数 show: function () { }, hide: function () { }, resize: function () { }, }, methods: { onMyButtonTap: function(){ this.setData({ // 更新属性和数据的方法与更新页面数据的方法类似 }) }, // 内部方法建议以下划线开头 _myPrivateMethod: function(){ // 这里将 data.A[0].B 设为 'myPrivateData' this.setData({ 'A[0].B': 'myPrivateData' }) }, _propertyChange: function(newVal, oldVal) { } } }) 使用 Component 构造器构造页面 事实上，小程序的页面也可以视为自定义组件。因而，页面也可以使用 Component 构造器构造，拥有与普通组件一样的定义段与实例方法。但此时要求对应 json 文件中包含 usingComponents 定义段。 此时，组件的属性可以用于接收页面的参数，如访问页面 /pages/index/index?paramA=123&paramB=xyz ，如果声明有属性 paramA 或 paramB ，则它们会被赋值为 123 或 xyz 。 页面的生命周期方法（即 on 开头的方法），应写在 methods 定义段中。 代码示例：...

组件模板和样式 类似于页面，自定义组件拥有自己的 wxml 模板和 wxss 样式。 组件模板 组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。 在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。 代码示例： <!-- 组件模板 --> <view class="wrapper"> <view>这里是组件的内部节点</view> <slot></slot> </view> <!-- 引用组件的页面模板 --> <view> <component-tag-name> <!-- 这部分内容将被放置在组件 <slot> 的位置上 --> <view>这里是插入到组件slot中的内容</view> </component-tag-name> </view> 注意，在模板中引用到的自定义组件及其对应的节点名需要在 json 文件中显式定义，否则会被当作一个无意义的节点。除此以外，节点名也可以被声明为抽象节点。 模板数据绑定 与普通的 WXML 模板类似，可以使用数据绑定，这样就可以向子组件的属性传递动态数据。 代码示例： <!-- 引用组件的页面模板 --> <view> <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}"> <!-- 这部分内容将被放置在组件 <slot> 的位置上 --> <view>这里是插入到组件slot中的内容</view> </component-tag-name> </view> 在以上例子中，组件的属性 propA 和 propB 将收到页面传递的数据。页面可以通过 setData 来改变绑定的数据字段。 注意：这样的数据绑定只能传递 JSON 兼容数据。自基础库版本 2.0.9 开始，还可以在数据中包含函数（但这些函数不能在 WXML 中直接调用，只能传递给子组件）。 组件 wxml 的 slot 在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构。 默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。 Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, properties: { /* ... */ }, methods: { /* ... */ } }) 此时，可以在这个组件的 wxml 中使用多个 slot ，以不同的 name 来区分。 <!-- 组件模板 --> <view class="wrapper"> <slot name="before"></slot> <view>这里是组件的内部细节</view> <slot name="after"></slot> </view> 使用时，用 slot 属性来将节点插入到不同的 slot 上。 <!-- 引用组件的页面模板 --> <view> <component-tag-name> <!-- 这部分内容将被放置在组件 <slot...