学习背景：
- 多端构建，可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native 等）运行的代码
- 支持微信小程序转Taro
- 支持编译为RN，则是看中点
概念整理
安装
1
2
3
4
5
6
7
8
| # 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli
|
工程建立
1
2
3
4
| $ taro init <name>
$ yarn
|
工程运行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| $ 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
|
目录规范
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| ├── config 配置目录
| ├── dev.js 开发时配置
| ├── index.js 默认配置
| └── prod.js 打包时配置
├── src 源码目录
| ├── components 公共组件目录
| ├── pages 页面文件目录
| | ├── index index 页面目录
| | | ├── banner 页面 index 私有组件
| | | ├── index.js index 页面逻辑
| | | └── index.css index 页面样式
| ├── utils 公共方法库
| ├── app.css 项目总通用样式
| └── app.js 项目入口文件
└── package.json
|
命名规范
- 普通 JS/TS 文件以 .js 或者 .ts 作为文件后缀
- 组件，以 .jsx 或者 .tsx 作为文件后缀
代码书写,编译的局限性，需要慎重入坑避免耗费时间在无非的语法上，
- 不能在句末使用分号
1
2
| const a = 'a' // ✓ 正确
const a = 'a'; // ✗ 错误
|
- 字符串统一使用单引号
1
2
3
4
5
| console.log('hello there')
// 如果遇到需要转义的情况，请按如下三种写法书写
const x = 'hello "world"'
const y = 'hello \'world\''
const z = `hello 'world'`
|
- 关键字后面加空格
1
2
| if (condition) { ... } // ✓ 正确
if(condition) { ... } // ✗ 错误
|
- 函数声明时括号与函数名间加空格
1
2
3
4
5
| function name (arg) { ... } // ✓ 正确
function name(arg) { ... } // ✗ 错误
run(function () { ... }) // ✓ 正确
run(function() { ... }) // ✗ 错误
|
- 逗号后面加空格
1
2
3
4
5
6
| // ✓ 正确
const list = [1, 2, 3, 4]
function greet (name, options) { ... }
// ✗ 错误
const list = [1,2,3,4]
function greet (name,options) { ... }
|
参考
本文作者：前端analysis
版权声明： 本文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！
若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏
