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为场景值

若是在其余页面中使用 this.$router.params ,若是连接带参数,获得的就是参数对象;若是不带参数,获得的是页面路径,是拿不到scene场景值的,若是开发者须要场景值作一些事情,最好在 app.js中拿到scene储存到本地

4.video组件使用时的一些坑
(1) poster属性设置的背景图无效 ,会一闪而过;
(2) 网上所说的,用cover-view或者cover-image,在视频组件外套一层,亲测在开发者工具下能够,可是真机调试下不行,代码以下:

<video id="myVideo" class="video-xx" src="{{videoUrl}}" controls>
<cover-view class="controls"> <cover-image class="img" src="{{img}}"
/> </cover-view> </video>

本人的解决方案是,先隐藏Video组建,显示背景图;点击背景图再调用播放视频接口,解绝了这个问题,代码以下:

<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>

在play 方法中加入

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

(4) video不能设置圆角样式,在开发者工具中能够展现圆角,真机上是无效的

5.获取微信受权,手机号登陆小程序
获取微信受权,拿到手机号登陆小程序,使用该功能前要注意一点:该功能仅支持企业版小程序

下面讲讲该功能碰见的坑:
(1)使用该功能须要先获取登陆的code码,传输code到后台接口获取到session_key,获取code,最好是在componentWillMount生命周期里面,不要放在getPhoneNumber()(受权获取手机号的方法中),不然屡次操做获取手机号操做会出现session_key失效的问题,直接上代码:

// 首先按钮上作好事件绑定

<Button openType='getPhoneNumber'
onGetPhoneNumber={this.getPhoneNumber.bind(this)}>微信快速登陆</Button>

//componentWillMount生命周期获取code
Taro.login().then(res => {
if (res.code) {
this.setState({
code: res.code
})}})

//getPhoneNumber获取受权解密手机号登陆
getPhoneNumber(e)

暂时先写这么多,后面会再补充一些,这里有个简单的小程序(涉及到的功能:手机号受权登录,手机验证码登录,登出,页面跳转的交互,视频播放等),项目git地址:

https://github.com/qzp199510/...

接口api封装参考文章地址:

https://segmentfault.com/a/11...