樣式展示實例:

?

這個原理是: 我們開發的軟件 ,調用微信app彈框,這個框主要是獲取當前微信登錄的用戶的信息( 允許/取消)

• 允許就是允許我們開發的軟件,獲取微信的登錄的用戶信息

  通俗: 獲取微信用戶的信息去登錄

• 不允許

通俗: 不允許獲取微信用戶的信息去登錄

第一步:首先是獲取用戶信息

1.建議使用的技術:wx.getUserProfile(Object object)

wxLogin() {// 第一步是獲取微信用戶的基本信息wx.getUserProfile({// 描述你獲取我手機上的微信app的登錄用戶的作用desc: "用于完善會員資料",//彈出授權框之后,你點擊允許 successsuccess: (res) => {console.log(res);},//彈出授權框之后,你點擊取消 fail// fail: (err) => {// }})}

?注意:會出現報錯情況,或者是點擊無法出現彈框情況,一般是可以檢查自己開發ID,或者是更改小程序開發的版本,版本過高也是無法顯示.

第二步:在授權登錄之后,拿到用戶信息

解決問題, 怎么讓個人中心頁面使用我們登錄頁面的信息

總結: 兩個頁面怎么共享數據

方法一: vuex?

方法二: 存儲到本地(localstorage , sessionstorage)?

兩種方法都可以,根據自己需求進行選用

1.拿到數據之后,我們把用戶信息存到本地:wx.setStorageSync(string key, any data)

2.存到本地之后,接下來就是繼續登錄,拿到微信服務端給的code值

````js wx.login({success:(res)=>{// 得到code的值} })````

3.發異步請求,訪問后臺,請求拿到code值,拿到的值,需要轉化成字符串

wx.login({success: async res => {// console.log(res);// 拿到code訪問后臺接口發請求let data = await api_loginCode({code: res.code});// console.log(data);// 把token存到本地wx.setStorageSync('token', JSON.stringify(data));// 全部做完 跳轉到個人中心wx.reLaunch({url: '/pages/personCenter/personCenter'});}});

4.把請求拿回來的token值存到本地中,然后跳轉到個人中心頁面

// 全部都做完了,跳轉到個人中心wx.switchTab({url: '/pages/personCenter/personCenter'})

5.登錄完整代碼:

methods: {wxLogin() {// 第一步是獲取微信用戶的基本信息wx.getUserProfile({// 描述你獲取我手機上的微信app的登錄用戶的作用desc: '用于完善會員資料',//彈出授權框之后,你點擊允許 successsuccess: res => {// console.log(res);// 把數據存到本地 本地是存的字符串 但是wx.setStorageSync是一個對象wx.setStorageSync('userInfo', JSON.stringify(res.userInfo));// 再次調用微信登錄 需要拿到codewx.login({success: async res => {// console.log(res);// 拿到code訪問后臺接口發請求let data = await api_loginCode({code: res.code});// console.log(data);// 把token存到本地wx.setStorageSync('token', JSON.stringify(data));// 全部做完 跳轉到個人中心wx.reLaunch({url: '/pages/personCenter/personCenter'});}});}});}}

第三步:跳轉到個人中心頁面

1.首先頭部頁面有兩個,一個是未登錄,一個是登錄,需要根據userInfo信息來渲染

<!-- 頭部有兩個 ,一個是登錄轉態的 --><view class="header" v-if="userInfo.nickName"><image class="userImg" :src="userInfo.avatarUrl" mode=""></image><view class='userInfo'><view @click="exit">退出登錄</view></view></view><!-- 未登錄狀態的 --><view class="header" v-else><image class="userImg" src="../../static/images/personal/personal.png" mode=""></image><view class='userInfo'><view @click="tologin">未登錄</view></view></view>

2.跳轉到個人中心組件,相當于發送了異步請求,再定義變量,來接收本地存戶的信息,拿到的值需要轉化成對象形式

async mounted() {let userInfo = wx.getStorageSync('userInfo');// console.log(userInfo);if (userInfo) {// 有值代表登錄 有值在轉化為對象this.userInfo = JSON.parse(userInfo);// 有值 有登錄 在發請求let res = await api_loginToken({token: JSON.parse(wx.getStorageSync('token'))});// console.log(res);this.info = res;} else {// 沒有值代表沒有登錄}},

3.在有值的情況下,要發送請求,是要拿到個人中心,我的資產信息

第四步:退出登錄

1.退出登錄的話,是要清空用戶信息,清空token信息

methods: {// 退出登錄 清空本地存儲 不能清空所有,只需要清空userInfo和tokengoback() {// wx.clearStorageSync();wx.removeStorageSync('userInfo');wx.removeStorageSync('token');wx.reLaunch({url: '/pages/personCenter/personCenter'});},tologin() {wx.navigateTo({url: '/pages/login/login'});}}

畫圖進行理解一下,關于小程序授權登錄步驟:

?

總結

以上是生活随笔為你收集整理的小程序授权登录流程详情步骤的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。