Taro：使用taro完成小程序开发

前言：taro是一个可以很好实现一次开发，多端统一的框架，本文只介绍它小程序端开发的一些内容。
小程序项目搭建
gitup已经有很清楚的说明：https://github.com/NervJS/taro

• 微信小程序发送模板消息！附前端+后端源码~
• 微信小程序之登录态的探索

一.主要操作步骤及命令：

1.cnpm install -g @tarojs/cli

全局安装taro脚手架，此处我用的是淘宝镜像cnpm，

淘宝镜像配置命令：npm install -g cnpm --registry= https://registry.npm.taobao.org

安装过程中会问你是否需要redux模板，可以先不要，等感觉确实需要redux再添加，

ts如果不会的话也不需要安装

2.执行 cnpm run dev:weapp命令,就可以进入小程序开发环境进行开发了

二.开发过程碰到的一些坑:

1.事件绑定传参
本人喜欢用es6方式传值,但是在taro使用es6传值编译会出错,所以在使用taro制作小程序时建议使用.bind传值,如点击事件传值:

onClick={this.onClick.bind(this,num)}

2.底部TabBar使用
官方的TabBar配置只要在app.js中配置好就行了,但是官方的TabBar只提供了部分属性不好扩展,如果需要扩展,建议自定义开发

3.小程序场景和页面参数的获取值获取
小程序场景值获取需要注意一点 ,: 只能在app.js的componentWillMount生命周期获取,直接上代码

```

const params = this.$router.params;//获取所有参数
const query = params.query ;//query里面是链接上带的参数
const scene = params.scene ;//scene为场景值

</blockquote>
<p>如果在其他页面中使用 <strong>this.$router.params</strong> ,如果链接带参数,得到的就是参数对象;如果不带参数,得到的是页面路径,是拿不到<strong>scene</strong>场景值的,如果开发者需要场景值做一些事情,最好在 <strong>app.js</strong>中拿到scene储存到本地</p>
<p><strong>4.video组件使用时的一些坑</strong><br>(1) <strong>poster</strong>属性设置的背景图无效 ,会一闪而过;<br>(2) 网上所说的,用cover-view或者cover-image,在视频组件外套一层,<strong>亲测在开发者工具下可以,但是真机调试下不行</strong>,代码如下:</p>
<blockquote>&lt;video id="myVideo"  class="video-xx" src="{{videoUrl}}" controls&gt;<br>&lt;cover-view class="controls"&gt; &lt;cover-image class="img"  src="{{img}}"<br>/&gt; &lt;/cover-view&gt; &lt;/video&gt;</blockquote>
<p>本人的解决方案是,先隐藏Video组建,显示背景图;点击背景图再调用播放视频接口,解绝了这个问题,代码如下:</p>
<blockquote>

<Video className='video'
src='{video}
style={this.state.videoStyle}
controls={true}
customCache={false}
autoplay={false}
onPause={this.bindplay}
id='video'
>
</Video>
<View class='img_box' style={this.state.viewStyle}>
<Image className='img' src={Play} onClick={this.play} />
</View>

<p><strong>在play 方法中加入</strong></p>

const video = Taro.createVideoContext('video');
video.play();

</blockquote>
<p>(4) video不能设置圆角样式,在开发者工具中可以展示圆角,真机上是无效的</p>
<p><strong>5.获取微信授权,手机号登录小程序</strong><br>获取微信授权,拿到手机号登录小程序,使用该功能前要注意一点:<strong>该功能仅支持企业版小程序</strong></p>
<p>下面讲讲该功能遇见的坑:<br>(1)使用该功能需要先获取登录的<strong>code</strong>码,传输<strong>code</strong>到后台接口获取到<strong>session_key</strong>,获取<strong>code</strong>,最好是在<strong>componentWillMount</strong>生命周期里面,不要放在<strong>getPhoneNumber()</strong>(授权获取手机号的方法中),否则多次操作获取手机号操作会出现<strong>session_key</strong>失效的问题,直接上代码:</p>
<blockquote>//<strong>首先按钮上做好事件绑定</strong><p>&lt;Button openType='getPhoneNumber'<br>onGetPhoneNumber={this.getPhoneNumber.bind(this)}&gt;微信快速登录&lt;/Button&gt;</p>
<p>//<strong>componentWillMount生命周期获取code</strong><br>   Taro.login().then(res =&gt; {<br>   if (res.code) {<br>   this.setState({<br>   code: res.code<br>  })}})</p>
<p>//<strong>getPhoneNumber获取授权解密手机号登录</strong><br>getPhoneNumber(e)</p>
</blockquote>
<p>暂时先写这么多,后面会再补充一些,这里有个简单的小程序(涉及到的功能:手机号授权登陆,手机验证码登陆,登出,页面跳转的交互,视频播放等),项目git地址:</p>
<p><a href="https://github.com/qzp199510/market" rel="nofollow noreferrer">https://github.com/qzp199510/...</a></p>
<p>接口api封装参考文章地址:</p>
<p><a href="https://segmentfault.com/a/1190000016533592">https://segmentfault.com/a/11...</a></p>

                
                                                
原文地址：https://segmentfault.com/a/1190000016794779