思路： 通過uni-app文檔可知:實現微信登錄，無論是app還是小程序，都需要唯一標識openid，然后通過openid取掉后端的登錄接口，獲取cookie然后做登錄跳轉；

【-【-【必須先調用微信的登錄接口uni.login（） 然后再去調用授權按鈕拿微信個人信息】-】-】
（否則順序錯亂會導致 小概率授權后拿不到頭像和昵稱）

可直接復制以下代碼使用（替換下圖片@/static/iconimg/wxtu.png）：

需要注意91和115行代碼注釋，在那里調后端兩個接口，分別獲取openid和登錄的cookie；

<template><view class="page-login"><view v-if="canIUse||canIGetUserProfile"><view class='content'><image style="width: 140rpx; height: 140rpx;" mode="aspectFit" src="@/static/iconimg/wxtu.png"></image><view class="name">登錄</view><view>申請獲取以下權限</view><text>獲得你的公開信息(昵稱、頭像、地區等)</text></view><view class="login-box"><!--新版登錄方式--><button v-if="canIGetUserProfile" class='login-btn' type='primary' @click="bindGetUserInfo"> 授權登錄 </button><!--舊版登錄方式--><button v-else class='login-btn' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="bindGetUserInfo"> 授權登錄 </button></view></view><view v-else class="text-center">請升級微信版本</view></view> </template> <script> export default {data () {return {canIUse: uni.canIUse('button.open-type.getUserInfo'),canIGetUserProfile: false,//微信登錄新舊版本 true是新}},onLoad () {//必須先調用微信的登錄接口 然后再去調用授權拿微信個人信息（否則順序錯亂會導致 小概率授權后拿不到頭像和昵稱）this.wxLogin()var _this = thisif (uni.getUserProfile) {this.canIGetUserProfile = true}},onShow () {},methods: {//登錄授權bindGetUserInfo (e) {console.log('e', e)var _this = thisif (this.canIGetUserProfile) {//新版登錄方式uni.getUserProfile({desc: '獲取您個人信息用于登錄！',success: (res) => {console.log('用戶信息', res)// 存入個人信息uni.setStorageSync('userInfo_winxin', res.userInfo)_this.updateUserInfo()},fail: (res) => {console.log(res)}})} else {//舊版登錄方式 --自動就拉起授權窗口if (e.detail.userInfo) {//用戶按了允許授權按鈕//console.log('手動');console.log('老版用戶信息', e.detail.userInfo)// 存入個人信息uni.setStorageSync('userInfo_winxin', e.detail.userInfo)_this.updateUserInfo()} else {console.log('用戶拒絕了授權')//用戶按了拒絕按鈕}}},//登錄---目的拿到codewxLogin () {let _this = this// 獲取登錄用戶codeuni.login({provider: 'weixin',success: function (res) {//console.log(res);if (res.code) {//將用戶登錄code傳遞到后臺置換用戶SessionKey、OpenId等信息 可參照此篇文章： https://ask.dcloud.net.cn/article/37452// 1.拿code調后端接口1 也就是getOpenid() 換取到SessionKey、OpenId(這個是唯一且固定不變)// 2.拿openId 調后端自己寫的登錄接口2 獲取到cookie等信息 （這個cookie后期請求放在請求頭上的） 登陸成功進行存儲和跳轉頁面//這是我們的后端接口1--換取到SessionKey、OpenId// let params = { code: res.code}// getOpenid(params, false).then((res) => {// console.log('拿code調后端接口1 換取到SessionKey、OpenId', res)// uni.setStorageSync('session_key', res.data.session_key)// uni.setStorageSync('openid', res.data.openid)// })} else {uni.showToast({ title: '獲取logon_code失敗', duration: 2000 })console.log('獲取logon_code失敗' + res.errMsg)_this.wxLogin()}},fail: (res) => {uni.showToast({ title: '獲取logon_code失敗', duration: 2000 })console.log('獲取logon_code失敗' + res.errMsg)_this.wxLogin()}})},//向后臺更新信息updateUserInfo () {let _this = this//這是我們的后端接口2--登錄接口2 獲取到cookie等信息（這個cookie后期請求放在請求頭上的）// let params = {// openid: uni.getStorageSync('openid'),// nickname: uni.getStorageSync('userInfo_winxin').nickName,// head_image: uni.getStorageSync('userInfo_winxin').avatarUrl,// }// loginByWechat(params).then((res) => {// })//下面的這個cookie鍵值對是暫時寫死的，正常應該接口2返回的let login_cookie_name = 'login_cookie_name'let login_cookie_value = 'login_cookie_value'uni.setStorageSync('login_cookie_name', login_cookie_name)uni.setStorageSync('login_cookie_value', login_cookie_value)// 注意：以上的存儲為了在request請求時候攜帶和判斷用 在退出登錄時候需要清除掉uni.hideLoading()uni.showToast({title: '接口登錄邏輯自寫-登陸成功',duration: 1500,icon: 'success',})// 跳轉到首頁uni.reLaunch({ url: '/pages/index/index' })}} } </script><style lang="less" scoped> .content {text-align: center; } </style>

但是獲取openid的方式不同，目前有兩個方式獲取到。

注意一： 獲取openid

1.通過uni.login（）方法，得到code，拿這個code調用后端寫的接口獲取openid（此方式微信小程序和app都支持，H5不支持）；如何通過code換取 session 和 openid/unionid

2.app還可以通過uni.getUserInfo 直接獲取到openid

注意2： 獲取用戶信息方法有兩種

1.需要注意，uni.getUserInfo是舊方法，它不支持新的版本，在新版本小程序里使用獲取到的是默認信息無效的； 微信小程序端，在用戶未授權過的情況下調用此接口，不會出現授權彈窗，會直接進入 fail 回調。在用戶已授權的情況下調用此接口，可成功獲取用戶信息。

2.推薦使用uni.getUserProfile新的獲取用戶方法；每次請求都會彈出授權窗口，用戶同意后返回 userInfo。

這張圖是微信官方更新日志：

獲取appId和AppSecret：

獲取code方法：

獲取用戶信息的兩個方法

uni-app微信登錄app方法

uni-app微信登錄微信小程序方法；以及登錄后如何通過code換取 session 和 openid/unionid

總結

以上是生活随笔為你收集整理的uni-app微信小程序登录；uni-app微信登录小程序；uni-app微信登录app；的全部內容，希望文章能夠幫你解決所遇到的問題。

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