#yyds干货盘点#愚公系列2022年11月 微信小程序-导航(功能页)

Posted 2022-11-09

前言

functional-page-navigator 组件：是一个非常强大的组件，用于跳转插件的功能页，主要的参数如下：

属性	类型	默认值	必填	说明	最低版本
version	string	release	否	跳转到的小程序版本，线上版本必须设置为 release	2.1.0
name	string		否	要跳转到的功能页	2.1.0
args	object		否	功能页参数，参数格式与具体功能页相关	2.1.0
bindsuccess	eventhandler		否	功能页返回，且操作成功时触发， detail 格式与具体功能页相关	2.1.0
bindfail	eventhandler		否	功能页返回，且操作失败时触发， detail 格式与具体功能页相关	2.1.0
bindcancel	eventhandler		否	因用户操作从功能页返回时触发	2.4.1

version的属性如下：

合法值	说明
develop	开发版
trial	体验版
release	正式版

name的属性如下：

合法值	说明	最低版本
loginAndGetUserInfo	用户信息功能页	2.1.0
requestPayment	支付功能页	2.1.0
chooseAddress	收货地址功能页	2.4.0
chooseInvoice	获取发票功能页	2.14.1
chooseInvoiceTitle	获取发票抬头功能页	2.14.1

要使用functional-page-navigator必须先激活相关地址：https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages.html

一、用户信息功能页

用户信息功能页用于帮助插件获取用户信息，包括 openid 和昵称等，相当于 wx.login 和 wx.getUserInfo 的功能。用户信息功能页使用 functional-page-navigator 进行跳转时，对应的参数 name 应为固定值loginAndGetUserInfo，其余参数与 wx.getUserInfo 相同，具体来说：

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

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

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

userInfo 参数说明：

参数	类型	说明
nickName	String	用户昵称
avatarUrl	String	用户头像，最后一个数值代表正方形头像大小（有 0、46、64、96、132 数值可选，0 代表 132*132 正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像 URL 将失效。
gender	String	用户的性别，值为 1 时是男性，值为 2 时是女性，值为 0 时是未知
city	String	用户所在城市
province	String	用户所在省份
country	String	用户所在国家
language	String	用户的语言，简体中文为 zh_CN

二、相关案例

1.制作登录插件

登录插件目录结构 plugin.json

  "publicComponents": 
    "login": "components/login/login"
  ,
  "main": "index.js"

login.js

// plugin/components/hello-component.js
Component(
  properties: ,
  data: 
    args: 
      withCredentials: true,
      lang: zh_CN
    
  ,
  methods: 
    loginSuccess: function (res) 
      console.log(res.detail);
    ,
    loginFail: function (res) 
      console.log(res);
    
  
);

login.wxml

<functional-page-navigator
  name="loginAndGetUserInfo"
  args=" args "
  version="develop"
  bind:success="loginSuccess"
  bind:fail="loginFail"
>
  <button class="login">登录到插件</button>
</functional-page-navigator>

project.config.json

  "miniprogramRoot": "miniprogram/",
  "pluginRoot": "plugin/",
  "compileType": "plugin",
  "setting": 
    "urlCheck": true,
    "es6": true,
    "enhance": true,
    "postcss": true,
    "preloadBackgroundData": false,
    "minified": true,
    "newFeature": true,
    "coverView": true,
    "nodeModules": false,
    "autoAudits": false,
    "showShadowRootInWxmlPanel": true,
    "scopeDataCheck": false,
    "uglifyFileName": false,
    "checkInvalidKey": true,
    "checkSiteMap": true,
    "uploadWithSourceMap": true,
    "compileHotReLoad": false,
    "lazyloadPlaceholderEnable": false,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "babelSetting": 
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    ,
    "useIsolateContext": false,
    "userConfirmedBundleSwitch": false,
    "packNpmManually": false,
    "packNpmRelationList": [],
    "minifyWXSS": true,
    "disableUseStrict": false,
    "minifyWXML": true,
    "showES6CompileOption": false,
    "useCompilerPlugins": false,
    "ignoreUploadUnusedFiles": true
  ,
  "appid": "wx662e7b12440bd25e",
  "projectname": "loginAndGetUserInfo%20%E7%A4%BA%E4%BE%8B",
  "simulatorType": "wechat",
  "simulatorPluginLibVersion": ,
  "condition": 

2.页面使用

app.json

  "pages": [
    "pages/index/index"
  ],
  "plugins": 
    "myPlugin": 
      "version": "dev",
      "provider": "wx662e7b12440bd25e"
    
  ,
  "sitemapLocation": "sitemap.json",
  "functionalPages": true

index.json

  "usingComponents": 
    "login": "plugin://myPlugin/login"
  

index.html

<login />