taro跨端开发

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

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

安装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(项目生产环境配置)

常用的配置项

app.config.js全局配置

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

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 入口文件