当前位置: 首页 > Web前端 > HTML

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

时间:2023-04-02 16:12:37 HTML

前言:taro是一个可以实现一次性开发,统一多端的框架。本文仅介绍其小程序开发的部分内容。小程序项目的gitup已经解释清楚了:https://github.com/NervJS/taro一、主要操作步骤及命令:1、cnpminstall-g@tarojs/cli全局安装taro脚手架,我这里使用淘宝镜像cnpm,淘宝镜像配置命令:npminstall-gcnpm--registry=https://registry.npm.taobao.org安装过程中会询问是否需要redux模板。再次添加redux,不会ts的可以不用安装2.执行cnpmrundev:weapp命令,即可进入小程序开发环境进行开发2.开发过程中遇到的一些坑:1.事件绑定和传参我喜欢用es6传值,但是在taro中用es6传值会报错,所以在用taro做小程序的时候,推荐使用.,num)}2.底层的TabBar只要在app.js中配置就使用官方的TabBar配置,但是官方的TabBar只提供了一些属性,不易扩展。如果需要扩展,建议自定义开发。3.小程序场景获取页面参数值和获取小程序场景值需要注意的一点:只能在app.js的componentWillMount生命周期中获取,直接在代码const上获取params=this.$router.params;//获取所有参数constquery=params.query;//query包含参数constscene=params.scene;//scene为场景值如果使用this.$router.params在其他页面,如果链接有参数,则获取参数对象;如果没有参数,则获取页面路径,无法获取场景值。如果开发者需要场景值做某事,最好在app.js中获取场景并存储在本地。4、视频组件使用时的一些坑(1)poster属性设置的背景图无效,一闪而过;(2)网上说的,用cover-view或者cover-image给video组件套上一层,在开发者工作室测试在tools下是可以的,真机调试下就不行了。代码如下:src="{{img}}"/>我的解决办法是先隐藏Video组件,显示背景图片;点击背景图片调用播放视频接口解决这个问题,代码如下:{false}autoplay={false}onPause={this.bindplay}id='video'>在play方法中加入constvideo=Taro.createVideoContext('video');视频播放();(4)视频不能设置圆角样式,开发者工具中可以显示圆角,真机无效5.获取微信授权,手机号登录小程序获取微信授权,用手机号登录小程序。使用该功能前,需要注意一点:该功能仅支持企业版小程序。下面说说这个功能。遇到的坑:(1)使用该功能需要先获取登录码,将码传到后台接口获取session_key,获取码最好在componentWillMount生命周期中,不要在getPhoneNumber()中(方法中获取手机号授权),否则多次操作会获取在获取手机号的操作中会出现session_key失效的问题。直接输入代码://首先在按钮上做事件绑定微信快捷登录//componentWillMount生命周期获取代码太郎.login().then(res=>{if(res.code){this.setState({code:res.code})}})//getPhoneNumber获取授权解密手机号logingetPhoneNumber(e)写这么多暂时先放着,稍后再补充,这里是一个简单的小程序(涉及功能:手机号授权登录,手机验证码登录,注销,页面跳转交互,视频播放等),项目git地址:https://github.com/qzp199510/...接口api包参考文章地址:https://segmentfault.com/a/11...