欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?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)文章

  • 微信小程序?qū)崿F(xiàn)選項卡的簡單實例

    微信小程序?qū)崿F(xiàn)選項卡的簡單實例

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)選項卡的簡單實例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • JS ES6異步解決方案

    JS ES6異步解決方案

    這篇文章主要介紹了JS ES6異步解決方案,對異步感興趣的同學(xué),可以參考下
    2021-04-04
  • TS報錯:Parameter?'xxx'?implicitly?has?an?'any'?type的解決方式

    TS報錯:Parameter?'xxx'?implicitly?has?an?'

    這篇文章主要給大家介紹了關(guān)于TS報錯:Parameter?'xxx'?implicitly?has?an?'any'?type的解決方式,文中將產(chǎn)生錯誤的原因及解決方法都介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • 一個JS翻頁效果

    一個JS翻頁效果

    一個JS翻頁效果...
    2007-07-07
  • 最新評論