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

Me_Kun 发布于2019-08-02 11:49 / 2810人阅读

摘要：前言是一个可以很好实现一次开发，多端统一的框架，本文只介绍它小程序端开发的一些内容。

前言：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组建,显示背景图;点击背景图再调用播放视频接口,解绝了这个问题,代码如下:


     
     

在play 方法中加入
    const video = Taro.createVideoContext("video");
    video.play();

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

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

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

//首先按钮上做好事件绑定
//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...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53142.html

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

摘要：前言是一个可以很好实现一次开发，多端统一的框架，本文只介绍它小程序端开发的一些内容。前言：taro是一个可以很好实现一次开发，多端统一的框架，本文只介绍它小程序端开发的一些内容。小程序项目搭建gitup已经有很清楚的说明：https://github.com/NervJS/taro 一.主要操作步骤及命令： 1.cnpm install -g @tarojs/cli 全局安装taro...

lavor 2019-08-23 12:31 评论0 收藏0
新的小程序开发框架？- Taro的深度实践体验

摘要：作为两个小程序开发框架都使用过，并应用在生产环境里的人，自然是要比较一下两者的异同点。在这里与当前很流行的小程序开发框架之一进行简单对比，主要还是为了方便大家更快速地了解，从而选择更适合自己的开发方式。前言前阵子，来自我们凹凸实验室的遵循 React 语法规范的多端开发方案 - Taro终于对外开源了，欢迎围观star（先打波广告）。作为第一批使用了Taro开发的TOPLIFE小程...

maochunguang 2019-08-22 18:24 评论0 收藏0
Taro 优秀学习资源汇总

摘要：多端统一开发框架优秀学习资源汇总官方资源项目仓库官方文档项目仓库官方文档微信小程序官方文档百度智能小程序官方文档支付宝小程序官方文档字节跳动小程序官方文档文章教程不敢阅读包源码带你揭秘背后的哲学从到构建适配不同端微信小程序等的应用小程序最 Awesome Taro 多端统一开发框架 Taro 优秀学习资源汇总 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 评论0 收藏0
Taro 简介

摘要：让人又爱又恨的微信小程序自微信小程序以下简称小程序诞生以来，就伴随着赞誉与争议不断。同时于开发者来说，小程序的生态不断在完善，许多的坑已被踩平，虽然还是存在一些令人诟病的问题，但已经足见微信的诚意了。 Taro 介绍在互联网不断发展的今天，前端程序员们也不断面临着新的挑战，在这个变化多端、不断革新自己的领域，每一年都有新的美好事物在发生。从去年微信小程序的诞生，到今年的逐渐火热，以及...

sixgo 2019-08-23 16:18 评论0 收藏0
【Copy攻城狮日志】借助Taro暴改Nideshop实现电商支付宝小程序雏形

摘要：接下来，在支付宝小程序开发者工具中打，不出意外能跑起来一个电商支付宝小程序雏形。地址以上是我这个攻城狮对使用转换原生微信小程序为支付宝小程序的一次微不足道的实践。 showImg(https://segmentfault.com/img/bVbnCCN?w=1818&h=931);↑开局一张图，故事全靠编↑ 从一个需求说起作为底层的程序猿，哦不，我连猿都算不上，混的好的叫码神，混得一...

gnehc 2019-08-23 14:54 评论0 收藏0