Taro v4框架开发微信小程序（配置）

环境变量文件

将 .env.dev 文件重命名为 .env.development，以及将 .env.prod 文件重命名为 .env.production，以适配环境配置。

为了演示如何使用环境变量，我们在 .env.development 文件中添加两个变量 TARO_APP_ID 和 TARO_APP_API，然后在源代码中读取这些变量的值。

ini 复制代码

TARO_APP_ID="xxxxxxxxxxxxxxxxxx"

TARO_APP_API="https://api.tarojs.com"

接下来需要在 project.config.json 文件中更新 appid 的值。因为上一章节中为了测试修改了这个值，现在我们需要把它改回原来的 appid：

json 复制代码

"appid": "touristappid",

在完成以上操作后，重新启动项目（使用命令 pnpm dev:weapp），控制台会显示相关的提示信息，并且可以看到 dist/project.config.json 文件中的 appid 已经变成了我们在 .env.development 文件中指定的 TARO_APP_ID 值。

为了在代码中使用环境变量，可以在 src/pages/index/index.tsx 文件的 useLoad 钩子中添加 console.log 语句来打印 TARO_APP_API 的值：

tsx 复制代码

console.log(process.env.TARO_APP_API)

这样做的结果是，当程序运行时，可以在微信开发者工具的控制台中看到 TARO_APP_API 环境变量的值被成功打印出来。

这里需要记得将环境变量的appid改为你正常使用的appid，否则小程序会报错。

之后运行程序，并在微信开发者工具中浏览：

需要注意的是，只有以 TARO_APP_ 开头的环境变量才会被 webpack 的 DefinePlugin 插件静态嵌入到客户端代码中。这是为了避免环境变量与系统内置变量冲突。在构建过程中，代码中的 process.env.TARO_APP_API 会被替换为实际的环境变量值。例如，我们在小程序开发者工具中查看编译后的代码，会看到 console.log(process.env.TARO_APP_API) 被替换成了 console.log("https://api.tarojs.com");。

编译配置

编译配置是 Taro 项目开发过程中重要的一部分，它决定了项目的编译行为。Taro 的编译配置主要存放在项目根目录下的 config 文件夹内，由 index.ts 文件统一导出。其中，index.ts 通过合并 dev.ts 和 prod.ts 来分别处理开发时的配置和构建时的生产配置。dev.js 适用于项目预览时的设置，而 prod.js 则适用于项目打包时的设置。

在 Taro 的编译配置中，可以设置项目名称、创建日期、设计稿尺寸、源码目录等基本配置信息。下面的代码片段展示了一部分编译配置的内容：

ts 复制代码

const config = {
  // 项目名称
  projectName: 'learn-taro-wxapp',
  // 项目创建日期
  date: '2024-3-11',
  // 设计稿尺寸
  designWidth: 750,
  // 设计稿尺寸换算规则
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    375: 2,
    828: 1.81 / 2
  },
  // 项目源码目录
  sourceRoot: 'src',
  // 项目产出目录
  outputRoot: 'dist',
  // Taro 插件配置
  plugins: [],
  // 全局变量设置
  defineConstants: {},
  // 文件 copy 配置
  copy: {
    patterns: [],
    options: {},
  },
  // 框架，react，nerv，vue, vue3 等
  framework: 'react',
  // 使用 webpack5 编译
  compiler: 'webpack5',
  cache: {
      enable: false // Webpack 持久化缓存配置，建议开启
  },
  // 小程序端专用配置
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {

        }
      },
      autoprefixer: {
        enable: true,
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]',
        },
      },
    },
    // 自定义 Webpack 配置
    webpackChain(chain) {
        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
    }
  },
  // H5 端专用配置
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]',
        },
      },
    },
    // 自定义 Webpack 配置
    webpackChain(chain, webpack) {},
    devServer: {},
  },
  rn: {
      appName: 'taroDemo',
      postcss: {
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        }
      }
    }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

