taro多端开发

taro

react语法，跨端开发，支持打包app(reactNative)，如果你熟悉React，不懂Vue.js，推荐Taro

安装

npm install -g @tarojs/cli || yarn global add @tarojs/cli

创建项目 

taro init 目录

 开发

yarn dev:h5  //开发h5    浏览器测试
yarn dev:weapp //小程序   小程序开发工具测试

打包

yarn build:weapp //小程序
yarn build:h5 //h5

调用

1、微信开发者工具导入项目，指向项目根目录；

2、微信开发者工具需要设置关闭 ES6 转 ES5 功能，开启可能报错；

3、微信开发者工具需要设置关闭上传代码时样式自动补全，开启可能报错；

4、微信开发者工具需要设置关闭代码压缩上传，开启可能报错

开发规范

taro是个袖珍版的react

全局配置

src/app.config.js 里的 == 小程序app.json

页面配置

src/pages/index.config.js 里的 == 小程序page.json

生命周期

支持小程序钩子函数和react钩子函数

react	miniprogram
componentWillMount	onLoad|onLaunch
componentDidMount	onReady
componentDidShow	onShow
componentDidHide	onHide

小程序api

小程序的api通过Taro.api()桥接；

如：小程序中的 wx.request()，在taro中是 Taro.request().then().catch()

原生api

reactNative的api

样式

1、若要支持 React Native 端，必须采用 Flex 布局，并且样式选择器仅支持类选择器，思想：对齐短板；

2、尺寸单位建议使用 px、 百分比 %，taro自动转换；

3、Taro 提供了直接在样式文件中引用本地资源的方式；

4、CSS Modules 默认关闭；

5、入口文件 app.js 里面引入的样式就是全局样式

UI组件

1、taro内置（封装小程序的原生组件) -> taro-ui -> 第三方weui组件；

2、内置组件和taro-ui组件，支持H5转换；

3、不支持jsx标签；

4、taro内置组件使用方式对等小程序组件

          ①组件属性: <组件 xx-xx="vlaue"></组件> -> <组件 xxXx="value" />

          ②引入内置: import { Map } from '@tarojs/components'

          ③引入taroui: import { Map } from 'taro-ui'

5、修改组件样式: 整体修改主题 -> props-> 查询元素，同选择器重写

路由

1、不可用react-router-dom，使用方式同小程序；

2、config属性配置tabbar跳转；

3、Taro.api() 编程式跳转；

4、Navigator 声明式跳转；

5、this.$router.params 访问到程序初始化参数|路由参数

事件

bindtap -> onTap 事件对象同小程序

语法差异

1、不支持 <Xxx.Fragement> 等方式；

2、文字要包在 Text 组件里面；

3、引用图片、音频、字体等文件 import xx from '...' reuqire('../')

转换平台

微信小程序转taro：

//微信小程序项目目录下
taro convert

//在taroConvert目录下
yarn install //安装依赖

yarn dev:xx  //开发
yarn build:xx //打包到其他平台

其他注意

1、在 App 类中的 render() 函数没有实际作用，不写逻辑，不会起作用；

2、支持 PropTypes 检查类型，目前在小程序端还有些问题；

3、不能使用 Array#map 之外的方法操作 JSX 数组；

4、自定义组件样式默认是不能受外部样式影响的，需要定义在组件内部