摘要：这篇文章主要的目的是分享一个可与后端接口通信的自动化脚本插件，实现不同环境下可打包成不同配置的微信小程序源码。全程靠命令行自动发起请求、修改配置文件、自动编译，解放双手不是梦！

看官在阅读文章前可以思考这样一个场景：有一份代码需要支持本地环境、测试环境和线上环境，每种环境下appId、title、cdn等一些关键信息各不相同。且有的环境下底部tabBar数量为5个，有的环境下底部tabBar数量为4个，有的环境下需要开启直播入口，有的环境下需要关闭直播入口......。

怎么样，看这需求是不是有点儿眼熟？乍一看好像在前面两篇文章中就给出过答案，但细看好像又有些不一样。

如果是你，你又会怎么做呢？

上面的需求看似有点儿扯，但对于sass平台来说，这些配置只是刚刚起步而已！

随着项目需求变动，之前的方法仍然难以满足需求。我们或许在打包前还要与后端接口进行通信，做到动态生成配置文件才能满足开发需求。而这篇文章正有此意，艺灵强烈建议看官在阅读完前面写的两篇文章的基础上再往下看，避免像丈二的和尚一样。相关文章分别是：
《uni-app跨端开发微信小程序之HBuilderX项目实现多环境开发》、
《uni-app跨端开发微信小程序之手把手带你写一个用程序自动打开微信开发者工具的小插件》

本文主要以动态配置直播权限为例，向看官完整的展示如何在node.js中与后端通信，在通信成功后动态修改app.json。只要看官掌握了这个技能，后面再有什么变态需求，需要根据后端接口动态改配置什么的，那都不是事儿！

一、HBuilderX中如何配置小程序插件

正常开发情况下，我们需要在 manifest.json 文件中手动添加微信小程序插件相关的代码。详情请访问官方文档，戳我访问官方文档，相关代码如下：

// 微信小程序
"mp-weixin": {
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "wxidxxxxxxxxxxxxxxxx"
    }
  }
}

1.1、直播插件的配置

由于我们要引入直播插件，所以我们要修改一下上面的代码。修改后见下方：

// 微信小程序
"mp-weixin": {
  "plugins": {
    "live-player-plugin": {
        "version": "1.3.0", // 注意填写该直播组件最新版本号，微信开发者工具调试时可获取最新版本号（复制时请去掉注释）
        "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid，该示例值即为直播组件appid（复制时请去掉注释）
    }
  }
}

上面这段代码来自微信官方，戳我访问官方文档。通过阅读文档得知，这段代码最终会出现在项目根目录的 app.json 中。

1.2、启动项目看编译后的文件

现在打开HBuilderX并运行项目，当项目正常运行后切换到编译目录unpackage/dist/dev/mp-weixin，打开 app.json 文件可以看到在 manifest.json 配置过的直播代码。如图：在app.json中配置直播插件.png

也就是说，我们在写自动化脚本的时候，不需要修改 manifest.json ，直接修改打包后的 app.json 文件就可以了。

二、node.js中发起请求与后端接口通信的完整案例

2.1、修改package.json并新增打包命令

由于我们只需要在打包上线时才请求接口修改配置文件，所以应该与日常开发的命令分开来，毕竟上线的是个阉割版嘛！

来到项目根目录并打开 package.json 这个文件，在"build:mp-weixin"下面新增三行代码。至于为什么是三行，是因为我们的项目有3个不同的环境，看官在实际应该过程中应该根据自己公司的项目而定。相关代码如下：

...
  "build:mp-weixin-test": "cross-env NODE_ENV=test UNI_PLATFORM=mp-weixin SEND_REQUEST=true ./openDevTools.js", // 打包测试版(复制后请删除注释)
  "build:mp-weixin-pre": "cross-env NODE_ENV=pre UNI_PLATFORM=mp-weixin SEND_REQUEST=true ./openDevTools.js", // 打包预上线版(复制后请删除注释)
  "build:mp-weixin-prod": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin SEND_REQUEST=false ./openDevTools.js", // 打包正式版(复制后请删除注释)
  ...

需要注意一下下，这里我们新增了一个名为SEND_REQUEST的变量，字面意思很直白，就是发送请求的意思。下面说下如何调用这个自定义的变量，代码如下：

// 万能公式 process.env. + 变量名
console.log('读取自定义的变量名 = ', process.env.SEND_REQUEST)

现在，我们已经能够轻松的读取到了SEND_REQUEST这个变量，命名的话看官随意，但必须与调用时保持一致！

打包命令已经加好了，接下来说说如何在 node.js 中发起一个请求。

