微信小程序手机号绑定功能（登录后绑定）

1.手机号绑定并不是手机号登录 所以他其实就是一个添加

主要是他有一个短信发送 接收验证码验证的过程

首先是小程序端

HTML

给你一个按钮绑定点击 bindtap 事件 跳转至手机号绑定页面

<l-button type="default" bindtap="phonePage">绑定手机号</l-button>

小程序 JS 页面跳转（这是没有tabBar 的页面，有tabBar的页面需换另外wx函数）

 //跳转至手机号绑定页面
    phonePage(){
      wx.navigateTo({
        url: '/pages/phone/phone',
      })
    },

手机号绑定页面

HTML

<!-- 手机号码 -->
<form bindsubmit="onSubmit">
<text class="text1">手机号码</text>
<view class="phoneNum">
<input type="text" placeholder="请输入手机号码" bindinput="phone" name="phone"></input>
</view>
<!-- 验证码 -->
<text class="text1">验证码</text>
<view class="phoneCode">
<input type="text" placeholder="请输入验证码" name="code" ></input>
<button type="primary" size="mini" bind:tap="setCode" disabled="{
  {button}}">{
  {text}}</button>
</view>

<view class="loadButton">
<button type="primary" form-type="submit">绑定手机号</button>
</view>
</form>

CSS页面

.text1{
  margin:20rpx;
}
.phoneNum input{
  margin: 20rpx;
  padding-left: 10rpx;
  height: 80rpx;
  border: 1rpx solid #c3c3c3;
}
.phoneCode{
  display: flex;
  align-items: center;
}
.phoneCode input{
  width: 60%;
  margin: 20rpx;
  border: 1rpx solid #c3c3c3;
  padding-left: 10rpx;
  height: 80rpx;
}
.phoneCode button{
  height: 80rpx;
  vertical-align: middle;
}
 
.loadButton button{
  margin-top: 50rpx;
  width: 94% !important;
}

JS

data部分

data: {
      /