• 您的电话 *

  • 您的需求

  • 发送

颠覆视觉创新  塑造优-秀品牌

展示企业形象  宣传产品服务

当前位置:

搜索

微信小程序 插件功能页

作者:华夏支点网络 浏览: 发表时间:2020-11-08 09:11:56

插件功能页

插件功能页从小程序基础库版本 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 将没有任何反应。

    真机开发测试的常规步骤

    目前,功能页的跳转目前不支持在开发者工具中调试,请在真机上测试。初次进行真机开发测试时,通常步骤如下:

    1. 在开发者工具上打开插件所有者小程序项目,并点击“预览”;
    2. 用测试用的真机扫一下预览二维码,此时会进入插件所有者小程序,进入后就可以直接退出这个小程序;
    3. 在开发者工具上打开插件项目,将插件中 functional-page-navigator 中的 version 属性设置为 develop;
    4. 点击预览可以生成插件预览二维码,用测试用的真机扫码即可预览功能页;如果更改了插件代码,重新生成并扫描插件的预览二维码即可;
    5. 如果过了一段时间之后,跳转功能页时出现“开发版已过期”这样的提示,从第1步开始重试一次。

    注意:functional-page-navigator 的 version=develop 仅用于调试,因此在插件提审前,需要:

    1. 确保已发布设置了 "functionalPages": true 的插件所有者小程序;
    2. 确保所有的 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 的插件所有者小程序已被发布。

    点击  之后,弹窗提示“小程序开发版已过期”。

    • 遇到这种情况,重新扫码并进入插件所有者小程序一次即可。

    点击  之后,展示了一个页面提示“该功能无法使用”。

    • 在使用插件功能页时,小程序不能是个人小程序,同时,插件也需要额外的步骤申请开通插件支付权限(位于 管理后台 -> 小程序插件 -> 基本设置 -> 支付能力 )。

    点击  之后,点击页面中的“支付”按钮,立刻退出了支付功能页。

    • 这通常是因为没有找到功能页函数 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参数说明:

    参数名类型必填说明
    withCredentialsBoolean是否带上登录态信息
    langString指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。默认为en。
    timeoutNumber超时时间,单位 ms

    注:当 withCredentials 为 true 时,返回的数据会包含 encryptedData, iv 等敏感信息。

    bindsuccess返回参数说明:

    参数类型说明
    codeString同 wx.login 获得的用户登录凭证(有效期五分钟)。开发者需要在开发者服务器后台调用 api,使用 code 换取 openid 和 session_key 等信息
    errMsgString调用结果
    userInfoOBJECT用户信息对象,不包含 openid 等敏感信息
    rawDataString不包括敏感信息的原始数据字符串,用于计算签名。
    signatureString使用 sha1( rawData + sessionkey ) 得到字符串,用于校验用户信息,参考文档 signature。
    encryptedDataString包括敏感数据在内的完整用户信息的加密数据,详细见加密数据解密算法
    ivString加密算法的初始向量,详细见加密数据解密算法

    userInfo参数说明:

    参数类型说明
    nickNameString用户昵称
    avatarUrlString用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表132*132正方形头像),用户没有头像时该项为空。若用户更换头像,原有头像URL将失效。
    genderString用户的性别,值为1时是男性,值为2时是女性,值为0时是未知
    cityString用户所在城市
    provinceString用户所在省份
    countryString用户所在国家
    languageString用户的语言,简体中文为zh_CN

    代码示例:

      <functional-page-navigatorname="loginAndGetUserInfo"args="{{ args }}"version="develop"bind:success="loginSuccess"bind:fail="loginFail"><button class="login">登录到插件button>functional-page-navigator>// plugin/components/hello-component.jsComponent({properties: {},data: {args: {withCredentials: true,lang: 'zh_CN'}},methods: {loginSuccess: function (res) {console.log(res.detail);},loginFail: function (res) {console.log(res);}}});

      用户点击该 navigator 后,将跳转到如下的用户信息功能页:

      在微信开发者工具中查看示例:

      1. 由于插件需要 appid 才能工作,请填入一个 appid;
      2. 由于当前代码片段的限制,打开该示例后请 手动将 appid 填写到 miniprogram/app.json 中(如下图)使示例正常运行。


      支付功能页

      支付功能页用于帮助插件完成支付,相当于 wx.requestPayment 的功能。

      需要注意的是:插件使用支付功能,需要进行额外的权限申请,申请位置位于管理后台的“小程序插件 -> 基本设置 -> 支付能力”设置项中。另外,无论是否通过申请,主体为个人小程序在使用插件时,都无法正常使用插件里的支付功能。

      调用参数

      支付功能页使用 functional-page-navigator 进行跳转时,对应的参数 name 应为固定值 requestPayment,其他参数如下:

      args参数说明:

      参数名类型必填说明
      feeNumber需要显示在页面中的金额,单位为分
      paymentArgsObject任意数据,传递给功能页中的响应函数
      currencyTypeString需要显示在页面中的货币符号的代码,默认为 CNY

      currencyType 的合法值:

      值说明最低版本CNY货币符号 ¥





      微信小程序 插件功能页
      插件功能页从小程序基础库版本 2.1.0 开始支持。 某些接口不能在插件中直接调用(如 wx.login),但插件开发者可以使用插件功能页的方式来实现功能。目前,插件功能页包括:
      长按图片保存/分享
      0
      你的喜欢,就是我坚持写下去的能量器
      好文推荐
      已有0人推荐

      微信小程序 插件功能页

      2020-11-08 09:11:56

      浏览:

      插件功能页从小程序基础库版本 2.1.0 开始支持。 某些接口不能在插件中直接调用(如 wx.login),但插件开发者可以使用插件功能页的方式来实现功能。目前,插件功能页包括:

      插件功能页

      插件功能页从小程序基础库版本 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 将没有任何反应。

        真机开发测试的常规步骤

        目前,功能页的跳转目前不支持在开发者工具中调试,请在真机上测试。初次进行真机开发测试时,通常步骤如下:

        1. 在开发者工具上打开插件所有者小程序项目,并点击“预览”;
        2. 用测试用的真机扫一下预览二维码,此时会进入插件所有者小程序,进入后就可以直接退出这个小程序;
        3. 在开发者工具上打开插件项目,将插件中 functional-page-navigator 中的 version 属性设置为 develop;
        4. 点击预览可以生成插件预览二维码,用测试用的真机扫码即可预览功能页;如果更改了插件代码,重新生成并扫描插件的预览二维码即可;
        5. 如果过了一段时间之后,跳转功能页时出现“开发版已过期”这样的提示,从第1步开始重试一次。

        注意:functional-page-navigator 的 version=develop 仅用于调试,因此在插件提审前,需要:

        1. 确保已发布设置了 "functionalPages": true 的插件所有者小程序;
        2. 确保所有的 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 的插件所有者小程序已被发布。

        点击  之后,弹窗提示“小程序开发版已过期”。

        • 遇到这种情况,重新扫码并进入插件所有者小程序一次即可。

        点击  之后,展示了一个页面提示“该功能无法使用”。

        • 在使用插件功能页时,小程序不能是个人小程序,同时,插件也需要额外的步骤申请开通插件支付权限(位于 管理后台 -> 小程序插件 -> 基本设置 -> 支付能力 )。

        点击  之后,点击页面中的“支付”按钮,立刻退出了支付功能页。

        • 这通常是因为没有找到功能页函数 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参数说明:

        参数名类型必填说明
        withCredentialsBoolean是否带上登录态信息
        langString指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。默认为en。
        timeoutNumber超时时间,单位 ms

        注:当 withCredentials 为 true 时,返回的数据会包含 encryptedData, iv 等敏感信息。

        bindsuccess返回参数说明:

        参数类型说明
        codeString同 wx.login 获得的用户登录凭证(有效期五分钟)。开发者需要在开发者服务器后台调用 api,使用 code 换取 openid 和 session_key 等信息
        errMsgString调用结果
        userInfoOBJECT用户信息对象,不包含 openid 等敏感信息
        rawDataString不包括敏感信息的原始数据字符串,用于计算签名。
        signatureString使用 sha1( rawData + sessionkey ) 得到字符串,用于校验用户信息,参考文档 signature。
        encryptedDataString包括敏感数据在内的完整用户信息的加密数据,详细见加密数据解密算法
        ivString加密算法的初始向量,详细见加密数据解密算法

        userInfo参数说明:

        参数类型说明
        nickNameString用户昵称
        avatarUrlString用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表132*132正方形头像),用户没有头像时该项为空。若用户更换头像,原有头像URL将失效。
        genderString用户的性别,值为1时是男性,值为2时是女性,值为0时是未知
        cityString用户所在城市
        provinceString用户所在省份
        countryString用户所在国家
        languageString用户的语言,简体中文为zh_CN

        代码示例:

          <functional-page-navigatorname="loginAndGetUserInfo"args="{{ args }}"version="develop"bind:success="loginSuccess"bind:fail="loginFail"><button class="login">登录到插件button>functional-page-navigator>// plugin/components/hello-component.jsComponent({properties: {},data: {args: {withCredentials: true,lang: 'zh_CN'}},methods: {loginSuccess: function (res) {console.log(res.detail);},loginFail: function (res) {console.log(res);}}});

          用户点击该 navigator 后,将跳转到如下的用户信息功能页:

          在微信开发者工具中查看示例:

          1. 由于插件需要 appid 才能工作,请填入一个 appid;
          2. 由于当前代码片段的限制,打开该示例后请 手动将 appid 填写到 miniprogram/app.json 中(如下图)使示例正常运行。


          支付功能页

          支付功能页用于帮助插件完成支付,相当于 wx.requestPayment 的功能。

          需要注意的是:插件使用支付功能,需要进行额外的权限申请,申请位置位于管理后台的“小程序插件 -> 基本设置 -> 支付能力”设置项中。另外,无论是否通过申请,主体为个人小程序在使用插件时,都无法正常使用插件里的支付功能。

          调用参数

          支付功能页使用 functional-page-navigator 进行跳转时,对应的参数 name 应为固定值 requestPayment,其他参数如下:

          args参数说明:

          参数名类型必填说明
          feeNumber需要显示在页面中的金额,单位为分
          paymentArgsObject任意数据,传递给功能页中的响应函数
          currencyTypeString需要显示在页面中的货币符号的代码,默认为 CNY

          currencyType 的合法值:

          值说明最低版本CNY货币符号 ¥





          作者: 华夏支点网络
          0
          微信小程序 插件功能页
          插件功能页从小程序基础库版本 2.1.0 开始支持。 某些接口不能在插件中直接调用(如 wx.login),但插件开发者可以使用插件功能页的方式来实现功能。目前,插件功能页包括:
          长按图片保存/分享
          你的喜欢,就是我坚持写下去的能量器
          好文推荐
          已有0人推荐

          相关设计案例

          相关网站设计案例

          建站资讯

          .

          Are you interested in ?

          咨询

          18685842288


            微信客服


          填写网站制作,seo优化需求  * 请认真填写需求信息,24小时内与您联系。

          • 您的电话 *

          • 您的需求

          提交咨询

          © 2012-2023 贵州华夏支点网络科技有限公司 版权所有 黔ICP备2020008579号    贵公网安备 52020102520282号    SITEMAP     违法和不良信息举报中心

          专业的网站建设/推广、微信小程序开发、软件开发公司

          服务热线:18685842288

          建站邮箱:449180048@qq.com

          © 2010-2023  华夏支点网络  版权所有  SITEMAP

          在线咨询
          TOP
          在线咨询
          在线咨询 联系方式 二维码
          热线电话
          18685842288
          E-mail地址
          449180048@qq.com
          二维码
          TOP
          添加微信好友,详细了解产品
          使用企业微信
          “扫一扫”加入群聊
          复制成功
          添加微信好友,详细了解产品
          我知道了