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

更新時間：2019年05月09日 11:50:38 作者：WFaceBoss

這篇文章主要介紹了詳解使用uni-app開發(fā)微信小程序之登錄模塊，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

從微信小程序官方發(fā)布的公告中我們可獲知：小程序體驗(yàn)版、開發(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)過，可以使用該接口獲取用戶信息

但在實(shí)際開發(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.最終效果如下：