Taro介绍
多端统一开发的解决方案，其遵循react语法规范。支持：微信小程序、京东小程序、H5、百度小程序、支付宝小程序、快应用、ReactNative、字节跳动小程序、QQ轻应用
Taro脚手架
- 安装
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli
- 项目初始化
taro init taro-demo
- 启动
yarn dev:weapp 微信小程序
yarn dev：h5
Taro工程微信配置
-
微信全局配置 小程序根目录下的app.config.ts 文件用来对微信小程序进行全局配置点击查看具体支持哪些配置项
-
页面配置 页面配置的优先级大于全局配置
-
eslint配置 可以在 src目录中的.eslintrc 文件中进行配置，一般用忽略某些规则
Taro 路由
Taro.switchTab(option)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
Taro.switchTab({
url: '/index'
})
Taro.navigateTo(option)
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 Taro.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
Taro.navigateTo({
url: 'test?id=1',
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function (res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
尺寸
- Taro使用推荐使用px或者百分比%
- Taro默认设计稿为750 和微信一样，直接按照设计稿1：1开发即可
- Taro会对px进行自动转化：
- 在微信小程序中，px转成rpx
- 在H5中，px转换成rem
- 如果你不想被转化，那就大写eg： Px或者PX，这样就会被Taro忽略
样式处理-选择器
- Taro开发中设置样式推荐使用类选择器
- 如果要支持多端开发的话，不要使用标签选择器和属性选择器
