《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的 Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。
项目背景
现如今市面上端的形态多种多样，Web、React Native、微信小程序等各种端大行其道。当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
安装及使用
Taro 项目基于 node，请确保已具备较新的 node 环境（>=12.0.0），推荐使用 node 版本管理工具 nvm 来管理 node，这样不仅可以很方便地切换 node 版本，而且全局安装的时候也不用加 sudo 了。
CLI 工具安装
首先，你需要使用 npm 或者 yarn 全局安装 @tarojs/cli，或者直接使用 npx:
# 使用 npm 安装 CLI$ npm install -g @tarojs/cli# OR 使用 yarn 安装 CLI$ yarn global add @tarojs/cli# OR 安装了 cnpm，使用 cnpm 安装 CLI$ cnpm install -g @tarojs/cli
可以使用 npm info 查看 Taro 版本信息，在这里你可以看到当前最新版本
npm info @tarojs/cli
项目初始化
使用命令创建模板项目：
$ taro init myApp
npm 5.2+ 也可以在不全局安装的情况下使用 npx 创建模板项目：
$ npx @tarojs/cli init myApp
在创建完项目之后，Taro 会默认开始安装项目所需要的依赖，安装使用的工具按照 yarn > cnpm > npm 顺序进行检测。一般来说，依赖安装会比较顺利，但某些情况下可能会安装失败，这时候你可以在项目目录下自己使用安装命令进行安装：
# 进入项目根目录$ cd myApp# 使用 yarn 安装依赖$ yarn# OR 使用 cnpm 安装依赖$ cnpm install# OR 使用 npm 安装依赖$ npm install
编译运行
使用 Taro 的 build 命令可以把 Taro 代码编译成不同端的代码，然后在对应的开发工具中查看效果。
Taro 编译分为 dev 和 build 模式：
dev 模式（增加 --watch 参数） 将会监听文件修改。build 模式（去掉 --watch 参数） 将不会监听文件修改，并会对代码进行压缩打包。dev 模式生成的文件较大，设置环境变量 NODE_ENV 为 production 可以开启压缩，方便预览，但编译速度会下降。举例字节小程序：
编译命令
# yarn$ yarn dev:tt$ yarn build:tt# npm script$ npm run dev:tt$ npm run build:tt# 仅限全局安装$ taro build --type tt --watch$ taro build --type tt# npx 用户也可以使用$ npx taro build --type tt --watch$ npx taro build --type tt# watch 同时开启压缩$ set NODE_ENV=production && taro build --type tt --watch # Windows$ NODE_ENV=production taro build --type tt --watch # Mac
小程序开发者工具
下载并打开字节跳动小程序开发者工具，并确保已经设置了小程序项目配置文件 project.tt.json。然后选择项目根目录下 dist 目录（根目录 config 中的 outputRoot 设置的目录）进行预览。
需要注意开发者工具的项目设置：
需要关闭 ES6 转 ES5 功能，开启可能报错需要关闭上传代码时样式自动补全，开启可能报错需要关闭代码压缩上传，开启可能报错项目进阶与优化
CSS 工具
在 Taro 中，我们可以自由地使用 CSS 预处理器和后处理器，使用的方法也非常简单，只要在编译配置添加相关的插件即可：
const config = { projectName: 'v2ex', date: '2018-8-3', designWidth: 750, sourceRoot: 'src', outputRoot: 'dist', plugins: [ '@tarojs/plugin-sass', // 使用 Sass // '@tarojs/plugin-less', // 使用 Less // '@tarojs/plugin-stylus', // 使用 Stylus ], defineConstants: { }, mini: { }, h5: { publicPath: '/', staticDirectory: 'static', module: { postcss: { autoprefixer: { enable: true } } } }}module.exports = function (merge) { if (process.env.NODE_ENV === 'development') { return merge({}, config, require('./dev')) } return merge({}, config, require('./prod'))}
多端开发
在某些情况下，不同平台的表现或业务逻辑有质的不同。在这样的情况下我们是没有办法做到「一套代码走天下」的。
例如我们正在实现 V2EX 论坛应用，当前的 API 没有办法在浏览器中跨域调用，因此我们需要在 H5 端使用另一份 API。我们可以通过内置环境变量来解决：
- import api from '../../utils/api'// 我们可以根据不同的平台，引入不同的 API+ let api+ if (process.env.TARO_ENV === 'weapp') {+ api = require('../../utils/api-weapp')+ } else if (process.env.TARO_ENV === 'h5') {+ api = require('../../utils/api-h5')+ }
Taro 还提供了统一接口的多端文件，通过不同的命名方式寻找依赖，在这类情况下，我们可以保留：
import api from '../../utils/api'
语句原封不动，修改我们的文件结构，在文件名和后缀名之间加上平台的名字：
.└── utils ├── api.h5.js ├── api.weapp.js └── index.js
了解更多：https://github.com/NervJS/taro
版权声明：本文转载于今日头条，版权归作者所有，如果侵权，请联系本站编辑删除