The WeChat applet uses vant weapp to introduce a dialog pop-up box and click OK to get your own mobile phone number to call the official interface of the WeChat applet

Project scenario:

提示：这里简述项目相关背景：

This is vant's weapp applet version ui

Using the Dialog pop-up box

---

Problem Description

提示：这里描述项目中遇到的问题：

I want to use the Dialog pop-up box component of vant Weapp to obtain my mobile phone number.

The effect is as shown in the picture, the most classic pop-up box needs to pop up, and I searched for it. I found that there are very few tutorials for weapp, so this post is only for recording.

Implementation process

项目中必须已经引入了weapp组件

1. Paste the page code of dialog in wxml

<van-dialog
  use-slot
  title="为确保买卖双方交流的真实性"
  show="{
     
     { istelshow }}"
  show-cancel-button
  confirm-button-open-type="getPhoneNumber"
  bind:confirm="getPhoneNumber"
  bind:getphonenumber="getPhoneNumber"
>
<view style="display: flex;flex-direction: column;align-items: center;">
  <text style="margin:20rpx 0;font-weight: bold;font-size: 36rpx;">****申请获得以下权限：</text>
  <text style="color: #999;font-weight: bold;margin-bottom: 30rpx;">获得您的手机号</text>
</view>

</van-dialog>

vant weapp dialog official website portal

In its official documentation it saysconfirmButtonOpenType

confirmButtonOpenType Wechat official document portal

In layman's terms, it is necessary to enable the confirmButtonOpenType property in the dialog and write the corresponding method

2. Perform other operations in js

getPhoneNumber: function (e) {
    
    
    console.log(e);
    // 授权成功回调
    if (e.detail.errMsg == "getPhoneNumber:ok") {
    
    
      
    }
  },

After the authorization is successful, the backend needs to cooperate.
Get the code in your e.detail and pass it to the backend

Then wait for the backend to return the value

---