最近开发过程中遇到一个尴尬的情况,发版前调试一下,API地址改到了测试环境,改完OK发版。。。结果尴尬了,测试地址忘了改回来。审核等待前功尽弃。。。。
这种事情对于匆匆忙忙写bug,匆匆忙忙发版的程序猿来说肯定会发生第二次,第三次。遇到问题,解决问题。
开始翻看找小程序的api文档,于是找到了
wx.getSystemInfo
但是这个API只能区分是pc还是移动端并没有其他有用的信息
接下来去开发社区
https://developers.weixin.qq.com/community/develop/article/doc/000ec87cdd8070c3ba89fe00051813
突然看到这篇文章很有道理,虽然是想直接把作者的方法拿来用,但是想到要在运行时环境通过一个try cath判断控制变量心里有点发虚,再想想。
不过作者提到了灵感来自于node,那是不是可以直接写一个node脚本进行预编译呢。想想小程序的开发者工具还是很open的,兴许可以呢。毕竟还提供了命令行调用,可以考虑一下从这里入手(这太麻烦了。。。。)
https://developers.weixin.qq.com/miniprogram/dev/devtools/cli.html
又玩弄了一番开发者工具,终于发现了一个有趣的功能,开发者工具竟然提供了自定义处理命令(编译前的钩子)
在执行相应的操作前钩子可以执行shell命令,那不是说预览和上传之前都可以调用node脚本了吗。
流程 :预览,上传前》执行调用node脚本命令,带上环境参数》node脚本运行 获取命令行参数》根据参数生成不同环境中使用的配置代码》重新写入api配置文件》预览,上传
api.template.js
用作config文件模板,需要根据开发环境动态生成的变量可以用占位符的形式写在里面
var WxApiRoot = '%%API_URL%%';
module.exports=WxApiRoot;
env.config.js
用于配置不同开发环境的配置文件
const envConfig = {
DEV: {
API_URL: 'https://dev.com',
},
PROD: {
API_URL: 'https://pro.com',
},
};
module.exports = envConfig;
接下来是node脚本的入口文件:
首先在项目根目录安装:
cnpm install node-notifier --save-dev
选择安装,目的是为了编译之后提醒开发者配置文件预编译结果
脚本内容:
const fs = require('fs');
const exec = require('child_process').exec;
const envConfig = require('./config/env.config');
const _arguments = process.argv.splice(2);
const path = require('path');
const [MINIENV = 'DEV'] = _arguments;
const notifier = require('node-notifier');
const templatePath = './config/api.template.js';
const configPath = './config/api.js';
const config = envConfig[MINIENV];
//读取配置文件模板
let templateConfig = fs.readFileSync(templatePath, 'utf8');
//拿到那些变量需要动态编译
const configKeys = Object.keys(config);
//通过遍历替换的方式替换模板中的占位符
configKeys.forEach((key) => {
const regText = `%%${key}%%`;
const regObj = new RegExp(regText, 'g');
templateConfig = templateConfig.replace(regObj, config[key]);
toast(`编译环境:${MINIENV}--${key}`, config[key]);
});
//把替换后的模板字符串写入api文件中
fs.writeFileSync(configPath, templateConfig);
/**
* @description 警告提示,方便开发者看到编译过后的配置文件的变量信息
* @author songs
* @date 2020-04-27
* @param {*} title
* @param {*} content
*/
function toast(title, content) {
console.log(path.join(__dirname, './', 'login-bg.png'));
notifier.notify({
title: title,
message: content,
icon: path.join(__dirname, './', 'login-bg.png'),
});
}
这样 每次预览或者上传之前都可以执行一次node脚本了,config文件预编译完成,再上传。虽然还是没有从根本上解决问题,但是如果配上一个上线流程规范,应该可以应付一大半的环境区分问题吧。
预编译用到的文件不需要上传,可以再project.config里设置忽略上传
"packOptions": {
"ignore": [
{
"type": "file",
"value": "config/api.template.js"
},
{
"type": "file",
"value": "config/env.config.js"
},
{
"type": "file",
"value": "login-bg.png"
}
]
},
结束!!