微信小程序 - 网络请求基础路径集中管理(基础路径集中管理策略、动态切换基础路径)

发布于:2025-02-18 ⋅ 阅读:(86) ⋅ 点赞:(0)

一、基础路径集中管理

  1. 在微信小程序项目开发中,经常会将请求的基础路径集中管理

  2. 这样可以避免在多个页面中重复定义,同时也方便后续维护与修改


二、基础路径集中管理策略

1、使用全局变量
  • 微信小程序提供了 App 对象,可以在 app.js 中定义全局变量,然后在各个页面中通过 getApp 方法获取
  1. app.js 中定义基础路径全局变量
App<IAppOption>({
	globalData: {
		baseUrl: "http://127.0.0.1:12345"
	},

	...
});
  1. 在页面中获取基础路径全局变量
const app = getApp(); // 获取 App 实例

const baseUrl = app.globalData.baseUrl;
2、使用配置文件
  • 将基础路径存放在一个独立的配置文件中,然后在需要的地方引入
  1. 创建配置文件,在 miniprogram 目录下创建 config.js 文件,定义基础路径
const config = {
	baseUrl: "http://127.0.0.1:12345",
};

module.exports = config;
  1. 在页面中引入配置文件,使用基础路径
const config = require('../../config.js');

const baseUrl = config.baseUrl;

三、动态切换基础路径

1、具体实现
  1. app.js 中定义基础路径全局变量
const accountInfo = wx.getAccountInfoSync();

const baseUrls = {
	develop: "http://127.0.0.1:12345", // 开发环境地址
	trial: "http://127.0.0.1:12345", // 体验环境地址
	release: "https://www.example.com:12345", // 生产环境地址
};

App<IAppOption>({
	globalData: {
		baseUrl: baseUrls[accountInfo.miniProgram.envVersion]
	},

	...
});
  1. 在页面中获取基础路径全局变量
const app = getApp(); // 获取 App 实例

const baseUrl = app.globalData.baseUrl;
2、学习 wx.getAccountInfoSync()
(1)基本介绍
  1. wx.getAccountInfoSync() 是微信小程序提供的一个同步接口,用于获取当前小程序的账号信息

  2. 该接口返回一个对象,通过这个对象,开发者可以获取到小程序的 AppID、版本信息、环境设置等

(2)演示
const accountInfo = wx.getAccountInfoSync();

if (accountInfo.miniProgram.envVersion === "develop") {
	console.log("当前是开发环境");
} else if (accountInfo.miniProgram.envVersion === "trial") {
	console.log("当前是体验环境");
} else if (accountInfo.miniProgram.envVersion === "release") {
	console.log("当前是正式环境");
}

网站公告

今日签到

点亮在社区的每一天
去签到