【愚公系列】2022年03月 微信小程序-導(dǎo)航(功能頁)

前言

functional-page-navigator 組件：是一個非常強大的組件，用于跳轉(zhuǎn)插件的功能頁，主要的參數(shù)如下：

version的屬性如下：

name的屬性如下：

要使用functional-page-navigator必須先激活相關(guān)地址：https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages.html

一、用戶信息功能頁

用戶信息功能頁用于幫助插件獲取用戶信息，包括 openid 和昵稱等，相當(dāng)于 wx.login 和 wx.getUserInfo 的功能。用戶信息功能頁使用 functional-page-navigator 進行跳轉(zhuǎn)時，對應(yīng)的參數(shù) name 應(yīng)為固定值loginAndGetUserInfo，其余參數(shù)與 wx.getUserInfo 相同，具體來說：

當(dāng) withCredentials 為 true 時，返回的數(shù)據(jù)會包含 encryptedData, iv 等敏感信息。

userInfo 參數(shù)說明：

二、相關(guān)案例

1.制作登錄插件

登錄插件目錄結(jié)構(gòu)

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

小程序

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。