Taro

Taro 遵循React语法规范的多端开发解决方案

---

"Write-Once-Run-Anywhere"

Taro特性

1. React 语法风格
2. 快速开发微信小程序
3. 支持多端开发转化

安装及使用:

1.安装 Taro 开发工具 @tarojs/cli

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

2.使用命令创建模板项目

$ taro init myApp

3.在创建完项目之后，Taro 会默认开始安装项目所需要的依赖，安装使用的工具按照 yarn>cnpm>npm 顺序进行检测，一般来说，依赖安装会比较顺利，但某些情况下可能会安装失败，这时候你可以在项目目录下自己使用安装命令进行安装

# 使用 yarn 安装依赖
$ yarn
# OR 使用 cnpm 安装依赖
$ cnpm install
# OR 使用 npm 安装依赖
$ npm install

微信小程序 开发&打包使用

# yarn
$ yarn dev:weapp
$ yarn build:weapp
# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp
# npx 用户也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp

H5 开发&打包使用

# yarn
$ yarn dev:h5
$ yarn build:h5
# npm script
$ npm run dev:h5
$ npm run build:h5
# 仅限全局安装
$ taro build --type h5 --watch
$ taro build --type h5
# npx 用户也可以使用
$ npx taro build --type h5 --watch
$ npx taro build --type h5

框架

1.项目目录结构

├── dist                   编译结果目录
├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── pages              页面文件目录
|   |   ├── index          index 页面目录
|   |   |   ├── index.js   index 页面逻辑
|   |   |   └── index.css  index 页面样式
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json           注：微信小程序会多一个配置文件，project.config.json

2.一个普通的入口文件示例如下

import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index'

import './app.scss'

class App extends Component {
  // 项目配置
  config = {
    pages: [
      'pages/index/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }
  /**页面生命周期与小程序页面生命周期对应关系: componentWillMount ==> onLoad */
  componentWillMount () {}

  /**componentDidMount  ==> onReady */
  componentDidMount () {}

  /**componentWillUnmount ==> onUnload */
  componentWillUnmount () { }

  /**componentDidShow ==> onShow */
  componentDidShow () {}

  /**componentDidHide ==> onHide */
  componentDidHide () {}

  render () {
    return (
      
    )
  }
}

案例展示

---

一款基于 Taro 框架开发的多端 UI 组件库

安装 Taro UI

$ npm install taro-ui

$ yarn add taro-ui

配置需要额外编译的源码模块:

注：由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules，在 taro 项目的 config/index.js 中新增如下配置项：

h5: {
  esnextModules: ['taro-ui']
}

使用 Taro UI
引入所需组件

// page.js
import { AtButton } from 'taro-ui'
// 除了引入所需的组件，还需要手动引入组件样式
// app.js
import 'taro-ui/dist/style/index.scss' // 全局引入一次即可

自定义主题

目前支持三种自定义主题的方式，可以进行不同程度的样式自定义：

• SCSS 变量覆盖
• globalClass 全局样式类
• 配置 customStyle 属性（仅有部分组件支持，请查看组件文档，不建议使用）

SCSS 主题变量覆盖：
1.本地代码中的scss文件添加以下代码：

/* 改变主题变量，具体变量名可查看 taro-ui/dist/style/variables/default.scss 文件 */
$color-brand: #6190E8;
/* 引入 Taro UI 默认样式 */
@import "~taro-ui/dist/style/index.scss";

覆写的变量，需要在引入 taro ui 默认样式之前定义

2.之后在项目文件中引入自己的样式文件即可（无需重复引入组件的默认样式）

---

Taro 代码与小程序代码混写

Taro 项目 支持 Taro 的代码与小程序（微信/百度/支付宝/字节跳动）原生的页面、组件代码混合存在，只需要将原生的页面、组件代码放入 src 目录下，随后在 入口文件 app.js 中定义好 pages 配置指向对应的原生的页面即可，在原生页面的配置中，你可以通过 usingComponents 来定义需要引入的组件，这里可以指定 Taro 组件同时也可以指定小程序原生的组件。

github地址： https://github.com/NervJS/taro-sample-weapp

安装与运行
首先需要全局安装 cli 开发工具 @tarojs/cli

$ npm i -g @tarojs/cli

$ yarn global add @tarojs/cli

然后执行如下命令，运行完后打开微信开发者工具，选择项目根目录进行预览

$ taro build --type weapp --watch

兼容性修改

1.如果你希望部分 px 单位不被转换成 rpx 或者 rem ，最简单的做法就是在 px 单位中增加一个大写字母，例如 Px 或者 PX 这样，则会被转换插件忽略

---

微信小程序转 Taro

Taro 可以将你的原生微信小程序应用转换为 Taro 代码，进而你可以通过 taro build 的命令将 Taro 代码转换为对应平台的代码，或者对转换后的 Taro 代码进行用 React 的方式进行二次开发。
微信原生小程序转 Taro 的操作非常简单，首先必须安装使用 npm i -g @tarojs/cli 安装 Taro 命令行工具，其次在命令行中定位到小程序项目的根目录，根目录中运行：

$ taro convert

即可完成转换。转换后的代码保存在根目录下的 taroConvert 文件夹下。你需要定位到 taroConvert 目录执行 npm install 命令之后就可以使用 taro build 命令编译到对应平台的代码。

目前只能支持转换使用原生微信小程序开发的应用。
如果要想把原生的代码大块编译成Taro，然后再分别编译成对应平台的代码，会导致报错无法追查，对于后期维护迭代也不是很容易，所以目前的解决方案以小逻辑块为单位，以taro语法重写或者混合开发，慢慢熟练以后，效率就能提高

理解万岁