Taro：taro框架开发小程序
前言：taro是一个可以很好实现一次开发，多端统一的框架，本文只介绍它小程序端开发的一些内容。
使用taro框架需要的知识储备：
1.熟悉react语法，否则选用taro需要一定学习成本
2.redux熟悉最好，就像redux官网说的一样，"当你觉得需要redux时候再用它，否则react就够用了"
react中文学习文档：https://react.docschina.org/docs/hello-world.html
redux中文学习文档：http://www.redux.org.cn/
小程序项目搭建
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}> </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/market
接口api封装参考文章地址:
https://segmentfault.com/a/1190000016533592
