Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 / 快手 小程序 / H5 / RN 等应用。

现如今市面上端的形态多种多样，Web、React Native、微信小程序等各种端大行其道。当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

https://docs.taro.zone/docs/GETTING-STARTED

安装taro/cli

需要node版本>12.0.0

npm install @tarojs/cli -g

检查 taro 安装版本

npm info @tarojs/cli

初始化项目

taro init myApp

项目目录

├── __tests__
│   └── index.test.js
├── babel.config.js  # babel 语法兼容 es6转换es6
├── config           # webpack 配置文件
│   ├── dev.ts
│   ├── index.ts
│   └── prod.ts
├── env.development
├── env.production
├── jest.config.ts
├── package.json
├── pnpm-lock.yaml
├── project.config.json  # 小程序配置文件
├── project.tt.json  # 字节跳动小程序
├── src
│   ├── app.config.ts
│   ├── app.scss
│   ├── app.ts
│   ├── index.html
│   └── pages
│       └── index
│           ├── index.config.ts
│           ├── index.scss
│           └── index.tsx
├── tsconfig.json
└── types
    └── global.d.ts

开发规范

  • 遵循React组件JSX规范

  • 组件标签名遵循大驼峰命名

  • 接口(JS API) 将前缀wx替换为taro

  • 数据绑定及事件处理，同React规范

  • 建议使用flex布局，推荐使用px单位，内部使用postcss做了响应式单位转换，设计稿(750)!

配置文件

webpack打包编译

编译的配置文件位于，config目录中，一共有三个文件：

index.js(默认的配置文件)

dev.js(项目开发环境配置)

prod.js(项目生产环境配置)

常用的配置项

配置项 描述
projectName 项目的名称
date 项目创建时间
designWidth 设计稿尺寸
sourceRoot 项目源码目录
outputRoot 项目的打包目录
defineConstants 定义全局变量(DefinePlugin)
alias 配置路径别名
h5.webpackChain webpack配置

app.config.js全局配置

用于对小程序的全局配置，类似于微信小程序的app.json!

属性 类型 描述
pages StringArray 页面路径列表
window Object 全局的默认配置
tabBar Object 底部tab栏的配置
subPackages ObjectArray 分包解构配置 
export default defineAppConfig({
  pages: ["pages/about/about", "pages/index/index"],
  window: {
    backgroundTextStyle: "light",
    navigationBarBackgroundColor: "#fff",
    navigationBarTitleText: "WeChat",
    navigationBarTextStyle: "bl ack",
  },
});

pages 数组索引位置为0的元素为首页!

index.config.js 页面配置

每一个小程序页面都可以使用 .config.js 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖全局配置 app.config.json 的 window 中相同的配置项。

文件需要 export 一个默认对象，配置项遵循微信小程序规范，并且对所有平台进行统一。

export default definePageConfig({
  navigationBarTitleText: '首页'
})

project.xx.js 项目配置

项目配置文件，有多个，每一个配置文件都单独针对一个小程序进行适配，比如微信，支付宝，百度，字节跳动等!

app.js 入口文件