# farm-produce-mall-miniapp

**Repository Path**: woqiong/farm-produce-mall-miniapp

## Basic Information

- **Project Name**: farm-produce-mall-miniapp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-11
- **Last Updated**: 2025-04-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 开发环境
- node v18.18
- yarn

# 微信小程序开发打包命令
``` bash
$ yarn dev:weapp
$ yarn build:weapp
```

# 快速创建新页面
`Taro create --name [页面名称] --dir [路径] --subpkg [分包路径] ` 能够在当前项目的指定目录下快速生成新的页面文件，并填充基础代码，是一个提高开发效率的利器。taro 会尝试同步修改 app.config.js 配置文件中的 pages 或者 subPackages 字段。

``` bash
# 假设当前当前跟路径为 /project/root。
# 执行下面命令创建主包页面：
taro create cart --dir mydir
# 那么会在 /project/root/src/pages/mydir 目录下生成新的页面，并且在 app.config.js 中自动补齐 pages 字段。

# 执行下面命令创建分包页面：
taro create order --subpkg mysubpages
# 那么会在 /project/root/src/mysubpages 目录下生成新的页面，并且在 app.config.js 中自动补齐 subPackages 字段。
```

# 模式和环境变量

默认情况下, 模式 Taro cli 有 2 个模式，默认情况下 **模式** 的值，取决于 `NODE_ENV` 的值（但是反过来说模式的值无法改变 NODE_ENV 的值）。

- `development` 模式用于开发时 `taro build --type weapp --watch`，它等价于 `taro build --type weapp --watch --mode development`
- `production` 模式用于生产时 `taro build --type weapp`， ，它等价于 `taro build --type weapp --mode production`
- 只有以 `TARO_APP_` 开头的变量将通过 `webpack.DefinePlugin` 静态地嵌入到客户端侧的代码中。这是为了避免和系统内置环境变量冲突。
- 环境文件加载优先级：.env 在所有的环境中被载入。为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
- .env 环境文件是通过运行 taro 命令载入的，因此环境文件发生变化，你需要重启服务。



# 多端差异化逻辑
可以使用 `process.env.TARO_ENV` 变量作条件判断来实现。取值为: `weapp / swan / alipay / tt / qq / jd / h5 / rn`

**1. 在微信小程序和 H5 端分别引用不同资源**
``` js
/** 源码 */
if (process.env.TARO_ENV === 'weapp') {
  require('path/to/weapp/name')
} else if (process.env.TARO_ENV === 'h5') {
  require('path/to/h5/name')
}

/** 编译后（微信小程序）*/
if (true) {
  require('path/to/weapp/name')
}
/** 编译后（H5）*/
if (true) {
  require('path/to/h5/name')
}
```

**2. 决定不同端要加载的组件**
``` jsx
/** 源码（React JSX） */
<View>
  {process.env.TARO_ENV === 'weapp' && <ScrollViewWeapp />}
  {process.env.TARO_ENV === 'h5' && <ScrollViewH5 />}
</View>

/** 编译后（微信小程序）*/
<View>
  {true && <ScrollViewWeapp />}
</View>
/** 编译后（H5）*/
<View>
  {true && <ScrollViewH5 />}
</View>
```

**不要解构 process.env 来获取环境变量**
``` js
// 请直接以完整书写的方式（process.env.TARO_ENV）来进行使用。
// 正确写法
if (process.env.TARO_ENV === 'weapp') {
}
// 错误写法
const { TARO_ENV = 'weapp' } = process.env
if (TARO_ENV === 'weapp') {
}
```








# 项目目录结构
``` bash
├── dist                        编译结果目录
|
├── config                      项目编译配置目录
|   ├── index.js                默认配置
|   ├── dev.js                  开发环境配置
|   └── prod.js                 生产环境配置
|
├── src                         源码目录
|   ├── pages                   页面文件目录
|   |   └── index               index 页面目录
|   |       ├── index.js        index 页面逻辑
|   |       ├── index.css       index 页面样式
|   |       └── index.config.js index 页面配置
|   |
|   ├── app.js                  项目入口文件
|   ├── app.css                 项目总通用样式
|   └── app.config.js           项目入口配置
|
├── project.config.json         微信小程序项目配置 project.config.json
├── project.tt.json             抖音小程序项目配置 project.tt.json
├── project.swan.json           百度小程序项目配置 project.swan.json
├── project.qq.json             QQ 小程序项目配置 project.qq.json
|
├── babel.config.js             Babel 配置
├── tsconfig.json               TypeScript 配置
├── .eslintrc                   ESLint 配置
|
└── package.json
```

# 编译配置

用于配置 Taro 项目的编译行为、修改 Webpack 配置等，详情请参考编译配置和编译配置详情。

``` bash
└── config                      项目编译配置目录
    ├── index.js                默认配置
    ├── dev.js                  开发环境配置
    └── prod.js                 生产环境配置
```