前言

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

version的属性如下：

name的属性如下：

要使用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 为 true 时，返回的数据会包含 encryptedData, iv 等敏感信息。

userInfo 参数说明：

二、相关案例

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 />