ミニプログラムのログイン認証（ユーザーの携帯電話番号と情報を取得）

あまり言わないで、コードに移動してください

.jsコード

まず第一に

let app =getApp()

  data: {
    
     
    userInfo: null,
    // 遮罩层
    show:false
  },
  processLogin(){
    
    
    this.setData({
    
     show: true });
  },
  getPhoneNumber(options) {
    
    
    console.log(options)
    console.log(options.detail.errMsg)
    console.log(options.detail.iv)
    console.log(options.detail.encryptedData)
    // 获取加密算法
    let iv = options.detail.iv;
    console.log(iv)
    //获取加密数据
    let encryptedData = options.detail.encryptedData;
    console.log(encryptedData)

    // 获取用户id
    let uid = wx.getStorageSync('uid')
    console.log(uid)
    let sessionKey = wx.getStorageSync('sessionKey')
    console.log(sessionKey)
    let data = {
    
    
      iv,
      encryptedData,
      uid,
      sessionKey
    }
    console.log(data)
    // 请求用户信息
    app.http.entry(data).then(resp => {
    
    
      console.log(resp)
      //  注册成功
      this.setData({
    
    
        show:false,
        userInfo: resp.data
        
      })
    })
  },
  login(){
    
    
    wx.login({
    
    
      // 先  wx.login 获取到code值  
      success: (resp) => {
    
    
        console.log(resp);
       
        //  传递参数 
        let code = resp.code;
        console.log(code)
      
        // let iv = wx.getStorageSync('iv')
        // console.log(iv)
        // let encryptedData = wx.getStorageSync('encryptedData')
        // console.log(encryptedData)
        // 登录接口，需要传code，iv，encryptedData
        wx.getUserInfo({
    
    
          success: function (resp) {
    
    
            console.log(resp)
            
            let iv = resp.iv;
            // wx.setStorageSync('iv', iv)
            console.log(iv)
            let encryptedData = resp.encryptedData
            // wx.setStorageSync('encryptedData', encryptedData)
            console.log(encryptedData)
            let obj = {
    
    
              iv,
              encryptedData,
              code
            }
            // wx.request('/weChatLogin?code='+code)
            app.http.logon(obj).then((resp) => {
    
    
              console.log(resp);
              // 将token保存到本地
              let token = resp.data.data.token;
              wx.setStorageSync('token', token)
              let uid=resp.data.data.uid;
              wx.setStorageSync('uid',uid)
              let sessionKey=resp.data.data.sessionKey
              wx.setStorageSync('sessionKey', sessionKey)
              let openId =resp.data.data.openId
              wx.setStorageSync('openId', openId)
            })


          }
        })
        
        
       
      }
      
    })
  
  },

.jsonコード

{
    
    
  "usingComponents": {
    
    
    "van-popup": "/miniprogram_npm/@vant/weapp/popup",
    "van-button": "@vant/weapp/button/index"
  }
}

.wxmlコード

<!--pages/my/my.wxml-->
		<!-- 头像区域 -->
		
		<view class="mine_useravatar">
			<view wx:if="{
    
    {userInfo!=null}}" style="text-align:center">
				<view style="height:100rpx"><image src="{
    
    {userInfo.headUrl}}" style="width:100rpx;height:100rpx;border-radius:50px 50px 50px 50px"></image></view>
				<view style="height:30rpx">{
    
    {
    
    userInfo.nickName}}</view>
			</view>
			<view>
				<button wx:if="{
    
    {userInfo==null}}" type="primary" open-type="getUserInfo" bindgetuserinfo="processLogin" >点击登录</button>
				<!-- 遮罩层 -->
				<van-cell title="展示弹出层" is-link />

<van-popup show="{
    
    { show }}" bind:close="onClose">
	<view style="width:600rpx;text-align:center">
		<view>提示</view>
		<view>尊敬的用户，需要您授权手机号</view>
		<van-button type="primary" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" bindtap="login">授权</van-button>	
	</view>
</van-popup>
				
			</view>
		</view>

.wxssコード

.mine_useravatar{
    
    
  width: 300rpx;
  height: 150rpx;
  margin-left: 220rpx;
  margin-top: 30rpx;
  line-height: 150rpx;
  border-radius: 50%;
}