微信小程序:本地开发环境和线上环境配置

简介: 微信小程序:本地开发环境和线上环境配置

在开发微信小程序的时候,需要配置:


本地开发环境
体验预览环境
审核版环境
生产环境

为了简化环境配置,我只区分了两个环境


本地开发环境
生产环境/
  体验预览环境
  审核版环境
  生产环境

参考文档


基础 /系统 /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';
}
相关文章
|
9月前
|
JSON 小程序 数据格式
微信小程序的tabbar怎么配置
微信小程序的tabbar怎么配置
550 2
|
4天前
|
小程序
【01】微信支付商户申请下户到配置完整流程-微信商户申请-资料准备以及提交-微信商户密钥申请-申请+配置完整流程-优雅草卓伊凡
【01】微信支付商户申请下户到配置完整流程-微信商户申请-资料准备以及提交-微信商户密钥申请-申请+配置完整流程-优雅草卓伊凡
20 1
【01】微信支付商户申请下户到配置完整流程-微信商户申请-资料准备以及提交-微信商户密钥申请-申请+配置完整流程-优雅草卓伊凡
|
6月前
|
iOS开发 开发者
iOS微信分享配置universal links步骤
iOS微信分享配置universal links步骤
1467 58
|
4天前
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
24 3
|
6月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
5月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
71 1
|
5月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
73 0
|
7月前
|
Linux 网络安全 API
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
|
8月前
|
存储 小程序 数据库
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
115 0
|
8月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
226 0

热门文章

最新文章