《开源精选》是我们分享Github、Gitee等开源社区的优质项目的专栏，内容包括技术、学习、实用以及各种有趣的内容。本期太郎推荐支持您使用React/Vue/Nerv等框架开发微信/京东/百度/支付宝/字节跳动/QQ/飞书小程序/H5/RN，开放的跨端跨框架解决方案。和其他应用程序。
项目背景
目前，市场上高端形式多样，Web、React Native、微信小程序等各种端端非常受欢迎。如果你的业务需求需要同时在不同设备上实现性能，那么为不同设备编写多套代码的成本显然是非常高的。此时，非常需要编写一套代码并使其适应多种设备的能力。
安装及使用
Taro项目是基于节点的。请使用新的节点环境（=12.0.0）。这不仅可以更轻松地在节点之间切换，而且我们还建议使用节点版本控制工具nvm。除了更改节点版本外，还可以实现全局安装。无需添加sudo。
安装CLI 工具
首先，需要使用npm或Yarn全局安装@tarojs/cli，或者直接使用npx:
# 使用npm 安装CLI $ npm install -g @tarojs/cli# 或者使用yarn 安装CLI $yarn global add @tarojs/cli# 或者安装cnpm 和cnpm 使用$ cnpm install -g @tarojs/cli 安装CLI 你可以使用npm信息。显示Taro 版本信息。您可以在此处查看最新版本。
npm info @tarojs/cli 初始化项目
使用以下命令创建模板项目：
$ taro init myAppnpm 5.2+ 您还可以使用npx 创建模板项目，而无需全局安装。
$ npx @tarojs/cli init myApp 创建项目后，Taro 默认开始安装项目所需的依赖项。按照以下顺序检测安装所使用的工具：yarn cnpm npm。一般来说，安装依赖项会很顺利，但在某些情况下可能会安装失败。在这种情况下，您可以使用项目目录中的install 命令自行安装。
# 进入项目根目录$ cd myApp # 使用yarn安装依赖$yarn # 或者使用cnpm安装依赖$ cnpm install # 或者使用npm 使用$ npm install安装依赖并编译运行
您可以使用Taro的build命令将Taro代码编译成各种最终代码并使用相应的开发工具查看效果。
Taro编译分为开发模式和构建模式。
开发模式（添加--watch 参数）监视文件的更改。在构建模式下（删除--watch 参数），不会监视文件的更改，并且代码会被压缩和打包。开发模式下生成的文件很大。在生产中设置环境变量NODE_ENV 可以进行压缩，以便于预览，但代价是编译速度较慢。字节小程序示例：
编译命令
#yarn$yarndev:tt$yarnbuild:tt#npmscript$npmrundev:tt$npmrunbuild: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=生产taro build --type tt --watch # Windows$ NODE_ENV=生产taro build --type tt --watch # Mac Applet 开发工具
下载并打开字节跳动小程序开发者工具，验证小程序项目配置文件project.tt.json是否已设置。接下来选择项目根目录下的dist目录（根目录配置中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', //减少使用//'@tarojs/plugin-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 还为多端文件提供了统一的接口，用于通过不同的命名方式查找依赖关系。
来自“././utils/api”语句的导入API 保持不变，并更改文件结构以在文件名和后缀之间添加平台名称。
. utils api.h5.js api.weapp.js Index.js 详情：https://github.com/NervJS/taro
版权声明：本文由今日头条转载，如有侵犯您的版权，请联系本站编辑删除。