taro-vue2.x框架开发微信小程序

最近使用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框架必须要每个页面都要引入taro实例对象，才能使用taro内部的方法）

首先必须是 AtButton按钮，这个按钮是taro-vue-ui框架的按钮，我们要使用这个按钮必须要使用taro-vue-ui模板，这个是在初始化taro项目时安装的，在当前vue组件需要引入

接下来就是按钮的使用，在原生小程序开发我们是不需要任何符号绑定方法的，但是在vue2.x版本里面我们要是用  :onGetPhoneNumber="getPhoneNumber"，虽然这是一个事件的回调但是使用@onGetPhoneNumber="getPhoneNumber"，是无效的，不能触发事件，谨记。。。

<tempalte>
    <view>
        <AtButton class="getPhoneBtn" type="primary" openType="getPhoneNumber" :onGetPhoneNumber="getMobileNumber">了解更多</AtButton>
    </view>
</template>
<script>
// 按需引入, 更小的应用体积
import Taro from '@tarojs/taro'
import { AtButton} from 'taro-ui-vue'
import "taro-ui-vue/dist/style/components/button.scss"
export default{
    components: {
        AtButton
      },
    data(){
        return{
        
        }
    },
    methods:{
    // 微信授权获取用户手机号
    getMobileNumber(e) {
      console.log(e,'打印event对象');
            if (e.detail.errMsg === "getPhoneNumber:ok") {
              // 发起网络请求
            }
        },
    }
}
</script>

目前发现了这个坑，后面再发现会及时补充。。。

标签：vue,taro,手机号,微信,getPhoneNumber,vue2,按钮
来源： https://blog.csdn.net/vscode_js/article/details/113760894