詳解使用uni-app開發(fā)微信小程序之登錄模塊

2020-03-21 15:57:06

字體：大中小

供稿：網(wǎng)友

從微信小程序官方發(fā)布的公告中我們可獲知：小程序體驗版、開發(fā)版調(diào)用 wx.getUserInfo 接口，將無法彈出授權(quán)詢問框，默認(rèn)調(diào)用失敗，需使用 <button open-type="getUserInfo"></button> 引導(dǎo)用戶主動進(jìn)行授權(quán)操作：

1.當(dāng)用戶未授權(quán)過，調(diào)用該接口將直接報錯

2.當(dāng)用戶授權(quán)過，可以使用該接口獲取用戶信息

但在實際開發(fā)中我們可能需要彈出授權(quán)詢問框，因此需要我們自己來寫模擬授權(quán)彈框（主要是對<buttonopen-type="getUserInfo"></button>的包裹+用戶是否是第一次授權(quán)判斷來顯示該頁面），代碼如下：

1.頁面結(jié)構(gòu)

<template>  <view>    <!-- #ifdef MP-WEIXIN -->    <view v-if="isCanUse">      <view>        <view class='header'>          <image src='../../static/img/wx_login.png'></image>        </view>        <view class='content'>          <view>申請獲取以下權(quán)限</view>          <text>獲得你的公開信息(昵稱，頭像、地區(qū)等)</text>        </view>        <button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">          授權(quán)登錄        </button>      </view>    </view>    <!-- #endif -->  </view></template>

這里的isCanUse是用來記錄當(dāng)前用戶是否是第一次授權(quán)使用的，wx_login.png圖在底部下載獲取即可。

2.樣式

<style>  .header {    margin: 90rpx 0 90rpx 50rpx;    border-bottom: 1px solid #ccc;    text-align: center;    width: 650rpx;    height: 300rpx;    line-height: 450rpx;  }  .header image {    width: 200rpx;    height: 200rpx;  }  .content {    margin-left: 50rpx;    margin-bottom: 90rpx;  }  .content text {    display: block;    color: #9d9d9d;    margin-top: 40rpx;  }  .bottom {    border-radius: 80rpx;    margin: 70rpx 50rpx;    font-size: 35rpx;  }</style>

3.腳本部分

<script>  export default {    data() {      return {        SessionKey: '',        OpenId: '',        nickName: null,        avatarUrl: null,        isCanUse: uni.getStorageSync('isCanUse')||true//默認(rèn)為true      };    },    methods: {      //第一授權(quán)獲取用戶信息===》按鈕觸發(fā)      wxGetUserInfo() {        let _this = this;        uni.getUserInfo({          provider: 'weixin',          success: function(infoRes) {            let nickName = infoRes.userInfo.nickName; //昵稱            let avatarUrl = infoRes.userInfo.avatarUrl; //頭像            try {              uni.setStorageSync('isCanUse', false);//記錄是否第一次授權(quán) false:表示不是第一次授權(quán)              _this.updateUserInfo();            } catch (e) {}          },          fail(res) {}        });      },　　　　　　//登錄        login() {        let _this = this;        uni.showLoading({          title: '登錄中...'        });               // 1.wx獲取登錄用戶code        uni.login({          provider: 'weixin',          success: function(loginRes) {            let code = loginRes.code;            if (!_this.isCanUse) {              //非第一次授權(quán)獲取用戶信息              uni.getUserInfo({                provider: 'weixin',                success: function(infoRes) { 　　　　　　　　　　　　　　　　　　　　　　//獲取用戶信息后向調(diào)用信息更新方法                  let nickName = infoRes.userInfo.nickName; //昵稱                  let avatarUrl = infoRes.userInfo.avatarUrl; //頭像                    _this.updateUserInfo();//調(diào)用更新信息方法                }              });            }                  //2.將用戶登錄code傳遞到后臺置換用戶SessionKey、OpenId等信息            uni.request({              url: '服務(wù)器地址',              data: {                code: code,              },              method: 'GET',              header: {                'content-type': 'application/json'              },              success: (res) => {                //openId、或SessionKdy存儲//隱藏loading                uni.hideLoading();              }            });          },        });      },     //向后臺更新信息      updateUserInfo() {        let _this = this;        uni.request({          url:'url' ,//服務(wù)器端地址          data: {            appKey: this.$store.state.appKey,            customerId: _this.customerId,            nickName: _this.nickName,            headUrl: _this.avatarUrl          },          method: 'POST',          header: {            'content-type': 'application/json'          },          success: (res) => {            if (res.data.state == "success") {              uni.reLaunch({//信息更新成功后跳轉(zhuǎn)到小程序首頁                url: '/pages/index/index'              });            }          }                  });      }    },    onLoad() {//默認(rèn)加載      this.login();    }  }</script>

4.最終效果如下：

uni-app,微信小程序,登錄模塊