微信小程序获取用户手机号授权方法

本文主要是介绍微信小程序获取用户手机号授权方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

微信小程序获取用户手机号方法

1. 首先在 app.json 页面添加一个新的用户授权页面，放在首页index的后面即可

2. 在 app.js 页面中编写如下代码：
   这里包含了获取用户信息的相关代码

//app.js 
import request from './utils/request.js';
// const app = getApp();
App({
  onLaunch: function () {
    if (this.globalData.phonenumber = '' || this.globalData.phonenumber.length < 11) {
      if (wx.getStorageSync('tel').length < 11) {
        wx.redirectTo({
          url: '/pages/sqy/sqy', // 该 url 就是第一条中新增的用户授权页地址
        })
      }
    }
    console.log(this.globalData.phonenumber);

    // // 展示本地存储能力
    // var logs = wx.getStorageSync('logs') || []
    // logs.unshift(Date.now())
    // wx.setStorageSync('logs', logs)

    // // 登录
    // wx.login({
    //   success: res => {
    //     // 发送 res.code 到后台换取 openId, sessionKey, unionId
    //     console.log(res)
    //     wx.request({
    //       url: 'https://hs2.ala-cloud.cn/api/wx_getopenid1.php',
    //       method: 'POST',
    //       header: {
    //         "Content-Type": "application/x-www-form-urlencoded"
    //       },
    //       data: {
    //         code: res.code
    //       },
    //       success: re => {
    //         console.log(re)
    //         wx.setStorageSync('openid', re.data.res)
    //       }
    //     })
    //   }
    // })

    // // 获取用户信息
    // wx.getSetting({
    //   success: res => {
    //     if (res.authSetting['scope.userInfo']) {
    //       // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
    //       wx.getUserInfo({
    //         success: res => {
    //           // 可以将 res 发送给后台解码出 unionId
    //           this.globalData.userInfo = res.userInfo
    //           // console.log(res.userInfo)
    //           // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
    //           // 所以此处加入 callback 以防止这种情况
    //           if (this.userInfoReadyCallback) {
    //             this.userInfoReadyCallback(res)
    //           }
    //         }
    //       })
    //     }
    //   }
    // })
  },
  globalData: {
    userInfo: null,
    phonenumber: '',
  },
  req: new request()
})

3. 编辑用户授权页的wxml

 <button  wx:if="{{!phone}}"  open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

5. 编辑用户授权页的wxss

6. 编辑用户授权页的js

const app = getApp();
Page({
  data: {},
  onl oad: function () {
  },

  getPhoneNumber: function (e) {
    if (e.detail.errMsg == "getPhoneNumber:fail user deny") return;
    //用户允许授权
    console.log("Iv", e.detail.iv);
    console.log(e.detail.encryptedData);
    wx.showLoading()
    var self = this
    //1. 调用登录接口获取临时登录code
    wx.login({
      success: res => {
        if (res.code) {
          //2. 访问登录凭证校验接口获取session_key、openid
          wx.request({
            url: "https://hs2.ala-cloud.cn/api/wx_getopenid.php",
            data: {
              'code': res.code,
            },
            method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
            header: {
              'content-type': 'application/json'
            }, // 设置请求的 header
            success: function (data) {
              console.log("data", data)
              if (data.statusCode == 200) {
                //3. 解密
                wx.request({
                  url: 'https://hs2.ala-cloud.cn/api/getsjh.php',
                  data: {
                    'encryptedData': e.detail.encryptedData,
                    'iv': e.detail.iv,
                    'session_key': data.data.res.session_key
                  },
                  method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
                  header: {
                    'content-type': 'application/json'
                  }, // 设置请求的 header
                  success: function (data2) {
                    wx.hideLoading()
                    // console.log("data2", data2)
                    if (data2.statusCode == 200 && data2.data.Message.phoneNumber) {
                      self.setData({
                        phone: data2.data.Message.phoneNumber
                      })
                      app.globalData.phonenumber = data2.data.Message.phoneNumber
                      console.log(getApp().globalData.phonenumber);
                      wx.setStorageSync('tel', app.globalData.phonenumber)
                    }
                    if (app.globalData.phonenumber.length >= 11) {
                      wx.switchTab({
                        url: '/pages/index/index',
                      })
                    } else {
                      wx.redirectTo({
                        url: '/pages/sqy/sqy',
                      })
                    }
                  },
                  fail: function (err) {
                    console.log(err);
                  }
                })
              }
            },
            fail: function (err) {
              console.log(err);
            }
          })
        }

      }
    })
  }
})

这篇关于微信小程序获取用户手机号授权方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！