【愚公系列】2022年03月 微信小程序-导航(功能页)

2022-12-01 09:16:45 浏览数 (1)

文章目录

  • 前言
  • 一、用户信息功能页
  • 二、相关案例
    • 1.制作登录插件
    • 2.页面使用

前言

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

代码语言：javascript复制
{
  "publicComponents": {
    "login": "components/login/login"
  },
  "main": "index.js"
}

login.js

代码语言：javascript复制
// 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

代码语言：javascript复制
<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

代码语言：javascript复制
{
  "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 示例",
  "simulatorType": "wechat",
  "simulatorPluginLibVersion": {},
  "condition": {}
}

2.页面使用

app.json

代码语言：javascript复制
{
  "pages": [
    "pages/index/index"
  ],
  "plugins": {
    "myPlugin": {
      "version": "dev",
      "provider": "wx662e7b12440bd25e"
    }
  },
  "sitemapLocation": "sitemap.json",
  "functionalPages": true
}

index.json

代码语言：javascript复制
{
  "usingComponents": {
    "login": "plugin://myPlugin/login"
  }
}

index.html

代码语言：javascript复制
<login />
编程算法 json 访问管理

0 人点赞