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的环境配置,项目构建及项目打包的方式,以及整个工程的项目结构分解,此仅供参考~
网友评论