微信小程序如何实现用户手机号登录

wxml页面样式及wxcss

wxml

<view class="login-way">
    <view class="prompt">为有效保存您的数据，建议您进行绑定</view>  
    <block  wx:if="{{ checkboxValue}}">
        <button bind:tap="openUnbindConfirm">
        <t-icon prefix="ml" name="weixin" size="48rpx" />微信用户一键绑定
        </button>
        <button class="person-info__btn" open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber" > 手机号登录 </button>
    </block>
    <block wx:else>
        <button bind:tap="checkgetPhoneNumber">
        <t-icon prefix="ml" name="weixin" size="48rpx" />微信用户一键绑定
        </button>
        <button class="person-info__btn" bind:tap="checkgetPhoneNumber" > 手机号登录 </button>
    </block>
  <view class="checkbox">
  <label>
    <checkbox checked="{{checkboxValue}}" bind:tap="checkboxChange" value="1" />我已阅读并同意<view style="display:inline; color: rgb(241,180,126);">《xxxx服务协议》</view>和<view style="display:inline; color: rgb(241,180,126);">《安全隐患》</view>
    </label>
  </view>
  </view>

wxcss

.login-way button:nth-of-type(1){
  width: 80%;
  height: 100rpx;
  border-radius: 10rpx;
  margin: 50rpx auto;
  font-size: 35rpx;
  color: #fff;
  background: rgb(9,196,99);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}
.login-way .prompt{
  width: 100%;
  text-align: center;
  margin: 30rpx auto 10rpx;
  color: rgb(179, 179, 179);
  font-size: 25rpx;
}

.login-way .person-info__btn{
  width: 80%;
  height: 100rpx;
  border-radius: 10rpx;
  margin: 50rpx auto;
  font-size: 35rpx;
  padding-top: 10rpx;
}

.login-way .checkbox{
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 25rpx;
  margin: 0rpx auto;
}

.login-way .checkbox .wx-checkbox-input{
  width: 30rpx; 
  height: 30rpx; 
  border-radius: 30%;
}

js

       //绑定手机
   getPhoneNumber: function (e) {
     console.log(e.detail.errMsg)
     
    if (e.detail.errMsg === 'getPhoneNumber:ok') {
      console.log(e)
      this.login(e);
    }
  
      },

   /**
     * 用户登录
     */
    login(e) {
     // 微信获取登录code
     let that=this;
     wx.login({
        success:(res1)=> {
        if (res1.code) {
            that.setData({
                openidcode:res1.code
            })
            //后台接口，将code传递到后台
            that.loginwxByphone(e.detail.code)
        }else{

        }
        },
    fail:(res)=>{
      console.log(res.data);
    }
  })
 
},  

java后台接口

 //手机号登录
  @PostMapping("/getPhone")
  public Result getPhoner(@RequestParam("code") String code,@RequestParam("openidcode")String openidcode) throws Exception {
    System.out.println("小程序发来的code值：" + code);

    // 调用封装的AccessToken类获取access_token
    String access_token = AccessToken.getAccessToken();
    System.out.println("access_token:" + access_token);

    //调用封装的AccessToken类获取openid
    String openid = AccessToken.getOpenid(openidcode);
    System.out.println("access_token:" + openid);

    // 准备请求
    // 请求url 拼接上access_token
    String url = "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=" + access_token;
    // 请求参数
    Map<String, String> map = new HashMap<>(1);
    map.put("code", code);

    // 发起请求 注意请求参数map要转成json字符串
    String res = HttpClient.postJson(url, JSON.toJSONString(map), null);

    // 解析请求结果 拿到手机号
    JSONObject jsonObject = JSONObject.parseObject(res);
    String phone_info = jsonObject.get("phone_info").toString();
    JSONObject jsonPhone_info = JSONObject.parseObject(phone_info);
    String phoneNumber =                 
    MD5Util.setstring2MD5(jsonPhone_info.get("phoneNumber").toString());
    System.out.println("加密后的用户手机号：" + phoneNumber);

这样就实现了用户手机号登录方式。在获取到用户的手机号后要注意加密处理，这里只是做简单的MD5加密方式处理，