微信小程序开发文档 第39页
授权 部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个 scope ,用户选择对 scope 来进行授权,当授权给一个 scope 之后,其对应的所有接口都可以直接使用。 此类接口调用时: 如果用户未接受或拒绝过此权限,会弹窗询问用户,用户点击同意后方可调用接口; 如果用户已授权,可以直接调用接口; 如果用户已拒绝授权,则不会出现弹窗,而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。 获取用户授权设置 开发者可以使用 wx.getSetting 获取用户当前的授权状态。 打开设置界面 用户可以在小程序设置界面(「右上角」 – 「关于」 – 「右上角」 – 「设置」)中控制对该小程序的授权状态。 开发者可以调用 wx.openSetting 打开设置界面,引导用户开启授权。 提前发起授权请求 开发者可以使用 wx.authorize 在调用需授权 API 之前,提前向用户发起授权请求。 scope 列表 scope 对应接口 描述 scope.userInfo wx.getUserInfo 用户信息 scope.userLocation wx.getLocation, wx.chooseLocation 地理位置 scope.userLocationBackground wx.startLocationUpdateBackground 后台定位 scope.address wx.chooseAddress 通讯地址 scope.invoiceTitle wx.chooseInvoiceTitle 发票抬头 scope.invoice wx.chooseInvoice 获取发票 scope.werun wx.getWeRunData 微信运动步数 scope.record wx.startRecord 录音功能 scope.writePhotosAlbum wx.saveImageToPhotosAlbum, wx.saveVideoToPhotosAlbum 保存到相册 scope.camera camera 组件 摄像头 授权有效期 一旦用户明确同意或拒绝过授权,其授权关系会记录在后台,直到用户主动删除小程序。 最佳实践 在真正需要使用授权接口时,才向用户发起授权申请,并在授权申请中说明清楚要使用该功能的理由。 注意事项 wx.authorize({scope: “scope.userInfo”}),不会弹出授权窗口,请使用 <button open-type=”getUserInfo”/> 需要授权 scope.userLocation、scope.userLocationBackground 时必须配置地理位置用途说明。 后台定位 与其它类型授权不同的是,scope.userLocationBackground 不会弹窗提醒用户。需要用户在设置页中,主动将“位置信息”选项设置为“使用小程序期间和离开小程序后”。开发者可以通过调用wx.openSetting,打开设置页。
DarkMode 适配指南 微信从iOS客户端 7.0.12、Android客户端 7.0.13 开始正式支持 DarkMode,小程序也从基础库 v2.11.0、开发者工具 1.03.2004271 开始,为开发者提供小程序内的 DarkMode 适配能力。 开启 DarkMode 在app.json中配置darkmode为true,即表示当前小程序已适配 DarkMode,所有基础组件均会根据系统主题展示不同的默认样式,navigation bar 和 tab bar 也会根据下面的配置自动切换。 相关配置 当app.json中配置darkmode为true时,小程序部分配置项可通过变量的形式配置,在变量配置文件中定义不同主题下的颜色或图标,方法如下: 在app.json中配置themeLocation,指定变量配置文件theme.json路径,例如:在根目录下新增theme.json,需要配置”themeLocation”:”theme.json” 在theme.json中定义相关变量; 在app.json中以@开头引用变量。 支持通过变量配置的属性: 全局配置的 window 属性与页面配置下的属性navigationBarBackgroundColornavigationBarTextStylebackgroundColorbackgroundTextStylebackgroundColorTopbackgroundColorBottom 全局配置 window.tabBar 的属性colorselectedColorbackgroundColorborderStylelisticonPathselectedIconPath 变量配置文件 theme.json theme.json用于颜色主题相关的变量定义,需要先在themeLocation中配置theme.json的路径,否则无法读取变量配置。 配置文件须包含以下属性: 属性 类型 必填 描述 light object 是 浅色模式下的变量定义 dark object 是 深色模式下的变量定义 light和dark下均可以key: value的方式定义变量名和值,例如: { "light": { "navBgColor": "#f6f6f6", "navTxtStyle": "black" }, "dark": { "navBgColor": "#191919", "navTxtStyle": "white" } } 完成定义后,可在全局配置或页面配置的相关属性中以@开头引用,例如: // 全局配置 { "window": { "navigationBarBackgroundColor": "@navBgColor", "navigationBarTextStyle": "@navTxtStyle" } } // 页面配置 { "navigationBarBackgroundColor": "@navBgColor", "navigationBarTextStyle": "@navTxtStyle" } 配置完成后,小程序框架会自动根据系统主题,为小程序展示对应主题下的颜色。 配置示例 app.json(示例省略了主题相关以外的配置项) { "window": { "navigationBarBackgroundColor": "@navBgColor", "navigationBarTextStyle": "@navTxtStyle", "backgroundColor": "@bgColor", "backgroundTextStyle": "@bgTxtStyle", "backgroundColorTop": "@bgColorTop", "backgroundColorBottom": "@bgColorBottom" }, "tabBar": { "color": "@tabFontColor", "selectedColor": "@tabSelectedColor", "backgroundColor": "@tabBgColor", "borderStyle": "@tabBorderStyle", "list": [{ "iconPath": "@iconPath1",...
数据预拉取 预拉取能够在小程序冷启动的时候通过微信后台提前向第三方服务器拉取业务数据,当代码包加载完时可以更快地渲染页面,减少用户等待时间,从而提升小程序的打开速度 。 使用流程 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) // 场景值 } }) } }) 调试方法 为了方便调试数据预拉取,工具提供了下面的调试能力给到开发者。
周期性更新 基础库 2.8.0 开始支持,低版本需做兼容处理。 生效条件:用户七天内使用过的小程序 周期性更新能够在用户未打开小程序的情况下,也能从服务器提前拉取数据,当用户打开小程序时可以更快地渲染页面,减少用户等待时间,增强在弱网条件下的可用性。 使用流程 1. 配置数据下载地址 登录小程序 MP 管理后台,进入设置 -> 开发设置 -> 数据周期性更新,点击开启,填写数据下载地址。 2. 设置 TOKEN 第一次启动小程序时,调用 wx.setBackgroundFetchToken() 设置一个 TOKEN 字符串,可以跟用户态相关,会在后续微信客户端向开发者服务器请求时带上,便于给后者校验请求合法性。 示例: App({ onLaunch() { wx.setBackgroundFetchToken({ token: 'xxx' }) } }) 3. 微信客户端定期拉取数据 微信客户端会在一定的网络条件下,每隔 12 小时(以上一次成功更新的时间为准)向配置的数据下载地址发起一个 HTTP GET 请求,其中包含的 query 参数如下,数据获取到后会将整个 HTTP body 缓存到本地。 参数 类型 说明 appid String 小程序标识 token String 前面设置的 TOKEN timestamp Number 时间戳,微信客户端发起请求的时间 query 参数会使用 urlencode 处理 开发者服务器接口返回的数据类型应为字符串,且大小应不超过 256KB,否则将无法缓存数据 4. 读取数据 用户启动小程序时,调用 wx.getBackgroundFetchData() 获取已缓存到本地的数据。 示例: App({ onLaunch() { wx.getBackgroundFetchData({ fetchType: 'periodic', success(res) { console.log(res.fetchedData) // 缓存数据 console.log(res.timeStamp) // 客户端拿到缓存数据的时间戳 } }) } }) 调试方法 由于微信客户端每隔 12 个小时才会发起一次请求,调试周期性更新功能会显得不太方便。 因此为了方便调试周期性数据,工具提供了下面的调试能力给到开发者。
后端 API 小程序还提供了一系列在后端服务器使用 HTTPS 请求调用的 API,帮助开发者在后台完成各类数据分析、管理和查询等操作。如 getAccessToken,code2Session 等。 access_token access_token 是小程序全局唯一后台接口调用凭据,调用绝大多数后台接口时都需使用。开发者可以通过 getAccessToken 接口获取并进行妥善保存。 为了 access_token 的安全性,后端 API 不能直接在小程序内通过 wx.request 调用,即 api.weixin.qq.com 不能被配置为服务器域名。开发者应在后端服务器使用getAccessToken获取 access_token,并调用相关 API; 请求参数说明 对于 GET 请求,请求参数应以 QueryString 的形式写在 URL 中。 对于 POST 请求,部分参数需以 QueryString 的形式写在 URL 中(一般只有 access_token,如有额外参数会在文档里的 URL 中体现),其他参数如无特殊说明均以 JSON 字符串格式写在 POST 请求的 body 中。 返回参数说明 注意:当API调用成功时,部分接口不会返回 errcode 和 errmsg,只有调用失败时才会返回。 消息推送 接入微信小程序消息推送服务,可以两种方式选择其一: 开发者服务器接收消息推送 云函数接收消息推送 开发者服务器接收消息推送 开发者需要按照如下步骤完成: 填写服务器配置 验证服务器地址的有效性 据接口文档实现业务逻辑,接收消息和事件 第一步:填写服务器配置 登录小程序后台后,在「开发」-「开发设置」-「消息推送」中,管理员扫码启用消息服务,填写服务器地址(URL)、令牌(Token) 和 消息加密密钥(EncodingAESKey)等信息。 URL: 开发者用来接收微信消息和事件的接口 URL。开发者所填写的URL 必须以 http:// 或 https:// 开头,分别支持 80 端口和 443 端口。 Token: 可由开发者可以任意填写,用作生成签名(该 Token 会和接口 URL 中包含的 Token 进行比对,从而验证安全性)。 EncodingAESKey: 由开发者手动填写或随机生成,将用作消息体加解密密钥。 同时,开发者可选择消息加解密方式:明文模式(默认)、兼容模式和安全模式。可以选择消息数据格式:XML 格式(默认)或 JSON 格式。 模式的选择与服务器配置在提交后都会立即生效,请开发者谨慎填写及选择。切换加密方式和数据格式需要提前配置好相关代码,详情请参考 消息加解密说明。 第二步:验证消息的确来自微信服务器 开发者提交信息后,微信服务器将发送GET请求到填写的服务器地址URL上,GET请求携带参数如下表所示: 参数 描述 signature 微信加密签名,signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。 timestamp 时间戳 nonce 随机数 echostr 随机字符串 开发者通过检验 signature 对请求进行校验(下面有校验方式)。若确认此次 GET 请求来自微信服务器,请原样返回 echostr 参数内容,则接入生效,成为开发者成功,否则接入失败。加密/校验流程如下: 将token、timestamp、nonce三个参数进行字典序排序 将三个参数字符串拼接成一个字符串进行sha1加密 开发者获得加密后的字符串可与signature对比,标识该请求来源于微信 验证URL有效性成功后即接入生效,成为开发者。 检验signature的PHP示例代码: private function checkSignature() { $signature = $_GET["signature"]; $timestamp = $_GET["timestamp"]; $nonce = $_GET["nonce"]; $token = TOKEN;...
分包加载 微信客户端 6.6.0,基础库 1.7.3 及以上版本开始支持。开发者工具请使用 1.01.1712150 及以上版本,可点此下载 。 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。 在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。 在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。 目前小程序分包大小有以下限制: 整个小程序所有分包大小不超过 16M 单个分包/主包大小不能超过 2M 对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。 具体使用方法请参考: 1、使用分包 配置方法 假设支持分包的小程序目录结构如下: ├── 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(主包)内...
文件系统 文件系统是小程序提供的一套以小程序和用户维度隔离的存储以及一套相应的管理接口。通过 wx.getFileSystemManager() 可以获取到全局唯一的文件系统管理器,所有文件系统的管理操作通过 FileSystemManager 来调用。 var fs = wx.getFileSystemManager() 文件主要分为两大类: 代码包文件:代码包文件指的是在项目目录中添加的文件。 本地文件:通过调用接口本地产生,或通过网络下载下来,存储到本地的文件。 其中本地文件又分为三种: 本地临时文件:临时产生,随时会被回收的文件。不限制存储大小。 本地缓存文件:小程序通过接口把本地临时文件缓存后产生的文件,不能自定义目录和文件名。跟本地用户文件共计,普通小程序最多可存储 10MB,游戏类目的小程序最多可存储 50MB。 本地用户文件:小程序通过接口把本地临时文件缓存后产生的文件,允许自定义目录和文件名。跟本地缓存文件共计,普通小程序最多可存储 10MB,游戏类目的小程序最多可存储 50MB。 代码包文件 由于代码包文件大小限制,代码包文件适用于放置首次加载时需要的文件,对于内容较大或需要动态替换的文件,不推荐用添加到代码包中,推荐在小游戏启动之后再用下载接口下载到本地。 访问代码包文件 代码包文件的访问方式是从项目根目录开始写文件路径,不支持相对路径的写法。如:/a/b/c、a/b/c 都是合法的,./a/b/c ../a/b/c 则不合法。 修改代码包文件 代码包内的文件无法在运行后动态修改或删除,修改代码包文件需要重新发布版本。 本地文件 本地文件指的是小程序被用户添加到手机后,会有一块独立的文件存储区域,以用户维度隔离。即同一台手机,每个微信用户不能访问到其他登录用户的文件,同一个用户不同 appId 之间的文件也不能互相访问。 本地文件的文件路径均为以下格式: {{协议名}}://文件路径 其中,协议名在 iOS/Android 客户端为 “wxfile”,在开发者工具上为 “http”,开发者无需关注这个差异,也不应在代码中去硬编码完整文件路径。 本地临时文件 本地临时文件只能通过调用特定接口产生,不能直接写入内容。本地临时文件产生后,仅在当前生命周期内有效,重启之后即不可用。因此,不可把本地临时文件路径存储起来下次使用。如果需要下次在使用,可通过 FileSystemManager.saveFile() 或 FileSystemManager.copyFile() 接口把本地临时文件转换成本地缓存文件或本地用户文件。 示例 wx.chooseImage({ success: function (res) { var tempFilePaths = res.tempFilePaths // tempFilePaths 的每一项是一个本地临时文件路径 } }) 本地缓存文件 本地缓存文件只能通过调用特定接口产生,不能直接写入内容。本地缓存文件产生后,重启之后仍可用。本地缓存文件只能通过 FileSystemManager.saveFile() 接口将本地临时文件保存获得。 示例 fs.saveFile({ tempFilePath: '', // 传入一个本地临时文件路径 success(res) { console.log(res.savedFilePath) // res.savedFilePath 为一个本地缓存文件路径 } }) 注意:本地缓存文件是最初的设计,1.7.0 版本开始,提供了功能更完整的本地用户文件,可以完全覆盖本地缓存文件的功能,如果不需要兼容低于 1.7.0 版本,可以不使用本地缓存文件。 本地用户文件 本地用户文件是从 1.7.0 版本开始新增的概念。我们提供了一个用户文件目录给开发者,开发者对这个目录有完全自由的读写权限。通过 wx.env.USER_DATA_PATH 可以获取到这个目录的路径。 示例 // 在本地用户文件目录下创建一个文件 hello.txt,写入内容 "hello, world" const fs = wx.getFileSystemManager() fs.writeFileSync(`${wx.env.USER_DATA_PATH}/hello.txt`, 'hello, world', 'utf8') 读写权限 接口、组件 读 写 代码包文件 有 无 本地临时文件 有 无 本地缓存文件 有 无 本地用户文件 有 有 清理策略 本地临时文件只保证在小程序当前生命周期内,一旦小程序被关闭就可能被清理,即下次冷启动不保证可用。 本地缓存文件和本地用户文件的清理时机跟代码包一样,只有在代码包被清理的时会被清理。
插件功能页 插件功能页从小程序基础库版本 2.1.0 开始支持。 某些接口不能在插件中直接调用(如 wx.login),但插件开发者可以使用插件功能页的方式来实现功能。目前,插件功能页包括: 获取用户信息,包括 openid 和昵称等(相当于 wx.login 和 wx.getUserInfo 的功能),详见用户信息功能页; 支付(相当于 wx.requestPayment),详见支付功能页; 获取收货地址(相当于 wx.chooseAddress),详见收货地址功能页。 要使用插件功能页,需要先激活功能页特性,配置对应的功能页函数,再使用 functional-page-navigator 组件跳转到插件功能页,从而实现对应的功能。详情请参考下文。 插件所有者小程序 开始开发之前,我们需要知道,插件功能页是指 插件所有者小程序 中的一个特殊页面。 插件所有者小程序,指的是与插件 AppID 相同的小程序。例如,“小程序示例”小程序开发了一个“小程序示例插件”,那么无论这个插件被哪个小程序使用,这个插件的 插件所有者小程序 都是“小程序示例”。下文中会继续使用 插件所有者小程序 这个说法。 插件所有者小程序开发方法 通常,在开始使用插件功能页的时候,需要开启两个开发者工具窗口,其中一个打开插件项目,另一个打开插件所有者小程序的小程序项目。例如,一个打开“小程序示例插件”项目,另一个打开“小程序示例”项目。 这两个窗口,前者用于编辑插件,后者用于编辑插件所有者小程序。下文中所有需要编辑插件所有者小程序的内容,都是在后者中进行。 激活功能页特性 要在插件中调用插件功能页,需要先激活插件所有者小程序的功能页特性。具体来说,在插件所有者小程序的 app.json 文件中添加 functionalPages 定义段,并令其值为 true ,例如: 代码示例: { "functionalPages": { "independent": true } } 目前,兼容旧式写法: { "functionalPages": true } 旧式写法将在未来将被移除支持,未来将不能编译上传。 这两种写法的区别在于,新式的写法 “independent”: true 会使得插件功能页的代码独立于其他代码,这意味着插件功能页可以被独立下载、加载,具有更好的性能表现。 但也同时使得插件功能页目录 functional-pages/ (支付功能页会使用其中的文件)不能 require 这个目录以外的文件(反之亦然:这个目录以外的文件也不能调用这个目录内的)。 注意,新增或改变这个字段时,需要这个小程序发布新版本,才能在正式环境中使用插件功能页。 跳转到功能页 功能页不能使用 wx.navigateTo 来进行跳转,而是需要一个名为 functional-page-navigator 的组件。以获取用户信息为例,可以在插件中放置如下的 functional-page-navigator: 代码示例: <functional-page-navigator name="loginAndGetUserInfo" args="" version="develop" bind:success="loginSuccess"> <button>登录到插件</button> </functional-page-navigator> 用户在点击这个 navigator 时,会自动跳转到插件所有者小程序的对应功能页。功能页会提示用户进行登录或其他相应的操作。操作结果会以组件事件的方式返回。 functional-page-navigator 的参数和详细使用方法可以参考组件说明 。 从小程序基础库版本 2.4.0 开始,支持插件所有者小程序跳转到自己的功能页。在基础库版本低于 2.4.0 时,点击跳转到自己的功能页的 functional-page-navigator 将没有任何反应。 真机开发测试的常规步骤 目前,功能页的跳转目前不支持在开发者工具中调试,请在真机上测试。初次进行真机开发测试时,通常步骤如下: 在开发者工具上打开插件所有者小程序项目,并点击“预览”; 用测试用的真机扫一下预览二维码,此时会进入插件所有者小程序,进入后就可以直接退出这个小程序; 在开发者工具上打开插件项目,将插件中 functional-page-navigator 中的 version 属性设置为 develop; 点击预览可以生成插件预览二维码,用测试用的真机扫码即可预览功能页;如果更改了插件代码,重新生成并扫描插件的预览二维码即可; 如果过了一段时间之后,跳转功能页时出现“开发版已过期”这样的提示,从第1步开始重试一次。 注意:functional-page-navigator 的 version=develop 仅用于调试,因此在插件提审前,需要: 确保已发布设置了 “functionalPages”: true 的插件所有者小程序; 确保所有的 functional-page-navigator 组件属性设置为 version=”release” 。 功能页常见问题 FAQ 如何正确编辑插件所有者小程序? 应该在开发者工具的“小程序”类型项目中编辑,而不是在“插件”类型的项目中编辑。比如,“小程序示例插件”的所有者小程序是“小程序示例”,它们的 AppID 都是 wxidxxxxxxxxxxxxxx ,如果是初次开发“小程序示例”小程序,可以在开发者工具中创建一个小程序项目,其 AppID 为 wxidxxxxxxxxxxxxxx ;如果之前开发过“小程序示例”小程序,直接打开之前的小程序项目即可。 点击 functional-page-navigator 之后没有任何反应。 请检查引用插件的小程序和插件本身是不是同一个 AppID ,如果是,跳转到自己的功能页需要基础库 2.4.0 支持,否则使用 functional-page-navigator 不会有任何反应。 点击 functional-page-navigator 之后,展示了一个页面提示“页面不存在”。 这种情况是因为插件所有者小程序没有正确设置 “functionalPages”: true 。如果 functional-page-navigator 的 version=”develop” ,这部手机需要扫码并进入插件所有者小程序一次;如果 version=”release” ,请确保包含 “functionalPages”: true 的插件所有者小程序已被发布。 点击 <functional-page-navigator version=”develop”> 之后,弹窗提示“小程序开发版已过期”。 遇到这种情况,重新扫码并进入插件所有者小程序一次即可。 点击 <functional-page-navigator name=”requestPayment”> 之后,展示了一个页面提示“该功能无法使用”。 在使用插件功能页时,小程序不能是个人小程序,同时,插件也需要额外的步骤申请开通插件支付权限(位于 管理后台 -> 小程序插件 -> 基本设置 -> 支付能力 )。 点击 <functional-page-navigator name=”requestPayment”> 之后,点击页面中的“支付”按钮,立刻退出了支付功能页。 这通常是因为没有找到功能页函数 beforeRequestPayment ,请检查插件所有者小程序的 functional-pages/request-payment.js 文件和其中的 beforeRequestPayment 函数是否存在。 点击 functional-page-navigator 之后,展示了一个仅有返回按钮的页面。 请检查 functional-page-navigator 的 name 属性是否被正确设置。 开发版可以正常跳转,但审核反馈不能跳转。 请发布设置了 “functionalPages”: true 的插件所有者小程序,且所有的 functional-page-navigator 组件属性设置为 version=”release” 。 Bugs & Tips 功能页是插件所有者小程序中的一个特殊页面,开发者不能自定义这个页面的外观。 插件所有者小程序本身也可以引用这个插件,此时,functional-page-navigator 组件的 version 属性将不会生效,而是取决于当前运行的插件所有者小程序的版本。 functional-page-navigator 可以在开发者工具中使用,但功能页的跳转目前不支持在开发者工具中调试,请在真机上测试。 Bug:在微信版本 6.6.7 中,功能页被拉起时会触发 App 的部分生命周期并使得功能页启动时间变得比较长。在后续的微信版本中这一行为会发生变更,使 App 生命周期不再被触发。 用户信息功能页 用户信息功能页用于帮助插件获取用户信息,包括 openid 和昵称等,相当于 wx.login 和 wx.getUserInfo 的功能。 此外,自基础库版本 2.3.1 起,用户在这个功能页中授权之后,插件就可以直接调用 wx.login 和 wx.getUserInfo 。无需再次进入功能页获取用户信息。自基础库版本 2.6.3 起,可以使用 wx.getSetting 来查询用户是否授权过。 调用参数 用户信息功能页使用 functional-page-navigator 进行跳转时,对应的参数 name 应为固定值 loginAndGetUserInfo,其余参数与 wx.getUserInfo 相同,具体来说: args参数说明: 参数名 类型...
插件调用 API 的限制 插件可以调用的 API 与小程序不同,主要有两个区别: 插件的请求域名列表与小程序相互独立; 一些 API 不允许插件调用(这些函数不存在于 wx 对象下)。 有些接口虽然在插件中不能使用,但可以通过插件功能页来达到目的,请参考插件功能页。 目前,允许插件调用的 API 及其对应版本要求如下: 基础 API 最低版本 备注 wx.arrayBufferToBase64 wx.base64ToArrayBuffer 发起请求 API 最低版本 备注 wx.request 1.9.6 上传、下载 API 最低版本 备注 wx.downloadFile 1.9.6 wx.uploadFile 1.9.6 WebSocket API 最低版本 备注 wx.connectSocket 1.9.6 图片 API 最低版本 备注 wx.previewImage 1.9.6 wx.chooseImage 1.9.6 wx.getImageInfo 1.9.6 wx.saveImageToPhotosAlbum 1.9.6 录音 API 最低版本 备注 wx.startRecord 1.9.6 wx.stopRecord 1.9.6 实时音视频 API 最低版本 备注 wx.createLivePlayerContext 1.9.6 wx.createLivePusherContext 1.9.6 录音管理 API 最低版本 备注 wx.getRecorderManager 1.9.94 音频播放控制 API 最低版本 备注 wx.pauseVoice 1.9.6 wx.playVoice 1.9.6 wx.stopVoice 1.9.6 音乐播放控制 API 最低版本 备注 wx.onBackgroundAudioPlay 1.9.6 wx.getBackgroundAudioPlayerState 1.9.6 wx.onBackgroundAudioStop 1.9.6 wx.stopBackgroundAudio 1.9.6 wx.onBackgroundAudioPause 1.9.6 wx.seekBackgroundAudio 1.9.6 wx.playBackgroundAudio 1.9.6 wx.pauseBackgroundAudio 1.9.6 背景音频播放管理 API 最低版本 备注 wx.getBackgroundAudioManager 1.9.6 音频组件控制 API 最低版本 备注 wx.createInnerAudioContext 1.9.6 wx.createAudioContext 1.9.6 视频 API...
组件间关系 定义和使用组件间关系 有时需要实现这样的组件: <custom-ul> <custom-li> item 1 </custom-li> <custom-li> item 2 </custom-li> </custom-ul> 这个例子中, custom-ul 和 custom-li 都是自定义组件,它们有相互间的关系,相互间的通信往往比较复杂。此时在组件定义时加入 relations 定义段,可以解决这样的问题。示例: // path/to/custom-ul.js Component({ relations: { './custom-li': { type: 'child', // 关联的目标节点应为子节点 linked: function(target) { // 每次有custom-li被插入时执行,target是该节点实例对象,触发在该节点attached生命周期之后 }, linkChanged: function(target) { // 每次有custom-li被移动后执行,target是该节点实例对象,触发在该节点moved生命周期之后 }, unlinked: function(target) { // 每次有custom-li被移除时执行,target是该节点实例对象,触发在该节点detached生命周期之后 } } }, methods: { _getAllLi: function(){ // 使用getRelationNodes可以获得nodes数组,包含所有已关联的custom-li,且是有序的 var nodes = this.getRelationNodes('path/to/custom-li') } }, ready: function(){ this._getAllLi() } }) // path/to/custom-li.js Component({ relations: { './custom-ul': { type: 'parent', // 关联的目标节点应为父节点 linked: function(target) { // 每次被插入到custom-ul时执行,target是custom-ul节点实例对象,触发在attached生命周期之后 }, linkChanged: function(target) { // 每次被移动后执行,target是custom-ul节点实例对象,触发在moved生命周期之后 }, unlinked: function(target) { // 每次被移除时执行,target是custom-ul节点实例对象,触发在detached生命周期之后 } } } }) 注意:必须在两个组件定义中都加入relations定义,否则不会生效。 关联一类组件 有时,需要关联的是一类组件,如: <custom-form> <view> input <custom-input></custom-input> </view> <custom-submit> submit </custom-submit> </custom-form> custom-form 组件想要关联 custom-input 和 custom-submit 两个组件。此时,如果这两个组件都有同一个behavior: // path/to/custom-form-controls.js module.exports = Behavior({ // ... }) // path/to/custom-input.js var customFormControls =...