微信小程序实现在调用获取手机号组件前增加逻辑

微信小程序实现在调用获取手机号组件前增加逻辑

• 背景
• 解决方法
• • wxml
  • js

背景

做小程序开发时，有了一个需求是：在登录界面，调用微信小程序获取手机号组件进行登录。调用组件前需要检查是否同意了隐私协议，同意后才调用，否则提示用户先同意协议。然而小程序调用手机号的组件只能通过按钮的来实现，不可以在js调用接口。调用手机号代码如下。

	<button  open-type="getPhoneNumber"  bindgetphonenumber="getphone">
	获取手机号
    </button>

如果直接在button上添加bind-tap属性绑定检查是否同意隐私协议事件：

	<button  open-type="getPhoneNumber" bing:tap = "checkAgree" bindgetphonenumber="getphone">
	获取手机号
    </button>

那么会先检查是否同意隐私协议，但是不管同不同意都会调用获取手机号组件。

解决方法

使用两个嵌套的button，外层button用于检查是否同意协议，内层用于调用获取手机号和登录。通过wx:if只有同意协议后才有内层button。代码如下。

wxml

<!--  登录按钮-->
<button class="oneClick" bind:tap="oneClick">一键登录
    <button wx:if="{{(checkStatus)}}" class="phoneConfirm" open-type="getPhoneNumber" bindgetphonenumber="getphone"></button>
</button>
<!-- 隐私协议 -->
<view class="userKnown">
    <checkbox checked="{{checkStatus}}" bindtap="btnWatch" />
    我已阅读并同意

    <view class="knowText" bindtap="gotoAgree">《服务协议》</view>
    和
    <view class="knowText" bindtap="gotoClause">《隐私条款》</view>
</view>

js

oneClick(){
    if(!this.data.checkStatus){
      wx.showModal({
        title: '规则提示',
        content: '是否同意我们的《服务协议》和《隐私条款》',
        confirmText: '同意',
        cancelText: '取消',
        complete: (res) => {
          if (res.cancel) {
  
          }
          if (res.confirm) {
            this.setData({
              checkStatus: true,
            })
          }
        }
      })
    }

  },
  getphone(e){
    let phoneCode = e.detail.code

    if (e.detail.errMsg === 'getPhoneNumber:ok') {
      
      wx.login({
        success: (loginCode) => {
          // console.log(loginCode)
          //  自己写的post请求方法
          app.$api.post('后台登录url', {
            loginCode: loginCode.code,
            phoneCode:phoneCode
          }, res => {
           //登录逻辑
          })
        },
      }) 
    }
  },