微信小程序使用vant weapp 引入dialog弹出框点击确定获取自己的手机号 调用微信小程序官方接口

项目场景：

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

这是vant的weapp小程序版本ui

使用的是Dialog弹出框

---

问题描述

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

我想用vant Weapp的Dialog弹出框组件，来实现获取自己的手机号。

效果如图，需要弹出这个最最最经典的弹出框，找了一圈。发现weapp的教程少之又少，本贴只做记录用。

实现过程

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

1.在wxml中粘贴dialog的页面代码

<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官网传送门

在它的官方文档里面写到了confirmButtonOpenType

confirmButtonOpenType微信官方文档传送门

通俗点说，就是得在dialog里面，开启这个confirmButtonOpenType属性，并且写入对应的方法

2.在js中执行其他操作

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

授权成功之后还需要后端进行配合。
获取你的e.detail里面的code传给后端

然后等待后端返回值

---