Taro学习笔记-coder-why
1. 创建项目
npm i -g @tarojs/cli
npm info @tarojs/cli
>taro init 01-base-taro
Taro 即将创建一个新项目!
Need help? Go and open issue: https://tls.jd.com/taro-issue-helper
? 请输入项目介绍 01-base-taro
? 请选择框架 (Use arrow keys)
❯ React
PReact
Vue3
Solid
? 是否需要使用 TypeScript ？ (Y/n)n
? 是否需要编译为 ES5 ？ No
? 请选择 CSS 预处 理器（Sass/Less/Stylus） (Use arrow keys)
❯ Sass
Less
Stylus
无
? 请选择包管理工具 (Use arrow keys)
❯ yarn
pnpm
npm
cnpm
? 请选择编译工具 (Use arrow keys)
❯ Webpack5
Vite
? 请选择模板源 (Use arrow keys)
❯ Gitee（最快）
Github（最新）
CLI 内置默认模板
自定义
社区优质模板源
❯ 默认模板
mobx
pwa
react-NutUI（NutUI + React 模板（https://nutui.jd.com/react/））
react-native
react-native-harmony
redux
(Move up and down to reveal more choices)
✔ 初始化 git 成功
执行安装项目依赖 yarn install, 需要一会儿...
yarn install v1.22.22
info No lockfile found.
[1/4] Resolving packages...
warning @tarojs/helper > @swc/register@0.1.10: Use @swc-node/register instead
...
[4/4] Building fresh packages...
success Saved lockfile.
$ husky
Done in 145.78s.
✔ 安装项目依赖成功
创建项目 01-base-taro 成功！
请进入项目目录 01-base-taro 开始工作吧！😝
(base) jiexu:002-coder-why-taro/ (master✗) $ cd 01-base-taro [20:56:14]
(base) jiexu:01-base-taro/ (master✗) $ yarn [21:00:14]
yarn install v1.22.22
[1/4] 🔍 Resolving packages...
success Already up-to-date.
$ husky
✨ Done in 0.84s.
1.1 项目运行
-
VSCODE需要安装插件：ESLint, Prettier
-
用H5打开
yarn dev:h5
- 小程序打开
yarn dev:weapp
1.1.1 编译运行
-
Taro编译 分为
dev和build模式- dev 模式(增加
--watch参数) 将会监听文件修改 - build模式(去掉
--watch参数) 将不会监听文件修改，并会对代码进行压缩打包
- dev 模式(增加
-
dev命令启动Taro项目的开发环境
pnpm run dev:h5启动H5端pnpm run dev:weapp启动小程序端
-
build命令可以把Taro代码编译成不同端的代码，然后再对应的开发工具中查看效果- H5直接在浏览器中可以查看效果
- 微信小程序需要在《微信开发工具》打开根目录下dist查看效果
- RN应用需要参考《React Native端开发流程》
1.1.2 项目目录结构
1.2 Taro+React开发规范
- 为了实现多端兼容，综合考虑编译速度，运行性能等因素，Taro约定了如下开发规范
- 页面文件遵循 React组件（JSX）规范
- 组件标签靠近小程序规范（但遵从大驼峰，并导包），详见Taro组件规范
- 接口能力（JS API）靠近小程序规范，但需要将前缀wx替换为Taro（需要导包），详见Taro接口规范
- 数据绑定及事件处理同React规范，同时补充了APP及页面的生命周期
- 为了兼容多端 运行，建议使用Flex布局进行开发，推荐使用px单位（750设计稿）
- 在React中使用Taro内置组件前，必须从
@tarojs/components进行引入 - 文档直接查看Taro的官网文档: https://docs.taro.zone/docs
1.3 webpack编译配置（config）
-
编译配置存放于项目根目录下的config目录中，包含三个文件：
- index.js 是通用配置
- dev.js 是项目开发时的配置
- prod.js 是项目生产环境时的配置
-
常用的配置
- projectName: 项目名称
- date: 项目创建时间
- designWidth: 设计稿尺寸
- sourceRoot: 项目源码目录
- outputRoot: 项目产出目录
- defineConstants: 定义全局的变量（DefinePlugin）
- alias: 配置路径别名
- h5:webpackChain: webpack配置
- h5:devServer: 开发者服务配置
1.3.1 定义常量
// config/index.js
defineConstants: {
VERSION: "'1.0.0'"
},
// .eslintrc
"globals": {
"definePageConfig": "readonly",
"defineAppConfig": "readonly",
"VERSION": "readonly"
}
// src/pages/index/index.jsx
console.log(VERSION)
1.3.2 alias
import path from 'path'
...
alias: {
"@": path.resolve(__dirname, '..', 'src'),
},