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

前言

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

登录到插件

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

小程序

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。