Taro 遵循React语法规范的多端开发解决方案
"Write-Once-Run-Anywhere"
Taro特性
- React 语法风格
- 快速开发微信小程序
- 支持多端开发转化
安装及使用:
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 (
<Index />
)
}
}
案例展示
一款基于 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 组件同时也可以指定小程序原生的组件。
安装与运行
首先需要全局安装 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语法重写或者混合开发，慢慢熟练以后，效率就能提高
![]()
理解万岁
