taro-vue2.x框架跨端开发（一）

最新推荐文章于 2025-10-24 15:11:32 发布

原创

最新推荐文章于 2025-10-24 15:11:32 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #vue

本文档记录了使用Taro-Vue2.x版本开发微信小程序时遇到的一个常见问题——如何正确获取用户手机号。在原生微信小程序中，通过button标签的open-type属性可以轻松实现，但在Taro-Vue中，需使用AtButton组件，并通过`:onGetPhoneNumber`绑定方法。需要注意的是，使用`@onGetPhoneNumber`会导致事件不触发，正确做法是使用`:onGetPhoneNumber`。文章还提供了详细的代码示例，帮助开发者理解并解决这个问题。

最近使用taro-vue2.x版本开发微信小程序，taro框架是京东凹凸团队研发的开源框架，但是taro开始默认使用的是react语法，对于vue还是后面补充的，关于taro-vue官网也是没有相关详细文档说明的，使用vue2.x版本开发小程序只能一点一点的采坑了，虽说taro基本上使用跟微信小程序原生语法差不多，但是。。。

安装taro就不做赘述了，详情查看：taro官网

先记录一下踩得坑：（后面会慢慢补充完整）

首先是微信小程序获取手机号的一个小坑：

微信小程序原生是使用button标签并实现微信获取手机号方法，下面先列一下微信小程序原生的获取手机号方法：

//open-type的值必须是getPhoneNumber，
//bindgetphonenumber 这个是获取手机号的事件名
//getPhoneNumber 是获取手机号的事件，该方法会返回event对象，event对象里面会返回detail对象
//event.detail对象有我们需要传给后端的参数encryptedData和iv
<button class="button" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>


//下面是js方法
getPhoneNumber(e){
    //下面这句话就是用户点击允许按钮的条件判断
    if (e.detail.errMsg === "getPhoneNumber:ok") {
        //接下来执行接口调用
    }
}

接下来就是使用taro-vue开发微信小程序获取手机号的方法：（我们在vue使用taro框架必须要每个页面都要引