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>

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

上一篇:关于Vue2和Vue3响应式数据data回调函数


下一篇:IDEA创建SpringBoot父子工程