评论

[开盖即食]小程序不同环境切换和自动判断的四个方案

解决小程序开发环境手动切换的麻烦和风险

实际开发中,我们经常会遇到“开发版,体验版/QA版,正式版”多个环境的切换,它们对应的是不同的后端接口地址,开发中容易把dev环境的接口地址提交到git,这时候合并没注意的话,就容易出现事故。

总结的4个方案,避免此类事件的发生,做到自动化判断环境,而非手动修改~

先说下核心逻辑:就是判断是否线上,其他环境就算配错,风险也没线上环境大

1、使用官方API getAccountInfoSync判断

const Hosts = {
    mock: 'http://192.168.1.996:007',
    dev: 'https://dev.qq.com',   //开发环境
    hidden: "https://hidden.qq.com", //预发布环境
    prod: 'https://prod.qq.com', //线上环境
    qa: 'https://qa.qq.com',
};
const { envVersion } = wx.getAccountInfoSync().miniProgram;
let baseUrl = "";
switch (envVersion) {
    case 'develop':
        baseUrl = `${Hosts.dev}`;
        break;
    case 'trial':
        baseUrl = `${Hosts.hidden}`;
        break;
    case 'release':
        baseUrl = `${Hosts.prod}`;
        break;
    default:
        baseUrl = `${Hosts.prod}`;
        break;
}
console.log(baseUrl)

可以看到IDE工具的返回值是 develop,这样就可以根据API自动切换不同的场景了。

文档https://developers.weixin.qq.com/miniprogram/dev/api/open-api/account-info/wx.getAccountInfoSync.html

2、通过本地特殊文件来判断

在本地添加一个大家约定好的文件,比如local.txt,如果调试的时候有这个文件,就是当前环境。

let _ENV = 'prod';
const fileManager = wx.getFileSystemManager();
try {
    fileManager.accessSync('/local.txt');
    _ENV = 'dev';
} catch (e) { }
if (_ENV === 'prod') {  //这里其实只判断是否是线上
    baseUrl = Hosts.prod;
}

通过 .gitignore 忽略这个文件,这样就不会合并到master分支。
当然这种方法,其实不一定用判断环境,也可用来测试一些其他功能

3、采用CI机器人自动化切换环境发布

//写好脚本,在每次上传前或者预览前修改 host文件
const fs = require('fs');
fs.readFile('./host.js','utf8',function(err,data){
    // 字符串转数组
    let txt = "let baseUrl = Hosts.prod";
    fs.writeFile('./host.js',txt,function(err){
        console.log(arr);
    })
})
//上传脚本
const ci = require('miniprogram-ci')
;(async () => {
  const project = new ci.Project({
    appid: 'wxsomeappid',
    type: 'miniProgram',
    projectPath: 'the/project/path',
    privateKeyPath: 'the/path/to/privatekey',
    ignores: ['node_modules/**/*'],
  })
  const uploadResult = await ci.upload({
    project,
    version: '1.1.1',
    desc: 'hello',
    setting: {
      es6: true,
    },
    onProgressUpdate: console.log,
  })
  console.log(uploadResult)
})()

无论是上传发布,还是预览都可以通过node重新配置host,或者修改你想修改的文件。

官方miniprogram-CI文档https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html

4、本地配置中的自定义处理命令

在这里配置node或者yarn的一些方法,也可以解决这个问题
在上传审核前,重新设置host为线上的后端地址,同时这个也可以用于一些多端开放切换和执行一些自定义的node策略。

总结

如果只是解决 “多人开发中切换本地环境导致误传git和发布后指向后端url错误"的话,用第一种方法即可。

其他方法除了解决此类问题,还可为解决预编译,第三方框架等问题提供一种思路。

如有疑问请留言~

觉得有用,请点个赞哦,让我继续分享更有动力~

最后一次编辑于  2021-09-10  
点赞 15
收藏
评论

2 个评论

  • Sara 柏月
    Sara 柏月
    发表于小程序端
    2021-09-30

    火前刘明

    2021-09-30
    赞同
    回复
  • 王浩Hanks🇨🇳
    王浩Hanks🇨🇳
    发表于小程序端
    2021-09-10

    火钳救命

    2021-09-10
    赞同
    回复
登录 后发表内容