小程序獲取用戶手機號信息

小程序獲取用戶信息和手機號必須要用戶主動授權，所以這里需要有個按鈕提示用戶觸發

頁面樣子：

 

 

展示效果：

 

 

 

點擊拒絕：

 

 

點擊確定跳轉到過來時的頁面

 

 

 

wxml頁面：

<!-- 已登錄 -->
<view class="no-login">
  <!--index.wxml-->
  <view class="page">
    <view class="hd">
      <image class="logo" src="../../../static/images/assets/logo.png"></image>
    </view>
    <view class="bd">
      <view class="top_line"></view>
      <!-- <text class="s_name">獲得你的公開信息（昵稱、頭像等）</text> -->
      <text class="s_name">為了保護你的隱私，請登錄后查看</text>
    </view>
    <view class="btn spacing">
      <!-- 需要使用 button 來授權登錄 -->
      <button open-type="getPhoneNumber" class="weui_btn weui_btn_primary"
        bindgetphonenumber="bindPhoneNumber">登錄查看</button>
      <!-- <view wx:else>請升級微信版本</view> -->
    </view>
  </view>
</view>

 

wxss:

.no-login .page{
  margin-top: 100rpx;
}

.no-login .hd {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.no-login .hd .logo {
  width: 170rpx;
  height: 170rpx;
  margin-top: 40rpx;
  border-radius: 50%;
}

.no-login .hd .title {
  text-align: center;
  font-size: 36rpx;
  color: #000;
}

.no-login .bd {
  width: 100%;
  padding: 50rpx;
}

.no-login .bd .top_line {
  width: 100%;
  height: 2rpx;
  background: #ccc;
  margin-top: 20rpx;
  margin-bottom: 50rpx;
}

.no-login .bd .m_name {
  display: block;
  font-size: 36rpx;
  color: #000;
}

.no-login .bd .s_name {
  margin-top: 25rpx;
  display: block;
  font-size: 34rpx;
  color: #8a8a8a;
  text-align: center;
}

.no-login .btn {
  padding: 120rpx 50rpx 0;
}

.no-login .weui_btn_primary {
  background-color: #5986ED;
}

.no-login .weui_btn {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  line-height: 2.33333333;
  border-radius: 5px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
}

.no-login .weui_btn:after {
  content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  box-sizing: border-box;
  border-radius: 10px;
}

 

js:

const util = require('../../../utils/util.js');
const api = require('../../../config/api.js');
Component({
  /**
   * 組件的初始數據
   */
  globalData: {
    appid: 'wx5123af152604563', //appid需自己提供，此處的appid我隨機編寫
    secret: 'c42b59b15d7b7fc3d53c746f7369m4cf', //secret需自己提供，此處的secret我隨機編寫
  },
  data: {
    canIUse: wx.canIUse('button.open-type.getPhoneNumber'),
    navUrl: '',
    code: '',
    sessionkey: '',
    openid: '',
    appid: 'wx5123af152604563', //appid需自己提供，此處的appid我隨機編寫
    secret: 'c42b59b15d7b7fc3d53c746f7369m4cf', //secret需自己提供，此處的secret我隨機編寫

    isLogin: true, // 顯示當前組件
  },
  /**
   * 組件的屬性列表 
   */
  properties: {
    isLogin: { // 接收傳遞過來的是否顯示
      type: Boolean,
      value: true,
    },
  },

  /**
   * 組件的方法列表
   */
  methods: {
    getToken: function(encryptedData,iv,sessionkey){
      let that = this;

      //let openid = that.data.openid
      console.log('sessionkey：' + sessionkey)
      wx.showLoading({
        title: '加載中',
      })

      util.request(api.AuthLoginByWeixin, {
        sEncryptedData: encryptedData,
        sIv: iv,
        sSessionkey: sessionkey,
        // openid:openid,
      }, 'POST', 'application/json').then(res => {
        console.log(res)
        if (res.code === "SUCCESS") {
          wx.hideLoading();
          //存儲用戶信息
          wx.setStorageSync('token', res.token)
          console.log(wx.getStorageSync('token'))

          if (that.data.navUrl && (that.data.navUrl == '/pages/index/index' || that.data.navUrl == '/pages/cart/cart' || that.data.navUrl == "/pages/ucenter/index/index")) {
            that.setData({
              isLogin: !that.properties.isLogin
            })

            // 將數據傳遞過去
            this.triggerEvent("onBindAuthorize", {
              "isLogin": this.data.isLogin,
            })

          } else if (that.data.navUrl) {
            wx.redirectTo({
              url: that.data.navUrl,
            })
          }
        }
      });
    },
    
    login(encryptedData,iv) {
      let that = this;
      wx.login({
        success: function (res) {
          console.log("登陸成功：")
          console.log(res)
          if (res.code) {
            util.request(api.Code2Session+'?code='+res.code).then(function (res) {
              if (res.code === "SUCCESS") {
                console.log('openid和sessionkey:' + res)
                wx.setStorageSync('openid', res.data.openid); //存儲openid
                
                that.setData({
                  sessionkey: res.data.session_key,
                  openid: res.data.openid
                })

                that.getToken(encryptedData,iv,res.data.session_key)
              }
            })
          }
        }
      })
    },

    // 綁定手機號
    bindPhoneNumber: function (e) {
      let that = this;

      console.log('綁定手機號信息:')
      console.log(e.detail)

      //登錄遠程服務器
      if (e.detail.errMsg == 'getPhoneNumber:ok') {
        //用戶按了允許授權按鈕
        let encryptedData = e.detail.encryptedData // 包括敏感數據在內的完整用戶信息的加密數據
        let iv = e.detail.iv // 加密算法的初始向量

        //登錄驗證
        wx.checkSession({
          success(){
            that.getToken(encryptedData,iv,that.data.sessionkey)
          },
          fail() {
            // session_key 已經失效，需要重新執行登錄流程
            that.login(encryptedData,iv)
          }
        })
      } else {
        //用戶按了拒絕按鈕
        wx.showModal({
          title: '警告',
          content: '您點擊了拒絕授權，將無法繼續下一步操作，請授權之后再進入!!!',
          showCancel: false,
          confirmText: '返回授權',
          success: function (res) {
            if (res.confirm) {
              console.log('用戶點擊了“返回授權”');
            }
          }
        });
      }
    },

  },

  created() {
    let that = this;
    console.log('登陸頁navuRL：' + wx.getStorageSync('navUrl'))
    // that.login.bind(this)();

    wx.login({
      success: function (res) {
        console.log("登陸成功：")
        console.log(res)
        if (res.code) {
          util.request(api.Code2Session+'?code='+res.code).then(function (res) {
            if (res.code === "SUCCESS") {
              console.log('openid和sessionkey:' + res)
              wx.setStorageSync('openid', res.data.openid); //存儲openid
              
              that.setData({
                sessionkey: res.data.session_key,
                openid: res.data.openid
              })
            }
          })
        }
      }
    })

    if (wx.getStorageSync("navUrl")) {
      that.setData({
        navUrl: '/' + wx.getStorageSync("navUrl")
      })
    } else {
      that.setData({
        navUrl: '/pages/index/index'
      })
    }
    if (wx.getStorageSync("token")) {
      if (that.data.navUrl && that.data.navUrl == '/pages/index/index' && that.data.navUrl == '/pages/cart/cart' && that.data.navUrl == '/pages/ucenter/index/index') {
        wx.navigateTo({
          url: that.data.navUrl,
        })
      } else if (that.data.navUrl) {
        wx.switchTab({
          url: that.data.navUrl,
        })
      }
    }


  },
})