uni-app动态配置manifest.json

前言

由于公司项目中使用了uni-app开发了一套小程序，但是这套小程序分为了开发测试版和线上版，于是乎就有了两个appid。每次更新发布到线上都要去改appid，所以我考虑这个appid 是不是可以根据环境来进行动态配置呢？

实现

在manifest.json 同级目录下新建modifyManifest.js文件，然后通过node的fs模块对manifest文件进行读取、写入操作。

const fs = require('fs')
const envDev = require("../env.dev"); //development配置信息
const envPrd = require("../env.prd"); //production配置信息

fs.readFile(`${__dirname}/manifest.json`,
    function(err, data) {
        if (err) {
            console.error(err);
        } else {
            var _data = JSON.parse(data.toString())
            _data['mp-weixin'].appid = VUE_APP_WX_APPID;
            
            _data = JSON.stringify(_data);
            // 写入
            fs.writeFile(`${__dirname}/manifest.json`, _data, {
                encoding: "utf-8"
            }, function(err) {
                if (err) {
                        console.log('写入失败', err);
                } else {
                        console.log('写入成功');
                }
            });
        }
    })

fs.readFile 读取的json 文件中不能有注释，读取成功的返回值是buffer（二进制）数据，想获得原字符串内容需要用toString()转换一下

env.dev.js 和 env.prd.js 文件，两个文件同在项目根目录下，根据实际开发配置。

module.exports = {
    VUE_APP_REMOTE_HOST: 'apixxxxxxxx.com',
    VUE_APP_WX_APPID: 'wxxxxxxxxx1234',
}

最后，在package.json修改启动命令：

"build:mp-weixin": "cross-env NODE_ENV=production node src/modifyManifest.js &&  cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",

我目前的项目是cli 脚手架创建的，可能会和大家的启动命令不一样。关键是要在NODE_ENV=production 确定了环境变量之后node src/modifyManifest.js 不要忘记 &&。

我这里只配置了生产环境的 wx启动命令。小程序打包准备提审时，就不能直接点击HBuilder 导航栏的发行->小程序-微信快捷方式了，需要点击运行到终端 选择或在终端输入自己的配置命令，例如：npm run build:mp-weixin。
目前还没有找到直接更改导航栏的 发行-》小程序-微信 这种快捷命令的办法，有知道的大佬，还请不吝赐教。

一顿操作下来，可能有人觉得这个动态配置appid有亿点点繁琐了，不要紧。

希望能给想要动态配置其他参数的同学一点思路~

另外，分享下动态域名的配置vue.config.js

// 注入env环境配置
const envDev = require("./env.dev");
const envPrd = require("./env.prd");
const env = process.env.NODE_ENV === "development" ? envDev : envPrd;

Object.keys(env).forEach(key => {
    process.env[key] = env[key];
});

在封装的请求中可以这样使用：

const BASEURL = process.env.VUE_APP_REMOTE_HOST;
uni.request({
    url: BASEURL+ `api接口`,
    data:data,
    method:'GET',
    header: {
        Authorization: token,
        'content-type': 'application/x-www-form-urlencoded'
    },
    success:res=> {
      // ....
    },
    fail:err=>{
        // ....
    }
});

这样，在不同的环境下就会访问不同的域名。

结语

若有不正确的地方，还望多多指教~

一起努力，一起加油~

懒症发作就别讲光明之时

苦尽甘来定不负生而善之