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

在开发微信小程序的时候，需要配置：

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

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

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

参考文档

基础 /系统 /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为nullif (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 文件，所以暂时没有采用

微信小程序：本地开发环境和线上环境配置相关推荐

解决IOS端微信小程序本地开发环境和线上版本的时间显示不一样，线上和体验版本时间相关的计算为NAN。
废话不多说,先看下图,这是线上版本的小程序,ios端无法显示时间相关计算后的数字,要么出现NAN或者null: 然后我将ios手机中的微信小程序,而且是开发版的 "打开调试" 打 ...
微信小程序 - - - 本地开发取消校验合法域名
不校验合法域名
校园二手书商城源代码基于微信小程序云开发，可在线支付提现，含详细配置教程
校园二手书商城源代码基于微信小程序云开发,可在线支付提现,含详细配置教程完整代码下载地址:校园二手书商城源代码基于微信小程序云开发欢迎使用,下面是配置教程长话短说,下面直接说配置流程一.小程序 ...
获取微信html代码,微信小程序云开发js抓取网页内容
最近在研究微信小程序的云开发功能.云开发最大的好处就是不需要前端搭建服务器,可以使用云端能力,从零开始写出来一个能上线的微信小程序,避免了买服务器的开销,对于个人来尝试练手微信小程序从前端到后台的开发 ...
html访问微信云数据库,node.js 抓取网页内容（针对微信小程序云开发）
最近在研究微信小程序的云开发功能.云开发最大的好处就是不需要前端搭建服务器,可以使用云端能力,从零开始写出来一个能上线的微信小程序,避免了买服务器的开销,对于个人来尝试练手微信小程序从前端到后台的开发 ...
微信小程序团队开发项目环境准备以及版本管理工具的基本使用
团队开发之开发环境准备以及版本管理序言一.导入项目二.初始化版本管理工具三.工具的使用示例环境:win10 + 码云序言在微信小程序团队开发项目中,如何使用版本管理工具呢?以下内容可以解 ...
微信小程序云开发-微信小程序账号申请及新手环境配置
申请一个微信小程序账号在微信开发时,我们yx时候可能需要用到微信小程序,微信小程序云开发需要使用注册的小程序appid,测试和游客进入是没有云开发的功能,所以我们需要注册一个微信小程序账号.在注册账 ...
【零基础微信小程序入门开发一】小程序介绍及环境搭建
什么是小程序? 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...
【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...
如何开发微信小程序？开发环境篇
前言鄙人的文章都会跟随着时代的递进而更新!大家如果想要得到最契合当下时代的文字,可以关注以下鄙人. 本篇文章发布时间:2020年5月18日. 本篇文章最近更新时间:2020年5月18日. ...

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

其他方案

1、wx.getAccountInfoSync

2、wx.getFileSystemManager

微信小程序：本地开发环境和线上环境配置相关推荐

最新文章

热门文章