Taro - 一个开放式跨端开发框架，一套代码，多端适配

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>

简单上手一下吧！