在 node.js 中发起请求的话需要用到 request 库，这个是自带的，不用安装就能用。看官也可以安装 axios 等自己熟悉的，此处不做过多介绍。为了方便后续还要请求别的接口，我们封装一个名为 requestApi 的方法，传递三个参数，分别是： url 、 fail 、 success 。参数皆字面意思通俗易懂，相关代码见下方。

2.2、封装一个请求方法，方便调用

...... // 之前的一些代码
const request = require('request')
/**
 * @author: yilingsj（315800015@qq.com）
 * @description: 封装请求
 * @param {String} url 请求地址
 * @param {Function} fail 失败回调
 * @param {Function} success 成功回调
 * @return {*}
 * @Date: 2021-05-22 17:27:42
 */
function requestApi({ url, fail, success } = {}) {
  if (!url) {
    shell.echo('url不能为空')
    shell.exit()
  }
  request(url, { json: true }, (err, res, body) => {
    // 请求异常时
    if (err) {
      fail && fail(err)
      return
    }
    // 请求成功时
    if (body.code === 200) {
      success && success(body.data)
    }
  })
}

2.3、请求接口并修改app.json配置文件

上面封装了请求的方法，然后我们只需要在项目编译结束后请求接口，在接口返回数据后，通过相应的参数来动态修改 app.json 即可。相关代码如下：

...... // 之前的一些代码
const APP_JSON = path.resolve(WEIXIN_PRESET_PATH, './app.json') // 获取app.json文件
const SEND_REQUEST = process.env.SEND_REQUEST // 获取自定义变量，判断是否要发起请求
const url = GLOBALCONFIG.VUE_APP_BASE_API + '/api/setting/xxx' // 请求后端接口，获取一些配置信息，（复制后请修改成自己的）
if (SEND_REQUEST === 'true') {
  requestApi({
    url: url,
    success: (res) => {
      // 有直播权限时动态配置直播的appid和修改app.json文件
      if (res.live) {
        const APP_JSON_CONFIG = JSON.parse(fs.readFileSync(APP_JSON).toString())
        // 动态添加直播插件相关的代码
        APP_JSON_CONFIG.plugins = {
          'live-player-plugin': {
            version: res.LIVE_VERSION || '1.0.0',
            provider: res.LIVE_PROVIDER || 'wx2b03c6e691cd7370'
          }
        }
        const writeFileStrAppJson = JSON.stringify(APP_JSON_CONFIG, null, '\t')
        fs.writeFileSync(APP_JSON, writeFileStrAppJson)
      }
    }
  })
}
...... // 之前的一些代码

2.4、执行打包命令见证奇迹

接下来就是见证奇迹的时刻了，我们在终端窗口中输入npm run build:mp-weixin-test并回车，稍等片刻便会自动打开微信开发者工具，此时通过查看app.json文件，会发现我们的修改已经生效了。

同理，如果需要打包预上线版，只需要输入npm run build:mp-weixin-pre并回车即可。直播相关的版本号version及provider均由接口返回，麻麻再也不用担心我需要手动改配置了。

三、总结

最后做下总结吧，本文思路如下：
1、查看微信官方文档，了解添加直播插件的代码在哪个配置文件中；
2、修改package.json文件并新增不同环境下的打包命令；
3、在脚本中使用request库发起http请求，与后端相关接口进行通信；
4、通信成功后根据第2步的命令来判断是否需要进入添加直播插件的判断中；
5、执行命令npm run build:xxx ，根据不同环境来打包项目。

四、源码下载

为了方便看官研究代码，艺灵已经将相关文件打包到了网站上，有需要的看官可以点击右侧链接进行免费下载→→
本站下载：[源码]uni-app跨端开发微信小程序之nodejs与后端通信并动态打包项目以适应多环境开发.zip、
github下载：分支：dev-uni-app-vue-cli-nodejs-20210523

五、动态配置底部导航栏tabBar

如果项目中需要根据不同环境配置不同的底部导航栏tabBar的话，上面的方法同样适用。但用这种方法修改底部导航栏有一个弊端，那就是：每次修改底部导航栏时都需要到微信开发者平台中发布一版新的才能生效。如果想做到只发版一次，然后任意修改底部导航栏的话就不能在打包时把tabBar打包到配置项了，而应该在页面中通过请求接口来实现自定义的tabBar。

关于自定义的tabBar的坑及问题比较多，有兴趣的看官可以期待下一篇文章《uni-app跨端开发微信小程序之动态配置自定义tabBar那点儿坑》(预计6.1儿童节前一天发布)

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2021-05-22/uni-app-vue-cli-nodejs-request.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。