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

数据预拉取 预拉取能够在小程序冷启动的时候通过微信后台提前向第三方服务器拉取业务数据，当代码包加载完时可以更快地渲染页面，减少用户等待时间，从而提升小程序的打开速度 。 使用流程 1. 配置数据下载地址 登录小程序 MP 管理后台，进入设置 -> 开发设置 -> 数据预加载，点击开启，填写数据下载地址，只支持 HTTPS 。 2. 设置 TOKEN 第一次启动小程序时，调用 wx.setBackgroundFetchToken() 设置一个 TOKEN 字符串，可以跟用户态相关，会在后续微信客户端向开发者服务器请求时带上，便于给后者校验请求合法性。 示例： App({ onLaunch() { wx.setBackgroundFetchToken({ token: 'xxx' }) } }) 3. 微信客户端提前拉取数据 当用户打开小程序时，微信服务器将向开发者服务器（上面配置的数据下载地址）发起一个 HTTP GET 请求，其中包含的 query 参数如下，数据获取到后会将整个 HTTP body 缓存到本地。 参数 类型 必填 说明 appid String 是 小程序标识。 token String 否 前面设置的 TOKEN。 code String 否 用户登录凭证，未设置TOKEN时由微信侧预生成，可在开发者后台调用 auth.code2Session，换取 openid 等信息。 timestamp Number 是 时间戳，微信客户端发起请求的时间 path String 否 打开小程序的路径。 query String 否 打开小程序的query。 scene Number 否 打开小程序的场景值。 query 参数会使用 urlencode 处理 token和code只会存在一个，用于标识用户身份。 开发者服务器接口返回的数据类型应为字符串，且大小应不超过 256KB，否则将无法缓存数据 4. 读取数据 用户启动小程序时，调用 wx.getBackgroundFetchData() 获取已缓存到本地的数据。 示例： App({ onLaunch() { wx.getBackgroundFetchData({ fetchType: 'pre', success(res) { console.log(res.fetchedData) // 缓存数据 console.log(res.timeStamp) // 客户端拿到缓存数据的时间戳 console.log(res.path) // 页面路径 console.log(res.query) // query 参数 console.log(res.scene) // 场景值 } }) } }) 调试方法 为了方便调试数据预拉取，工具提供了下面的调试能力给到开发者。

独立分包 微信客户端 6.7.2，基础库 2.3.0 及以上版本开始支持。开发者工具请使用 1.02.1808300 及以上版本，可点此下载。 独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。 开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。 一个小程序中可以有多个独立分包。 小游戏不支持独立分包。 配置方法 假设小程序目录结构如下： ├── app.js ├── app.json ├── app.wxss ├── moduleA │ └── pages │ ├── rabbit │ └── squirrel ├── moduleB │ └── pages │ ├── pear │ └── pineapple ├── pages │ ├── index │ └── logs └── utils 开发者通过在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。 { "pages": [ "pages/index", "pages/logs" ], "subpackages": [ { "root": "moduleA", "pages": [ "pages/rabbit", "pages/squirrel" ] }, { "root": "moduleB", "pages": [ "pages/pear", "pages/pineapple" ], "independent": true } ] } 限制 独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。 此外，使用独立分包时要注意： 独立分包中不能依赖主包和其他分包中的内容，包括js文件、template、wxss、自定义组件、插件等。主包中的app.wxss对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式； App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为； 独立分包中暂时不支持使用插件。 注意事项 （1）关于 getApp() 与普通分包不同，独立分包运行时，App 并不一定被注册，因此 getApp() 也不一定可以获得 App 对象： 当用户从独立分包页面启动小程序时，主包不存在，App也不存在，此时调用 getApp() 获取到的是 undefined。 当用户进入普通分包或主包内页面时，主包才会被下载，App 才会被注册。 当用户是从普通分包或主包内页面跳转到独立分包页面时，主包已经存在，此时调用 getApp() 可以获取到真正的 App。 由于这一限制，开发者无法通过 App 对象实现独立分包和小程序其他部分的全局变量共享。 为了在独立分包中满足这一需求，基础库 2.2.4 版本开始 getApp支持 [allowDefault]参数，在 App 未定义时返回一个默认实现。当主包加载，App 被注册时，默认实现中定义的属性会被覆盖合并到真正的 App 中。 示例代码： 独立分包中 const app = getApp({allowDefault: true}) // {} app.data = 456 app.global = {} app.js 中 App({ data: 123, other: 'hello' }) console.log(getApp()) //...

使用分包 配置方法 假设支持分包的小程序目录结构如下： ├── app.js ├── app.json ├── app.wxss ├── packageA │   └── pages │   ├── cat │   └── dog ├── packageB │   └── pages │   ├── apple │   └── banana ├── pages │   ├── index │   └── logs └── utils 开发者通过在 app.json subpackages 字段声明项目分包结构： 写成 subPackages 也支持。 { "pages":[ "pages/index", "pages/logs" ], "subpackages": [ { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ] } ] } subpackages 中，每个分包的配置有以下几项： 字段 类型 说明 root String 分包根目录 name String 分包别名，分包预下载时可以使用 pages StringArray 分包页面路径，相对与分包根目录 independent Boolean 分包是否是独立分包 打包原则 声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到 app（主包） 中 app（主包）也可以有自己的 pages（即最外层的 pages 字段） subpackage 的根目录不能是另外一个 subpackage 内的子目录 tabBar 页面必须在 app（主包）内 引用原则 packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件 packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template packageA 无法使用 packageB 的资源，但可以使用 app、自己 package...

wx.login(OBJECT) 调用接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 会话密钥（session_key）。用户数据的加解密通讯需要依赖会话密钥完成。 OBJECT参数说明： 参数名 类型 必填 说明 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） success返回参数说明： 参数名 类型 说明 errMsg String 调用结果 code String 用户允许登录后，回调内容会带上 code（有效期五分钟），开发者需要将 code 发送到开发者服务器后台，使用code 换取 session_key api，将 code 换成 openid 和 session_key 示例代码： //app.js App({ onLaunch: function() { wx.login({ success: function(res) { if (res.code) { //发起网络请求 wx.request({ url: 'https://test.com/onLogin', data: { code: res.code } }) } else { console.log('获取用户登录态失败！' + res.errMsg) } } }); } }) code 换取 session_key ​这是一个 HTTPS 接口，开发者服务器使用登录凭证 code 获取 session_key 和 openid。其中 session_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session_key 不应该在网络上传输。 接口地址： https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code 请求参数： 参数 必填 说明 appid 是 小程序唯一标识 secret 是 小程序的 app secret js_code 是 登录时获取的 code grant_type 是 填写为 authorization_code 返回参数： 参数 说明 openid 用户唯一标识 session_key 会话密钥 unionid...

小程序开发者工具是对微信客户端的模拟，受限于桌面设备同移动设备的差异，以及微信的一些特有数据，同时考虑到开发的便捷性，部分 API 在工具和微信中有所不同。 扫码接口 同手机端直接调用摄像头来扫码不同，在 PC 或者 Mac 上调用摄像头来扫码完成调试是一个低效的行为，所以在开发工具上调用二维码扫码 API 后，开发者可以选择一个本地的图片来进行后续的逻辑调试，而不是真正的启用摄像头来扫码，流程有所不同，但是接口的输入和输出是一致的。 微信支付 最新版本的开发者工具已经支持微信支付的调试，但是为了兼顾到安全，同手机上直接调用微信支付有所不同： 新绑定的开发者需要 24 小时后才有权限进行微信支付的调试 开发者在工具上调用微信支付的 API 后，开发工具会出现一个二维码，开发者必须使用当前开发所使用的微信号扫码后在手机上完成支付的流程 工具会同步移动端微信支付的回包到工具中，开发者自行进行后续的操作 使用的交互有所不同，但是接口的输入输出工具同客户端是保持一致的。 启动使用自定义参数 在日常使用中，用户可以通过扫码、分享打开一个小程序，这时候会依据设置的启动页面：path 跳转到对应的小程序页面（不一定是首页）并且可以携带参数：query。在开发者工具中，开发者同样可以通过自定义编译条件的方式来达到调试不同启动页面和启动参数的目的。 例如下图是选择进入页面是 page/API/index，参数 是 name=can 进入场景值 在微信客户端中，用户可能在各个场景下打开小程序 详情 ，然而在开发者工具中是没有真实的环境去模拟这些场景的。开发者可以通过条件编译的方式来达到调试不同场景的目的。 普通的转发 开发者工具上调用转发是一个模拟的行为，并不会真实的转发给用户，开发可以通过这个模拟行为判断是否正确的调用了转发 API。 带 shareTicket 的转发 带 shareTicket 的转发可以获取到更多的转发信息，例如群聊的名称以及群的标识 openGId。在小程序开发者工具上，开发者可以通过以下方式来调试带 shareTicket 的转发。 调用 wx.showShareMenu 的参数 withShareTicket 为 true 时，点击模拟器右上角菜单后出现的转发按钮，会出现一个测试群列表，如图： 开发者点击选取任何一个群，可以通过接口的回包获取到 shareTicket ，通过调用 wx.getShareInfo 可以获取到相关转发的信息 当开发者需要调试从某一个群点开，并且带有 shareTicket 的场景时，可以使用自定义编译中的 1044:群聊会话中的小程序消息卡片（带 shareTicket） 同时可以选择任一模拟测试群，如图 预览使用自定义编译条件 同 启动使用自定义参数 相同，提交预览时，开发者可以通过自定义预览的方式来达到在移动设备上调试不同启动页面和启动参数 的目的。我们可以选择已经创建好的自定义编译条件进行预览。 跳转小程序调试支持 小程序跳转开发调试可以分为两个部分 调试小程序是否能够正确的跳转 出于小程序代码的安全考虑，在工具上调用 wx.navigateToMiniProgram 的时候，开发者工具不会真实的打开和跳转到另外的小程序，但是工具会判断当前小程序与需要跳转的小程序之间的绑定关系，输出相关信息给到开发者。开发者可以根据成功或者失败的回调函数来判断调用是否成功。 调试被打开的小程序时候正确的接收参数 选择 自定义编译 进入场景选择 1037 从小程序进入 可以调试小程序被打开时候是否接收到了正确的参数并做了相关处理。 选择 自定义编译 进入场景选择 1038 从小程序返回 可以调试小程序返回时候是否接收到了正确的参数并做了相关处理。

小程序开发者工具是对微信客户端的模拟，受限于桌面设备同移动设备的差异，以及微信的一些特有数据，同时考虑到开发的便捷性，部分 API 在工具和微信中有所不同。 扫码接口 同手机端直接调用摄像头来扫码不同，在 PC 或者 Mac 上调用摄像头来扫码完成调试是一个低效的行为，所以在开发工具上调用二维码扫码 API 后，开发者可以选择一个本地的图片来进行后续的逻辑调试，而不是真正的启用摄像头来扫码，流程有所不同，但是接口的输入和输出是一致的。 微信支付 最新版本的开发者工具已经支持微信支付的调试，但是为了兼顾到安全，同手机上直接调用微信支付有所不同： 新绑定的开发者需要 24 小时后才有权限进行微信支付的调试 开发者在工具上调用微信支付的 API 后，开发工具会出现一个二维码，开发者必须使用当前开发所使用的微信号扫码后在手机上完成支付的流程 工具会同步移动端微信支付的回包到工具中，开发者自行进行后续的操作 使用的交互有所不同，但是接口的输入输出工具同客户端是保持一致的。 启动使用自定义参数 在日常使用中，用户可以通过扫码、分享打开一个小程序，这时候会依据设置的启动页面：path 跳转到对应的小程序页面（不一定是首页）并且可以携带参数：query。在开发者工具中，开发者同样可以通过自定义编译条件的方式来达到调试不同启动页面和启动参数的目的。 例如下图是选择进入页面是 page/API/index，参数 是 name=can 进入场景值 在微信客户端中，用户可能在各个场景下打开小程序 详情 ，然而在开发者工具中是没有真实的环境去模拟这些场景的。开发者可以通过条件编译的方式来达到调试不同场景的目的。 普通的转发 开发者工具上调用转发是一个模拟的行为，并不会真实的转发给用户，开发可以通过这个模拟行为判断是否正确的调用了转发 API。 带 shareTicket 的转发 带 shareTicket 的转发可以获取到更多的转发信息，例如群聊的名称以及群的标识 openGId。在小程序开发者工具上，开发者可以通过以下方式来调试带 shareTicket 的转发。 调用 wx.showShareMenu 的参数 withShareTicket 为 true 时，点击模拟器右上角菜单后出现的转发按钮，会出现一个测试群列表，如图： 开发者点击选取任何一个群，可以通过接口的回包获取到 shareTicket ，通过调用 wx.getShareInfo 可以获取到相关转发的信息 当开发者需要调试从某一个群点开，并且带有 shareTicket 的场景时，可以使用自定义编译中的 1044:群聊会话中的小程序消息卡片（带 shareTicket） 同时可以选择任一模拟测试群，如图 预览使用自定义编译条件 同 启动使用自定义参数 相同，提交预览时，开发者可以通过自定义预览的方式来达到在移动设备上调试不同启动页面和启动参数 的目的。我们可以选择已经创建好的自定义编译条件进行预览。 跳转小程序调试支持 小程序跳转开发调试可以分为两个部分 调试小程序是否能够正确的跳转 出于小程序代码的安全考虑，在工具上调用 wx.navigateToMiniProgram 的时候，开发者工具不会真实的打开和跳转到另外的小程序，但是工具会判断当前小程序与需要跳转的小程序之间的绑定关系，输出相关信息给到开发者。开发者可以根据成功或者失败的回调函数来判断调用是否成功。 调试被打开的小程序时候正确的接收参数 选择 自定义编译 进入场景选择 1037 从小程序进入 可以调试小程序被打开时候是否接收到了正确的参数并做了相关处理。 选择 自定义编译 进入场景选择 1038 从小程序返回 可以调试小程序返回时候是否接收到了正确的参数并做了相关处理。

微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态类建立友好、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与程序的共赢。

cover-view 基础库 1.4.0 开始支持，低版本需做兼容处理 覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas，支持嵌套。 属性名 无 cover-image 基础库 1.4.0 开始支持，低版本需做兼容处理 覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-view，支持嵌套在cover-view里。 属性名 类型 默认值 说明 src String   图标路径，支持临时路径。暂不支持base64与网络地址。 Bug & Tips tip: 只可嵌套在原生组件map、video、canvas内，避免嵌套在其他组件内。 tip: 事件模型遵循冒泡模型，但不会冒泡到原生组件。 tip: 文本建议都套上cover-view标签，避免排版错误。 tip: 只支持基本的定位、布局、文本样式。不支持设置单边的border、opacity、background-image等。 tip: 建议子节点不要溢出父节点 tip: 暂不支持css动画。 示例： <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" rel="external nofollow" controls="{{false}}" event-model="bubble"> <cover-view class="controls"> <cover-view class="play" bindtap="play"> <cover-image class="img" src="/path/to/icon_play" /> </cover-view> <cover-view class="pause" bindtap="pause"> <cover-image class="img" src="/path/to/icon_pause" /> </cover-view> <cover-view class="time">00:00</cover-view> </cover-view> </video> .controls { position: relative; top: 50%; height: 50px; margin-top: -25px; display: flex; } .play,.pause,.time { flex: 1; height: 100%; } .time { text-align: center; background-color: rgba(0, 0, 0, .5); color: white; line-height: 50px; } .img { width: 40px; height: 40px; margin: 5px auto; } Page({ onReady() { this.videoCtx = wx.createVideoContext('myVideo') }, play() { this.videoCtx.play() },...

wx.playVoice(OBJECT) ​开始播放语音，同时只允许一个语音文件正在播放，如果前一个语音文件还没播放完，将中断前一个语音播放。 OBJECT参数说明： 参数 类型 必填 说明 filePath String 是 需要播放的语音文件的文件路径 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） 示例代码： wx.startRecord({ success:function(res){ var tempFilePath = res.tempFilePath wx.playVoice({ filePath:tempFilePath, complete:function(){ } }) } }) wx.pauseVoice() 暂停正在播放的语音。再次调用wx.playVoice播放同一个文件时，会从暂停处开始播放。如果想从头开始播放，需要先调用wx.stopVoice。 示例代码： wx.startRecord({ success:function(res){ var tempFilePath = res.tempFilePath wx.playVoice({ filePath: tempFilePath }) setTimeout(function(){ //暂停播放 wx.pauseVoice() },5000) } }) wx.stopVoice() 结束播放语音。 示例代码： wx.startRecord({ success:function(res){ var tempFilePath = res.tempFilePath wx.playVoice({ filePath:tempFilePath }) setTimeout(function(){ wx.stopVoice() },5000) } })

压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）。图片路径，图片的路径，支持本地路径、代码包路径图片路径，图片的路径，支持本地路径、代码包路径 wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。 OBJECT参数说明： 参数 类型 必填 说明 count Number 否 最多可以选择的图片张数，默认9 sizeType StringArray 否 “original”原图，”compressed”压缩图，默认二者都有 sourceType StringArray 否 “album”从相册选图，”camera”使用相机，默认二者都由 success Function 是 成功则返回图片的本地文件路径列表tempFilePaths fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） 注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，在小程序下次启动时才能访问得到。 success返回参数说明： 参数 类型 说明 最低版本 tempFilePaths StringArray 图片的本地文件路径列表   tempFiles ObjectArray 图片的本地文件列表，每一项是一个 File 对象 1.2.0 File 对象结构如下: 字段 类型 说明 path String 本地文件路径 size Number 本地文件大小，单位：B 示例代码： wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths } }) wx.previewImage(OBJECT) ​ 预览图片。 OBJECT参数说明： 参数 类型 必填 说明 current String 否 当前显示图片的链接，不填则默认为urls的第一张 urls StringArray 是 需要预览的图片链接列表 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） 示例代码： wx.previewImage({ current: '',...