獲取流程圖

ui庫(kù)Vant Weapp：Vant Weapp地址（點(diǎn)擊跳轉(zhuǎn)）

第一種方法
適用于直接點(diǎn)擊登錄獲取
在界面添加登錄按鈕，用戶點(diǎn)擊按鈕調(diào)用wx.getUserProfile()函數(shù)來(lái)提示用戶授權(quán)登錄，授權(quán)成功后，把用戶頭像數(shù)據(jù)和名稱數(shù)據(jù)保存到緩存區(qū)里，并且改變?nèi)肿兞康闹?/p>

點(diǎn)擊登錄后

登錄成功后跳轉(zhuǎn)到首頁(yè)

 <van-button size="small" type="primary" block color="rgba(0, 153, 255, 1)"  open-type="getUserInfo" bindtap="getUserProfile">微信一鍵登錄</van-button>

布局以及路由跳轉(zhuǎn)可以根據(jù)需求結(jié)合hasUserInfo以及canIUseGetUserProfile狀態(tài)進(jìn)行加判斷改動(dòng)
js代碼

data: {
    //是否已經(jīng)獲取用戶信息
    hasUserInfo: false,
    //是否可以調(diào)用獲取信息得函數(shù)
    canIUseGetUserProfile: false，
  },
  //第一次獲取用戶信息
  getUserProfile: function (e) {
    wx.getUserProfile({
      desc: '獲取您的微信個(gè)人信息',
      success: (res) => {
        this.setData({
          hasUserInfo: true
        })
        var app = getApp()
           app.globalData.userInfo = res.userInfo; // 將用戶信息存到globalData里面
      },
      fail: function (e) {
        wx.showToast({
          title: '你選擇了取消',
          icon: "none",
          duration: 1500,
          mask: true
        })
      }
    })
  },
  onLoad: function (n) {
    this.setData({
      canIUseGetUserProfile: true
    })
  },
  // 當(dāng)我們登錄完退出再次進(jìn)入，為了避免再次點(diǎn)擊登錄按鈕多次獲取用戶信息的情況，如果后臺(tái)userInfo信息存在，直接進(jìn)入登錄頁(yè)面，無(wú)需再次登錄進(jìn)行獲取
  onShow: function () {
    //獲取用戶globalData信息
    var n = getApp().globalData.userInfo
    //當(dāng)本地緩存的用戶名稱不為""或者null時(shí)，設(shè)置userinfo信息
    if (n.nickName != '' && n.nickName != null) {
      this.setData({
        hasUserInfo: true,
        canIUseGetUserProfile: true
      })
      wx.navigateTo({
        url: '../first/first'  // 跳轉(zhuǎn)到首頁(yè)
      })
      // 通過(guò)wx.login獲取登錄憑證（code），然后通過(guò)code去獲取我們用戶的openid
      wx.login({
        success: (res) => {
          console.log(res);
        },
      })
    }
  }

第二種方法，彈框點(diǎn)擊允許=》獲取用戶信息=》跳轉(zhuǎn)到首頁(yè)

效果圖

<!-- 驗(yàn)證碼彈框 -->
  <van-dialog use-slot title="請(qǐng)?zhí)顚懯謾C(jī)短信驗(yàn)證碼" show="{{ show }}" show-cancel-button confirm-button-open-type="getUserInfo" bind:close="onClose" confirmButtonText="允許" cancelButtonText="拒絕" bind:getuserinfo="getUserInfo">
    <view class="check">
      <!-- 輸入驗(yàn)證碼 -->
      <view class="query">
        <view class="query_item_name">已發(fā)送到手機(jī)號(hào)： 137***3701</view>
        <view class="query_num_block">
          <input type='number' class="num_item_block" wx:for="{{inputLen}}" wx:key="{{index}}" disabled bindtap='onFocus' value="{{iptValue.length>=index+1?iptValue[index]:''}}" />
        </view>
        <input name="password" password="{{true}}" class='hidden_ipt' maxlength="{{inputLen}}" focus="{{isFocus}}" bindinput="setValue"></input>
        <view class="getCode">
          <text bindtap="countDown" wx:if="{{countDownNum == 60 || countDownNum == -1}}">獲取驗(yàn)證碼</text>
          <text type="primary" plain="true" wx:else>{{countDownNum}}秒可重發(fā)</text>
        </view>
      </view>
    </view>
  </van-dialog>

 // 獲取用戶信息
  getUserInfo: function (e) {
    if (e.detail.userInfo) {
      var app = getApp()
      app.globalData.userInfo = e.detail.userInfo;
      //用戶按了允許授權(quán)按鈕
      var that = this;
      var code = '',
      wx.login({
        //獲取code
        success: function (res) {
          code = res.code //返回code
          console.log(code, 'code')
        }
      })
      //授權(quán)成功后，跳轉(zhuǎn)進(jìn)入小程序首頁(yè)
      wx.navigateTo({
        url: '/pages/first/first'
      })
    } else {
      //用戶按了拒絕按鈕
      wx.showModal({
        title: '警告',
        content: '您點(diǎn)擊了拒絕授權(quán)，將無(wú)法進(jìn)入小程序，請(qǐng)授權(quán)之后再進(jìn)入!!!',
        showCancel: false,
        confirmText: '返回授權(quán)',
        success: function (res) {
          if (res.confirm) {
            console.log('用戶點(diǎn)擊了“返回授權(quán)”')
          }
        }
      })
    }
  },

彈框css文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-514897.html

.query{
  padding-top:90rpx;
}
.query .query_item_name{
  font-family: PingFangSC-Regular;
  font-size: 35rpx;
  color: #737586;
  letter-spacing: 0;
  margin-left: 35rpx;
}
.query_num_block{
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  padding-left:36rpx;
  padding-right:36rpx;
  margin:80rpx auto 110rpx;
}
.check .confirm{
  margin:auto;
  width:200rpx;
  height: 68rpx;
  background: #F86221;
  border-radius: 33px;
  text-align: center;
  line-height: 68rpx;
  font-family: PingFangSC-Medium;
  font-size: 30rpx;
  color: #FFFFFF;
  letter-spacing: 0;
}
.num_item_block{
  height: 116rpx;
  width:80rpx;
  border:1px solid #cdcdcd;
  font-family: PingFangSC-Regular;
  border-radius: 8rpx;
  line-height: 116rpx;
  text-align: center;
  font-size: 36rpx;
  color: #25252B;
}
.hidden_ipt{
  height: 0rpx;
  width:0rpx;
  border:none;
  margin:0;
}
.getCode{
  margin-left: 35rpx;
  margin-top: -120rpx;
  margin-bottom: 30rpx;
  font-size: 35rpx;
}

到了這里，關(guān)于微信小程序之獲取用戶信息（流程+2種方法）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！