在编译配置文件中，alias 被用来设置路径别名，避免在代码中书写过多的相对路径。在配置文件中，默认已经将 @ 设置为指向 src 目录，这样，在代码中就可以使用 @ 快捷引用 src 下的文件了。

我们还可以增加额外的配置，例如：

ts 复制代码

alias: {
  '@/components': path.resolve(__dirname, '..', 'src/components'),
}

使用 defineConstants 可以定义全局常量，例如，可以基于不同的环境设置不同的全局变量。

ts 复制代码

defineConstants: {
  __DEV__: JSON.stringify(process.env.NODE_ENV === 'development'),
  __PROD__: JSON.stringify(process.env.NODE_ENV === 'production')
}

等等... 如果想要查阅每个配置项的具体意义和用法，可以按住 Ctrl + 鼠标左键 点击属性名，跳转到 project.d.ts 类型声明文件中查看对应注释和示例代码。

designWidth 用于指定设计稿的宽度，这里设置的是 750px，这意味着使用的 UI 设计稿的宽度标准是 750px。Taro 提供了多个设计稿尺寸的换算规则，当前项目中已经设置了几种不同尺寸对应的换算比例。如下所示：

ts 复制代码

  // 设计稿尺寸换算规则
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    375: 2,
    828: 1.81 / 2
  },

对于 UI 设计师而言，推荐使用 750px 作为设计尺寸标准，它便于开发者使用 Taro 进行开发时，进行适配和转换。

对于更详细的编译配置，可以查询官方文档中的编译配置详情。

app.config.ts 通用配置文件

在 Taro 框架中，app.config.ts 是小程序的通用配置文件，其主要职责是定义小程序的页面及其全局属性。以下是针对 app.config.ts 文件中一些关键配置项的说明：

pages

pages 数组用于指明组成小程序的页面列表，每个元素都指向一个页面的路径加文件名，无需包含文件扩展名。由于 Taro 会自动处理寻找文件，这会带来方便。改变小程序页面结构时，如新增或删除页面，都应相应地更新 pages 配置。

ts 复制代码

pages: [
  'pages/index/index',
  'pages/other/other',
  // ... 其他页面路径
]

其中，数组中的第一个条目表示小程序的入口页面（首页）。

window

window 对象用于设置小程序的状态栏、导航条、标题和窗口背景色等界面表现。

ts 复制代码

window: {
  navigationBarBackgroundColor: '#ffffff',
  navigationBarTextStyle: 'black',
  backgroundColor: '#eeeeee',
  // ... 其他窗口属性
}

查看属性详细信息和支持程度，你可以通过按住 Ctrl + 鼠标左键 点击任意属性，跳转至 taro.config.d.ts 类型声明文件。支持程度不同的平台详细请查阅官方文档。

tabBar

对于包含多个 tab（在客户端窗口底部或顶部有 tab 栏切换页面的）的小程序，tabBar 配置用于定义 tab 栏的外观以及每个 tab 对应的页面。

ts 复制代码

tabBar: {
  color: "#434343",
  selectedColor: "#333333",
  // ... tabBar 属性和 tab 列表
}

tabBar 中的 list 属性是一个包含若干对象的数组，每个对象定义了一个 tab 项的页面路径、图标和文字等。点击 tab 时，应用会切换到对应的页面。

关于 tabBar 的更多详细配置项，也可以通过点击属性，跳转至 TypeScript 的类型声明文件中查看功能描述。

支持程度不同的平台详细请查阅官方文档

页面的config.ts配置文件

单个页面也可以有自己的配置文件，通常是 config.ts。页面配置会被 definePageConfig 函数包裹，并作为参数传入，其参数类型是 Taro.PageConfig。PageConfig 继承自 CommonConfig 类型。

ts 复制代码

export default definePageConfig({
  navigationBarTitleText: '页面标题'
})

project.config.json 微信小程序配置文件

除了 Taro 的配置外，微信小程序也需一个 project.config.json，这个配置文件包含了微信小程序的专有配置。关于此配置你可以参考微信小程序官方文档。