微信小程式：本地開發環境和線上環境配置

在開發微信小程式的時候，需要配置：

本地開發環境
體驗預覽環境
稽核版環境
生産環境      

為了簡化環境配置，我隻區分了兩個環境

本地開發環境
生産環境/
    體驗預覽環境
    稽核版環境
    生産環境      

參考文檔

• 基礎 /系統 /wx.getSystemInfoSync

環境區分原理: 使用

wx.getSystemInfoSync()

的 host參數

host    Object  目前小程式運作的宿主環境    2.12.3      

将配置檔案放入一個目錄中, 目錄結構如下

config/
    ├── index.js  # 入口檔案
    ├── env.js    # 環境擷取
    ├── dev.js    # 開發環境配置
    └── pro.js    # 生産環境配置      

env.js

/**
 * env
 */

export function getEnv() {
  let res = wx.getSystemInfoSync();
  // 用戶端中host有值，本地開發的時候host為null
  if (res.host) {
    return 'pro';
  } else {
    return 'dev';
  }
}      

dev.js

/**
 * dev
 */
export default {
  BASE_URL: 'http://127.0.0.1:8000/api',
};
      

pro.js

/**
 * pro
 */
export default {
  'BASE_URL': 'https://www.demo.com/api'
}
      

inde.js

/**
 * index
 */

import { getEnv } from './env.js';
import dev from './dev.js';
import pro from './pro.js';

const env = getEnv();
console.log('env', env);

let config = pro;

if (env == 'dev') {
  config = dev;
}

export default config;
      

其他方案

1、wx.getAccountInfoSync

參考文檔：

• 原生小程式根據目前版本自動切換

  開發版本、體驗版本、正式版本

• 微信小程式官方文檔：開放接口 /帳号資訊 /wx.getAccountInfoSync

實作代碼

// 自動根據版本切換接口請求位址
  const { miniProgram: { envVersion } } = wx.getAccountInfoSync();
  
  let url = '';
  switch (envVersion) {
    case 'develop':
      url = `${defaultConfig.devUrl}${params.url}`;
      break;
    case 'trial':
      url = `${defaultConfig.devUrl}${params.url}`;
      break;
    case 'release':
      url = `${defaultConfig.prodUrl}${params.url}`;
      break;
    default:
      url = `${defaultConfig.baseUrl}${params.url}`;
      break;
  }      

使用

wx.getAccountInfoSync

擷取的環境，在開發、預覽、生産都可以，不過在稽核期間竟然沒有生效，請求了’localhost’ 位址，稽核人員看不到資料，導緻稽核不通過。

2、wx.getFileSystemManager

• 小程式自動判斷/切換開發環境、正式環境的方案
• 檔案 /FileSystemManager /FileSystemManager.accessSync

let host = '';
let NODE_ENV = 'pro';
const fileManager = wx.getFileSystemManager();

try{
    fileManager.accessSync('/local.txt');
    NODE_ENV = 'dev';
}catch(e){}
if( NODE_ENV === 'pro' ){
    host = 'https://pro.qq.com';
}else{
    host = 'https://dev.qq.com';
}      

這段代碼遇到的問題是本地也擷取不到local.txt 檔案，是以暫時沒有采用