多重影分身：一套代码如何生成多个小程序？

影分身之基础配置

影分身的能力，主要来源于 Taro 所提供的编译能力，所以需要对 Taro 的编译配置和编译配置详情有所了解。

我们先来看看配置的相关文件目录：

config 目录为 Taro 初始化后的默认配置目录，图中蓝色框框内的三个文件（dev、index、prod）为默认生成的配置文件，剩下的文件，则为分身所需的配置。图中配置了三个分身，我们以 channel1 为例，config 是该分身的一些配置，project.config.json 就是该分身小程序的基本配置，如：

{    "miniprogramRoot": "./",    "projectname": "channel1",    "description": "channel1",    "appid": "wx8888888888888",    ...}

channel.js 文件，则是用来指定，当前需要编译哪个小程序，如：



module.exports = {  channel: 'channel1'}

在默认的编译配置入口文件 index.js 中，我们需要配置小程序的输出目录，配置如下：

const channelInfo = require('./channel')const config = {    ...    // 输入目录为 dist_channel1    outputRoot: 'dist_' + channelInfo.channel,    ...    // 讲 config/channel1/project.config.json 文件拷贝到 dist_channel1 下    copy: {    patterns: [      {        from: 'config/' + channelInfo.channel + '/project.config.json',        to: 'dist_' + channelInfo.channel + '/project.config.json'      }    ],    ...    }    ...}

执行 Taro 的小程序编译命令后，将会生成该分身对应的小程序代码文件夹 dist_channel1，直接使用小程序开发者工具打开该目录，就可以进行 channel1 小程序的预览了。

通过这些配置，我们就可以通过同一套代码，生成多个不同的小程序啦！当然，这些小程序的内容是完全一样的，顶多就是 project.config.json 中配置的名字、appid 有不同而已。

那么下面，我们就开始看看如何实现生成多个有差异化的小程序。

在具体实现之前，我们需要知道 Taro 两个重要的配置：

• 全局变量 “defineConstants”；

• 别名 “alias”。

影分身之样式分身

首先，我们来看看最常见的一种需求，那就是不同小程序之间，样式上的差别。我们先来看两张图。

小程序 A：