uniapp微信小程序--微信登錄 · 雜記

~~~xml <template>  <view class="container" style="position:fixed;left:0;right:0;background: url(../xcximg/img.jpg) no-repeat;background-size: cover;"> <view class="btns"> <button type="default" open-type="getUserInfo" @getuserinfo="getUserInfo" class="wx">微信登錄</button> <view @click="login(1)" class="tels">手機號登錄</view> </view> <view class="tel_cont" v-show="isShowTel"> <view class="mask"></view> <view class="tel"> <view><text class="bold font30 color_black mr20">xxx</text>申請</view> <view class="bold font30 color_black mt30">獲取您的手機號</view> <view class="tel_btns dflex center" style=""> <button type="default" class="wxbtn cancel" @click="cancel()">取消</button> <button type="default" open-type="getPhoneNumber" class="wxbtn sure" @getphonenumber="getPhoneNumber">允許</button> </view> </view> </view> </view> </template> <script> import {checkTelNum} from '../../common/js/common.js' import {mapState,mapMutations} from 'vuex' let url = null; export default { data() { return { tel: '', pwd: '', isShowTel: false, userinfo:[], phone:[], isUser: false } }, onShow() { }, onLoad() { this.openid = ''; this.session_key = ''; url = uni.getStorageSync('currentUrl'); this.getLoginCode() }, methods: { ...mapMutations(['getLogin','getWxLogin']), cancel(){ this.isShowTel = false; uni.removeStorage({ key: 'isUser' }) }, //存儲信息 saveWxdata(){ this.$httpRequest('POST','api接口',{ phone: JSON.stringify(this.phone), userinfo: JSON.stringify(this.userinfo), openid: this.openid, session_key: this.session_key }).then(res=>{ }) }, getPhoneNumber(e){ //console.log('手機號',e) if(!e.detail.encryptedData){ //只授權了用戶信息，沒有授權手機號 uni.removeStorage({ key: 'isUser' }) }else{ //用戶信息、手機號均授權，才授權成功跳轉頁面 let {encryptedData,iv} = e.detail; this.phone.push({ encryptedData: encryptedData, iv: iv }) uni.switchTab({ url: url }) this.saveWxdata(); this.isUser = true; this.getWxLogin(this.isUser) } this.isShowTel = false; }, getUserInfo(){ console.log(1) let _this = this; _this.userinfo = []; _this.phone = []; uni.getUserInfo({ provider: 'weixin', success: function(infoRes) { console.log('信息',infoRes) let {avatarUrl,city,country,gender,language,nickName,province} = infoRes.userInfo; _this.userinfo.push({ avatarUrl: avatarUrl, city: city, country: country, gender: gender, language: language, nickName: nickName, province: province }) console.log(_this.userinfo) uni.getSetting({ success(res) { //授權后直接獲取用戶手機 if(res.authSetting['scope.userInfo']){ _this.isShowTel = true; }else{ //console.log('沒有授權') } } }) }, fail(res) { //console.log(res) uni.showToast({ title: '授權失敗', icon: 'none', duration: 1500 }) } }); }, //獲取openid 和 session_key //appid secret 微信后臺獲取授權類型，此處只需填寫 authorization_code getdata(code){ let url = 'https://api.weixin.qq.com/sns/jscode2session?appid='+'appid'+'&secret='+'secret'+'&js_code='+code+'&grant_type=authorization_code'; uni.request({ method: 'get', url: url, data:'', header: { "Content-Type": "application/x-www-form-urlencoded" }, success:(res) => { //console.log(res) this.openid = res.data.openid; this.session_key = res.data.session_key; }, fail:(err) => { //也可以寫code判斷 console.log(err); }, complete:() => { } }) }, //獲取登錄code getLoginCode(){ let _self = this; uni.login({ provider: 'weixin', success: function(loginRes) { console.log('code',loginRes); _self.getdata(loginRes.code) }, }) }, login(type){ uni.navigateTo({ url: './login' }) } } } </script> <style scoped> .btns{ display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; } .btns view,.btns .wx{ width: 630upx; margin:114upx 60upx 0; border-radius: 44upx; background:#5178C8; text-align: center; line-height: 80upx; color: #fff; font-size: 30upx; } .btns button.wx{ font-size: 34upx; line-height: 100upx; } .btns view.tels{ background: transparent; border: 2upx solid #999; } .tel_cont{width: 100%;} .tel_cont .mask{width: 100%;height: 100%;position: fixed;left: 0;right: 0;top: 0;background: rgba(0,0,0,.5)} .tel{height: 400upx;background:#fff;position: fixed;bottom: 0;left: 0;right: 0;border-radius: 10upx;padding: 30upx 30upx ;} .tel_btns .sure{background: #3BA0FF;margin-left: 30upx;} .wxbtn::after{border: 0;} .tel_btns .cancel{color: #303030;background: #DDDEE0;} .tel_btns .wxbtn{padding: 0 70upx;} .tel_btns{margin-top: 120upx;justify-content: center;} .wxbtn{background: none;color: #fff;font-size: 26upx;font-weight: bold;margin: 0;padding-left: 10upx;} </style> ~~~