小程序获取用户登录及手机号登录

小程序登录除了常见的短信登录、密码登录,还一个最重要的就是微信授权登录了(毕竟是基于微信的,要给人家面子吗:0,手动滑稽),写这篇随笔的原因还是好久没更了,今天先随便放一个压压档。话不多说,直奔主题。

小程序的微信授权登录中,可以直接写入微信定义好的button组件掉起微信授权功能

需要注意的就是定义open-type了,其对应的可选属性还有很多种,具体去搜文档即晓。

<button class="footer_nav_btn" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true"> //此处为微信登录
<button class="footer_nav_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true">//此处为获取手机号登录  

wxGetUserInfo:function(res){ //微信登录
  if (!res.detail.iv) {
    wx.showToast({
      title: "您取消了授权,登录失败",
      icon: "none"
    });
    return false;
    }else{
      this.resDetail = res.detail
      this.showspinner = true
      var that = this
      wx.login({
      success: function (r) {
        var code = r.code;//登录凭证
        if (code) {
          wx.getUserInfo({
            success: function(res) {
              request.post("您的接口", {
                  code:code,
                  encrypteData:res.encryptedData,
                  rawData:res.rawData,
                  signature:res.signature,
                  iv:res.iv
            }).then(response => {
                
            })
            .catch(ex => {
              console.log(ex,"ex")
            });
          },
          fail: function () {
            
          }
        })

        } 
      })
     }
   },



//手机号登录
getPhoneNumber (e) {   
if(e.detail.errMsg == "getPhoneNumber:ok"){ this.encryptedData = e.detail.encryptedData this.iv = e.detail.iv var that = this wx.login({ success: function (r) { let code = r.code;//登录凭证 request.post("您的登录接口", { code:code, encrypteData:that.encryptedData, iv:that.iv, deviceType:that.$store.state.deviceType, osSystem:that.$store.state.osSystem }) .then(response => { “您的输出结果” }) .catch(ex => { console.log(ex,"ex") }); }, fail: function () { } }) }else{ wx.showToast({ title: "您取消了授权,登录失败", icon: "none" }); return false; } },
posted @ 2020-08-27 11:35  purple_sunset  阅读(2472)  评论(0编辑  收藏  举报