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加密方式处理,