Taro调研
背景
领导大腿一拍,要从企业微信迁到飞书,已经上线或者开发中的应用,需要进行迁移工作量的评估。
为了预防哪一天,领导再次大腿一拍,想迁移到钉钉,于是想到了Taro。
Taro介绍
开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。
总而言之,就是一套代码,可以编译成多个平台的小程序代码。
而且支持自己拓展其他平台的编译插件。
对比
与Vue比较
采用vue进行开发时,大部分写法都是一致的,只有少数写法,Taro做了改变。
比如template里的元素,采用的是小程序的元素名称 div ---> view
元素的事件绑定
@click/v-on:click ---> @tap/v-on:tap
不支持
<style scoped>
<style scoped> ---> cssModules
生命周期 Taro 说明 onReady 小程序 onLoad 小程序 created Vue、小程序 mounted Vue beforeUpdate Vue updated Vue beforeUnmount Vue unmounted Vue、小程序(onUnload) onShow 小程序 onHide 小程序
与微信小程序的比较
项目配置项目配置根据平台不同配置不同的
project.XX.json
文件 尺寸
在 Taro 中尺寸单位建议使用
px
、
百分比 %
,Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写,即从设计稿上量的长度
100px
,那么尺寸书写就是
100px
,当转成微信小程序的时候,尺寸将默认转换为
100rpx
,当转成 H5 时将默认转换为以
rem
为单位的值 API
基本一致,只是
wx.XXX
变成
Taro.XXX
如果
全局变量
小程序是在app里配置
App<IAppOption>({
globalData: {
a: 123
}
})
使用时
var app = getApp();
app.globalData.xxx
Taro推荐是用Redux或者在某个目录下新建一个js文件,例如 global_data.js
,示例代码如下
const globalData = {}
export function set (key, val) {
globalData[key] = val
}
export function get (key) {
return globalData[key]
}
使用时
import { set as setGlobalData, get as getGlobalData } from './path/name/global_data'
setGlobalData('test', 1)
getGlobalData('test')
开发模式
创建Taro提供相应的
@tarojs/cli
用于创建Taro项目
运行
Taro项目在package.json配置好相应平台的执行命令,通过npm命令,编译成不同端的代码
"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt", // 字节小程序
"build:h5": "taro build --type h5", // H5
"build:rn": "taro build --type rn", // react native
"build:qq": "taro build --type qq", // QQ小程序
"build:jd": "taro build --type jd", // 京东小程序
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:jd": "npm run build:jd -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch"
},
查看、调试
使用相应平台的开发工具,查看效果和调试
不过遗憾的是,Taro不支持飞书小程序,折中的方案是采用编译成字节小程序。毕竟飞书字节一家亲嘛,API也查不到哪里去。但是现在大型APP那么多,各家都开创了一套属于自己的小程序,如果每家都支持,Taro需要投入的,真的很可观。
扩展
插件
于是乎,Taro引入插件的理念,自 v3.1.0
起,将每个小程序平台的兼容逻辑抽取出来,以插件形式注入Taro框架,用户也可以自己扩展相应的平台。
Taro使用原生模块
支持引用小程序原生组件,但同时失去转其他平台的能力
其它
飞书API vs 微信API
功能 微信 飞书 地理位置 stopLocationUpdate、startLocationUpdateBackground、startLocationUpdate、openLocation、onLocationChange、offLocationChange、getLocation、chooseLocation getLocation、openLocation、chooseLocation记忆光盘
southnan0
欲买桂花同载酒,终不似,少年游
southnan0
欲买桂花同载酒,终不似,少年游
宣传栏
目录
背景
领导大腿一拍,要从企业微信迁到飞书,已经上线或者开发中的应用,需要进行迁移工作量的评估。
为了预防哪一天,领导再次大腿一拍,想迁移到钉钉,于是想到了Taro。
Taro介绍
开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。
总而言之,就是一套代码,可以编译成多个平台的小程序代码。
而且支持自己拓展其他平台的编译插件。
对比
与Vue比较
采用vue进行开发时,大部分写法都是一致的,只有少数写法,Taro做了改变。
比如template里的元素,采用的是小程序的元素名称 div ---> view
元素的事件绑定
@click/v-on:click ---> @tap/v-on:tap
不支持
<style scoped>
<style scoped> ---> cssModules
生命周期 Taro 说明 onReady 小程序 onLoad 小程序 created Vue、小程序 mounted Vue beforeUpdate Vue updated Vue beforeUnmount Vue unmounted Vue、小程序(onUnload) onShow 小程序 onHide 小程序
与微信小程序的比较
项目配置项目配置根据平台不同配置不同的
project.XX.json
文件 尺寸
在 Taro 中尺寸单位建议使用
px
、
百分比 %
,Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写,即从设计稿上量的长度
100px
,那么尺寸书写就是
100px
,当转成微信小程序的时候,尺寸将默认转换为
100rpx
,当转成 H5 时将默认转换为以
rem
为单位的值 API
基本一致,只是
wx.XXX
变成
Taro.XXX
如果
全局变量
小程序是在app里配置
App<IAppOption>({
globalData: {
a: 123
}
})
使用时
var app = getApp();
app.globalData.xxx
Taro推荐是用Redux或者在某个目录下新建一个js文件,例如 global_data.js
,示例代码如下
const globalData = {}
export function set (key, val) {
globalData[key] = val
}
export function get (key) {
return globalData[key]
}
使用时
import { set as setGlobalData, get as getGlobalData } from './path/name/global_data'
setGlobalData('test', 1)
getGlobalData('test')
开发模式
创建Taro提供相应的
@tarojs/cli
用于创建Taro项目
运行
Taro项目在package.json配置好相应平台的执行命令,通过npm命令,编译成不同端的代码
"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt", // 字节小程序
"build:h5": "taro build --type h5", // H5
"build:rn": "taro build --type rn", // react native
"build:qq": "taro build --type qq", // QQ小程序
"build:jd": "taro build --type jd", // 京东小程序
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:jd": "npm run build:jd -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch"
},
查看、调试
使用相应平台的开发工具,查看效果和调试
不过遗憾的是,Taro不支持飞书小程序,折中的方案是采用编译成字节小程序。毕竟飞书字节一家亲嘛,API也查不到哪里去。但是现在大型APP那么多,各家都开创了一套属于自己的小程序,如果每家都支持,Taro需要投入的,真的很可观。
扩展
插件
于是乎,Taro引入插件的理念,自 v3.1.0
起,将每个小程序平台的兼容逻辑抽取出来,以插件形式注入Taro框架,用户也可以自己扩展相应的平台。
Taro使用原生模块
支持引用小程序原生组件,但同时失去转其他平台的能力