taro是干嘛的?
先来看官方简介,Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。
现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道。当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
简而言之就是当我们的某个业务需要在不同终端上线或展示的时候,为了效率更高,我们只需要写一套代码,就可以使它编译适配到多端,极大的节省了我们的开发时间提升开发效率,也就是同一套代码,可以在多端适配,这就是taro。
目前官方支持转换的平台有H5、ReactNative、以及小程序平台(微信小程序、京东小程序、百度只能小程序、支付宝小程序、抖音小程序、QQ小程序、钉钉小程序、企业微信小程序、支付宝IOT小程序、飞书小程序),并支持React / Vue / Vue3 / Nerv 开发。
使用taro
taro基于node,请确保已安装node环境(node版本 >= 12.0.0)
安装cli工具
安装
使用 npm 安装
npm install -g @tarojs/cli
使用 yarn 安装
$ yarn global add @tarojs/cli
使用 cnpm 安装
cnpm install -g @tarojs/cli
查看taro 全部版本信息
npm info @tarojs/cli
项目初始化
taro init myApp
启动or编译
常用端,以npm为例:
// H5
npm run dev:h5
npm run build:h5
// 微信小程序
npm run dev:weapp
npm run build:weapp
// 百度小程序
npm run dev:swan
npm run build:swan
// 支付宝小程序
npm run dev:alipay
npm run build:alipay
// 抖音小程序
npm run dev:tt
npm run build:tt
// QQ小程序
npm run dev:qq
npm run build:qq
// 京东小程序
npm run dev:jd
npm run build:jd
启动,以微信小程序为例:npm run dev:weapp
编译,以微信小程序为例:npm run build:weapp
React开发
页面组件和路由配置
taro3开发中使用的是真实React,所以React的API都要从React包中获取,Taro中可以使用小程序规范的内置组件进行开发,如 <View>
、<Text>
、<Button>
等,从@tarojs/components引入,并且taro遵循小程序路由规范,引入了入口组件和页面组件的概念,分别对应入口app以及page。
路由跳转
Taro.navigateTo(option)
保留当前页面,跳转到APP内的某个页面,但是不能跳到顶层页面(tabbar页面)。使用 Taro.navigateBack返回原页面。
import Taro from '@tarojs/taro';
// 跳转回调
const goDetail = (param) => {
Taro.navigateTo({
url:`/pages/detail/detail?name=${param}`
});
}
// 被跳转页面获取路由参数
import Taro, { useRouter } from '@tarojs/taro';
// 组件内拿值
const local = useRouter();
console.log(local.params.name);
Taro.switchTab(option)
跳转到顶层页面(tabbar页面),并关闭其他所有非tabBar页面。
Taro.navigateBack(option)
关闭当前页面,返回上一个页面或多个页面。通过getCurrentPages获取当前的页面层级。option项中delta代表需要返回的页面层数,若delta大于当前页面总层数,则返回首页。
发起请求
Taro.request(option)
option常用配置项:
url(接口地址),data(请求体数据,json数据),method(请求方法,GET、POST等),header(请求头配置,content-type
默认为application/json
),timeout(超时时间),success(成功回调),fail(失败回调)。
// taro原生API请求
Taro.request({
method: 'POST',
url: testBaseUrl + "/setApi/",
data: {
user:"admin",
pass:123
},
header: {
'content-type': 'application/json' // 默认值
},
success:function(res){
console.log(res.data);
}
})
// 或进行简单封装导出使用
const detailApi = (params) => {
// 构造请求配置
const config = {
method: 'POST',
url: testBaseUrl + "/setApi/",
data: params,
header: {
'content-type': 'application/json' // 默认值
}
};
return Taro.request(config);
}
export default detailApi;
// 引用接口
import detailApi from '../../api/detailApi';
// 组件内回调
const setName = () => {
const resName = nameRef.current.value;
detailApi({ user: local.params.name, pass: 123}).then(res => {
console.log(res);
})
}
// HTML部分
<Button onClick={setName}>提交</Button>
简单上手一下吧!