您好,登錄后才能下訂單哦!
微信小程序注冊(cè)登錄思路
(這是根據(jù)自身的項(xiàng)目的思路,不一定每個(gè)項(xiàng)目都適用)
1.制作授權(quán)登錄框,引導(dǎo)用戶(hù)點(diǎn)擊按鈕
2.uni.login獲取code
3.把code傳給后端接口,后端返回如下數(shù)據(jù)
openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 狀態(tài)碼:status==0(該用戶(hù)未注冊(cè),需調(diào)用注冊(cè)接口) status==1(該用戶(hù)已注冊(cè))
4.判斷用戶(hù)是否注冊(cè),并調(diào)用用戶(hù)信息接口
(1)若已注冊(cè)則提示登錄成功,并調(diào)用后臺(tái)給的獲取用戶(hù)信息的接口,并把數(shù)據(jù)保存到vuex
(2)若未注冊(cè)則調(diào)用注冊(cè)接口,注冊(cè)成功之后調(diào)獲取用戶(hù)信息接口,并把數(shù)據(jù)保存到vuex
制作授權(quán)登錄框
我把它寫(xiě)到一個(gè)組件里,在需要調(diào)用的頁(yè)面注冊(cè)該組件
authorization.vue組件
<template> <view class="pop"> <view class="pop-main"> <i class="iconfont cancel" @click="cancel"></i> <view class="pop-title">需要您的授權(quán)</view> <view class="pop-text"> <view>為了提供更好的服務(wù)</view> <view>請(qǐng)?jiān)谏院蟮奶崾究蛑悬c(diǎn)擊允許</view> </view> <image class="pop-imgsize" src="../static/images/aut.png" mode=""></image> <!-- 微信小程序的引導(dǎo)按鈕,可以獲取到用戶(hù)信息 getuserinfo函數(shù)調(diào)用請(qǐng)求下面會(huì)講到--> <button type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">我知道了</button> </view> </view> </template> <script> import app from '../common/config.js' export default { data() { return { }; }, methods: { getuserinfo(res) { // 調(diào)用封裝在app的_getuserinfo函數(shù),_getuserinfo函數(shù)執(zhí)行用戶(hù)獲取code,傳code給后臺(tái),調(diào)用注冊(cè)接口 app._getuserinfo(res) }, cancel() { this.$emit('cancelChild',false) } } } </script> <style scoped> .pop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.3); z-index: 9999; display: flex; justify-content: center; align-items: center; } .pop-main { width: 690upx; height: 800upx; box-sizing: border-box; background-color: #FFFFFF; border-radius: 20upx; position: relative; display: flex; flex-direction: column; align-items: center; font-size: 14px; padding: 64upx 0upx 40upx 0upx; } /* 刪除按鈕 */ .cancel { position: absolute; top: 20upx; right: 20upx; font-size: 20px; } .pop-title { padding-bottom: 40upx; width: 100%; border-bottom: 1px solid #BFBFBF; font-size: 16px; letter-spacing: 2px; text-align: center; } .pop-imgsize { width: 484upx; height: 406upx; } .pop-text { width: 75%; text-align: center; font-size: 15px; margin: 30upx 0upx; letter-spacing: 1px; } button { background-color: #08BF00; color: #FFFFFF; text-align: center; height: 88upx; line-height: 88upx; font-size: 14px; border-radius: 50upx; width: 78%; } </style>
在個(gè)人中心頁(yè)注冊(cè)該組件
<template> <view> <view class="info" > <image @click="toSettings" class="headimg" :src="userinfo.headimgurl || defaultHeadimg" > </image> <text v-if="!hasLogin" class="goLogin" @click="gologin">登錄</text> <text v-if="hasLogin">{{userinfo.nickname}}</text> <text v-if="hasLogin && userinfo.mobile" class="phone">{{userinfo.mobile}}</text> </view> <authorization v-if="tologin && !hasLogin" @cancelChild="getChild"></authorization> </view> </template>
點(diǎn)擊"我知道了"按鈕,調(diào)用封裝_getuserinfo的請(qǐng)求
新建config.js,在config封裝請(qǐng)求
import store from '@/store' const app = { apiUrl: 'https://aaa.bbbbb.com/', //請(qǐng)求的地址 openidRequest(obj) { try { const openid = uni.getStorageSync('openid'); if (openid) { if(obj.data) { obj.data["openid"] = openid; } else { obj.data = {"openid": openid}; } obj.url = this.apiUrl + obj.url; uni.request(obj) } else { console.log("獲取不到openid") } } catch (e) { console.log(e) console.log("獲取不到openid") } }, _getuserinfo(res) { var that = this var userinfoDetails = {} // 注冊(cè)時(shí),需要把用戶(hù)信息傳給后臺(tái),所以定義一個(gè)對(duì)象存儲(chǔ)獲取到的用戶(hù)信息 userinfoDetails = res.detail.userInfo uni.getUserInfo({ provider: 'weixin', success: function () { uni.login({ success:function(res){ uni.showLoading({ title: '登陸中...', mask: false }); uni.request({ url: that.apiUrl + 'sdafl/ddfax/dfadf?code=' + res.code, //把code傳給后臺(tái),后臺(tái)返回openid和status success: (res) => { console.log(res) if (res.data.openid) { uni.setStorageSync('openid', res.data.openid) userinfoDetails.openid = res.data.openid //處理一下屬性名傳遞給后臺(tái) userinfoDetails = JSON.parse(JSON.stringify(userinfoDetails).replace(/avatarUrl/g, "headimgurl")); userinfoDetails = JSON.parse(JSON.stringify(userinfoDetails).replace(/gender/g, "sex")); userinfoDetails = JSON.parse(JSON.stringify(userinfoDetails).replace(/nickName/g, "nickname")); delete userinfoDetails.language; userinfoDetails.ppid = store.state.ppid || '' console.log(userinfoDetails) } // 當(dāng)status==0時(shí)說(shuō)明用戶(hù)還沒(méi)有注冊(cè)需要注冊(cè) if(res.data.status == 0) { that.sendInfo(userinfoDetails) // 調(diào)用注冊(cè)接口,并把用戶(hù)信息userinfoDetails傳給后臺(tái) console.log('我還沒(méi)有注冊(cè)') } else if (res.data.status == 1) { uni.showToast({ title: '登錄成功', icon: 'success', duration: 2000 }) that.getUserData() // 調(diào)用獲取用戶(hù)信息的接口 } else { uni.hideLoading() uni.showToast({ title: '登錄失敗', duration: 2000, icon:'none' }) } } }) } }) } }); }, // 注冊(cè)接口 sendInfo(userinfoDetails) { var that = this uni.request({ url: this.apiUrl + 'fdafd/ifdaffdex/fdaff', data: userinfoDetails, method: 'POST', success: (res) => { if(res.data.userinfo == 1) { uni.hideLoading() uni.showToast({ title: '注冊(cè)成功', icon: 'success', duration: 2000 }) that.getUserData() // 調(diào)用獲取用戶(hù)信息的接口 } else { uni.hideLoading() uni.showToast({ title: res.data.msg, duration: 2000 }) } } }) }, // 獲取用戶(hù)信息 getUserData() { uni.request({ url: this.apiUrl + 'sfad/dfadfad/idfadffde', data: { openid: uni.getStorageSync('openid') }, method: 'POST', success: (res) => { if(res.data.status == 1) { console.log(res.data) store.commit('login', res.data.user) // vuex的方法 } else { uni.showToast({ title: res.data.msg, duration: 2000 }) } } }) } } export default app;
vuex存儲(chǔ)登錄態(tài)的方法
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { hasLogin: false, userinfo: {}, ppid: '', }, mutations: { // 登錄 login(state,res) { state.hasLogin = true state.userinfo = res uni.setStorage({ key: 'userinfo', data: res }) // console.log(state.userinfo) // console.log(state.hasLogin) }, // 二維碼ppid saveppid(state,ppid) { state.ppid = ppid uni.setStorage({ key: 'ppid', data: ppid }) // console.log(state.ppid) }, }, }) export default store
總結(jié)
以上所述是小編給大家介紹的uni-app微信小程序登錄并使用vuex存儲(chǔ)登錄狀態(tài)的思路詳解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。