微信小程序?qū)崿F(xiàn)一鍵登錄
更新時間：2022年07月01日 14:36:00 作者：是拾玖不是十九
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)一鍵登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)手機(jī)號登錄的具體代碼，供大家參考，具體內(nèi)容如下
項目需求
點擊按鈕獲取用戶電話號碼綁定到后臺，登錄。
實現(xiàn)思路
1、使用微信開放功能為獲取用戶手機(jī)號的button按鈕綁定點擊事件為獲取用戶授權(quán)。
2、如果獲取用戶手機(jī)號授權(quán)成功調(diào)用微信登錄接口獲取code。
3、用獲取到的code去調(diào)用后臺接口獲取到用戶的openid。
4、code+openid去調(diào)用后臺寫的小程序自動登錄接口獲取到access_token，至此登錄功能完成。
5、查詢用戶是否綁定過手機(jī)號，未綁定就去調(diào)用綁定手機(jī)號的接口。綁定過就直接提示登錄成功，根據(jù)自己項目需求跳轉(zhuǎn)頁面，我是直接返回到上一頁。
關(guān)鍵代碼
<!-- wxml --> <button open-type="getPhoneNumber" class="button" bindgetphonenumber="author"> ? <image class="button-img" src="../../assets/images/wx_icon@2x.png"></image> ? <text>微信一鍵授權(quán)登錄</text> </button>
// wxss
@import '../../common.less';
.button {
? width: 80%;
? height: 88rpx;
? display: flex;
? background: @baseColor1;
? color: #fff;
? font-size: 30rpx;
? border: none;
? border-radius: 44rpx;
? justify-content: center;
? align-items: center;
? font-weight: 400;
? margin: 254rpx auto 74rpx;
? .button-img {
? ? width: 56rpx;
? ? height: 40rpx;
? ? margin-right: 6rpx;
? }
}// login.js
/**
?* 用戶點擊一鍵授權(quán)登錄按鈕
?*/
author(e) {
? if (e.detail.errMsg === 'getPhoneNumber:ok') {
? ? this.login(e);
? }
},
/**
?* 用戶登錄
?*/
login(e) {
? let that = this;
? // 微信獲取登錄code
? wx.login({
? ? success(res1) {
? ? ? if (res1.code) {
? ? ? ? wx.setStorageSync('code', res1.code);
? ? ? ? // 后臺獲取用戶openid
? ? ? ? app.api.user.getOpenID({
? ? ? ? ? code: res1.code
? ? ? ? }).then(res2 => {
? ? ? ? ? if (res2.code === 2000) {
? ? ? ? ? ? wx.setStorageSync('openid', res2.data.openid);
? ? ? ? ? ? wx.setStorageSync('session_key', res2.data.session_key);
? ? ? ? ? ? // 后臺小程序自動登錄
? ? ? ? ? ? app.api.user.autologin({
? ? ? ? ? ? ? openid: res2.data.openid,
? ? ? ? ? ? ? code: res1.code
? ? ? ? ? ? }).then(res3 => {
? ? ? ? ? ? ? if (res3.code === 2000) {
? ? ? ? ? ? ? ? // 至此登錄完成
? ? ? ? ? ? ? ? wx.setStorageSync('access_token', res3.data.access_token)
? ? ? ? ? ? ? ? // 查詢用戶是否綁定過手機(jī)號
? ? ? ? ? ? ? ? app.api.user.info().then(res4 => {
? ? ? ? ? ? ? ? ? if (res4.code === 2000) {
? ? ? ? ? ? ? ? ? ? if (res4.data.bind === 2) {
? ? ? ? ? ? ? ? ? ? ? app.toast('登錄成功', 'none');
? ? ? ? ? ? ? ? ? ? ? that.goBack();
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? // 未綁定手機(jī)號，去綁定
? ? ? ? ? ? ? ? ? ? ? that.getPhoneNumber(e);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? app.toast(res4.msg, 'none');
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? app.toast(res3.msg, 'none');
? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? } else {
? ? ? ? ? ? app.toast(res2.msg, 'none');
? ? ? ? ? }
? ? ? ? })
? ? ? } else {
? ? ? ? app.toast('登錄失敗！' + res1.errMsg);
? ? ? }
? ? }
? })
},
/**
?* 綁定用戶手機(jī)號
?*/
getPhoneNumber(e) {
? // 判斷session是否失效
? app.check.session((res) => {
? ? let token = wx.getStorageSync('access_token');
? ? let session_key = wx.getStorageSync('session_key');
? ? app.api.user.bindphone({
? ? ? token,
? ? ? session_key,
? ? ? encryptedData: e.detail.encryptedData,
? ? ? iv: e.detail.iv
? ? }).then(res => {
? ? ? if (res.code === 2000) {
? ? ? ? app.toast('綁定成功', 'none');
? ? ? ? this.goBack();
? ? ? } else {
? ? ? ? app.toast(res.msg, 'none');
? ? ? }
? ? }).catch(err => {
? ? ? app.toast('綁定手機(jī)號失敗', 'none');
? ? })
? }, this.getPhoneNumber, e)
}
// utils/check.js
let api = require('../api/index');
let toast = require('./toast');
let check = {};
/**
?* session是否過期
?* @param {function} success seesion_key未過期時調(diào)用的方法
?* @param {function} error seesion_key過期時調(diào)用的方法
?* @param {eventhandle} e getPhoneNumber傳參
?*/
check.session = (success, error, e) => {
? wx.checkSession({
? ? //session_key 未過期，并且在本生命周期一直有效
? ? success,
? ? fail() {
? ? ? // session_key 已經(jīng)失效，需要重新執(zhí)行登錄流程
? ? ? wx.login({
? ? ? ? success(res1) {
? ? ? ? ? if (res1.code) {
? ? ? ? ? ? wx.setStorageSync('code', res1.code);
? ? ? ? ? ? // 后臺獲取用戶openid
? ? ? ? ? ? api.user.getOpenID({
? ? ? ? ? ? ? code: res1.code
? ? ? ? ? ? }).then(res2 => {
? ? ? ? ? ? ? if (res2.code === 2000) {
? ? ? ? ? ? ? ? wx.setStorageSync('openid', res2.data.openid);
? ? ? ? ? ? ? ? wx.setStorageSync('session_key', res2.data.session_key)
? ? ? ? ? ? ? ? // 后臺小程序自動登錄
? ? ? ? ? ? ? ? api.user.autologin({
? ? ? ? ? ? ? ? ? openid: res2.data.openid,
? ? ? ? ? ? ? ? ? code: res1.code
? ? ? ? ? ? ? ? }).then(res3 => {
? ? ? ? ? ? ? ? ? if (res3.code === 2000) {
? ? ? ? ? ? ? ? ? ? wx.setStorageSync('access_token', res3.data.access_token)
? ? ? ? ? ? ? ? ? ? error(e);
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? } else {
? ? ? ? ? ? toast('登錄失敗！' + res.errMsg);
? ? ? ? ? }
? ? ? ? }
? ? ? })
? ? }
? })
}
module.exports = check;參考文檔
1. 小程序登錄 | 微信開放文檔
2. wx.login(Object object) | 微信開放文檔
3. button | 微信開放文檔
4. 獲取手機(jī)號 | 微信開放文檔
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript中可以通過四個屬性獲得元素的偏移量，offsetHeight、offsetWidth、offsetLeft、offsetTop，下面為大家解釋下各屬性的含義2014-06-06
本文主要介紹了HBuilderX開發(fā)小程序的一些問題，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
原生JS實現(xiàn)動態(tài)添加新元素、刪除元素方法
這篇文章主要介紹了原生js實現(xiàn)動態(tài)添加新元素、刪除元素方法 ,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
xmlplus組件設(shè)計系列之分隔框（DividedBox)（8）
xmlplus 是一個JavaScript框架，用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus布局類組件之分隔框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
比較簡單的一個符合web標(biāo)準(zhǔn)的JS調(diào)用flash方法
比較簡單的一個符合web標(biāo)準(zhǔn)的JS調(diào)用flash方法...2007-11-11
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)選項卡的簡單實例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07 
這篇文章主要介紹了JS ES6異步解決方案，對異步感興趣的同學(xué)，可以參考下
2021-04-04 
TS報錯:Parameter?'xxx'?implicitly?has?an?'
這篇文章主要給大家介紹了關(guān)于TS報錯:Parameter?'xxx'?implicitly?has?an?'any'?type的解決方式,文中將產(chǎn)生錯誤的原因及解決方法都介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10 
一個JS翻頁效果...
2007-07-07