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

2021-02-08 19:00:58 阅读：840 来源： 互联网

标签：vue taro 手机号微信 getPhoneNumber vue2 按钮

最近使用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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