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

环境变量文件

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

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

TARO_APP_ID="xxxxxxxxxxxxxxxxxx"

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

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

"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 的值：

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

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 下的文件了。

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

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

}

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

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 提供了多个设计稿尺寸的换算规则，当前项目中已经设置了几种不同尺寸对应的换算比例。如下所示：

  // 设计稿尺寸换算规则
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 配置。

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

]

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

window

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

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

}

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

tabBar

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

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

}

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

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

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

页面的config.ts配置文件

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

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

})

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

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