Taro简介
Tora是由京东凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。
使用Taro，我可以写一套代码，通过Tora编译工具，将源代码可以编译出在不同端（微信小程序，H5，App端等）运行代码。
前言
这些记录仅供参考，本人也是刚开始接触这类东西(本人原生Android程序员一枚)，具体还是以官网为准，官网地址Taro。所有配置均在Mac环境下，如有不足之处，望指正~
环境配置及开发
- 配置node.js环境
去NodeJs官网下载即可 - 安装 Taro 开发工具 @tarojs/cli
使用 npm 或者 yarn 全局安装
$ npm install -g @tarojs/cli
#或
$ yarn global add @tarojs/cli
- 创建模板项目
$ taro init firstApp
- 进入目录开始开发，可以选择小程序预览模式或者H5预览模式。
用微信小程序预模式
1.需要下载微信开发者工具
2.开始编译(切换到工程目录根目录)执行如下命令
//npm script
$ npm run dev:weapp
// 仅限全局安装
$ taro build --type weapp --watch
H5编译预览模式
H5编译执行如下命令
# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
项目打包
- 打包小程序代码
# npm script
$ npm build dev:weapp
# 仅限全局安装
$ taro build --type weapp
- 打包H5代码
$ npm build dev:h5
# 仅限全局安装
$ taro build --type h5
目录结构
├── dist 编译结果目录
├── config 配置目录
| ├── dev.js 开发时配置
| ├── index.js 默认配置
| └── prod.js 打包时配置
├── src 源码目录
| ├── pages 页面文件目录
| | ├── index index页面目录
| | | ├── index.js index页面逻辑
| | | └── index.css index页面样式
| ├── asset 资源放置
| | └── images 用于放置资源图片等
| ├── components 用于放置自定义组件等
| ├── app.css 项目总通用样式
| └── app.js 项目入口文件
|
└── package.json
总结
以上就是Taro的环境配置，项目构建及项目打包的方式，以及整个工程的项目结构分解，此仅供参考~
