uni-app 需要一个能切换后端服务器地址的APP壳插件

发布于 1周前 作者 caililin 来自 Uni-App

uni-app 需要一个能切换后端服务器地址的APP壳插件

需求一个 APP壳能切换前端服务器地址的插件

需求描述：WMS项目，我需要打包一个APP壳，通过访问服务器地址打开WEB项目。

在实际使用中会需要切换测试环境和正式环境，需要在登录界面增加一个设置服务器网址的功能，点击后弹出框输入服务器网址即可实现登录对应的应用环境。

Harmonyos Next教程
3 回复

这个也不需要插件啊，自己前端写一下就好了啊。自己搞一个固定的请求地址就好了，其他的动态处理


不会，我是小白，求大佬指导

针对你的需求，为了在uni-app中实现一个可以切换后端服务器地址的APP壳插件，你可以通过配置和动态设置API基础URL来实现。以下是一个基本的思路和代码示例：

思路

  1. 配置文件：在manifest.json或自定义配置文件中设置多个后端服务器地址。
  2. 动态设置：在APP中提供一个界面让用户选择服务器地址，然后根据用户的选择动态设置API的基础URL。
  3. 请求封装：封装一个请求函数，使用动态设置的URL进行API请求。

实现步骤

1. 配置文件

在manifest.json或创建一个config.js文件来存储服务器地址。

// manifest.json (示例，实际可能不支持直接存储此信息)
{
  "mp-weixin": {
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true
  },
  "serverConfigs": [
    {"name": "开发环境", "url": "https://dev.example.com"},
    {"name": "测试环境", "url": "https://test.example.com"},
    {"name": "生产环境", "url": "https://prod.example.com"}
  ]
}

或者config.js：

// config.js
export const serverConfigs = [
  {"name": "开发环境", "url": "https://dev.example.com"},
  {"name": "测试环境", "url": "https://test.example.com"},
  {"name": "生产环境", "url": "https://prod.example.com"}
];

2. 动态设置

创建一个页面让用户选择服务器地址，并将选择保存到本地存储（如uni.setStorageSync）。

// 选择服务器页面
uni.chooseMessageFile({
  count: 1,
  type: 'object',
  extension: ['json'],
  success: (res) => {
    const selectedServer = serverConfigs.find(server => server.name === res.tempFiles[0].path.split('/').pop().replace('.json', ''));
    uni.setStorageSync('serverUrl', selectedServer.url);
  }
});

3. 请求封装

封装一个请求函数，使用动态设置的URL。

// request.js
import axios from 'axios';

const getBaseUrl = () => uni.getStorageSync('serverUrl') || 'https://default.example.com';

export const request = axios.create({
  baseURL: getBaseUrl(),
  timeout: 10000,
  headers: {'Content-Type': 'application/json'}
});

// 使用示例
request.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

通过上述步骤，你可以在uni-app中实现一个可以切换后端服务器地址的功能。注意，这里的实现是一个简化的示例，实际项目中可能需要考虑更多的细节，如安全性、错误处理、用户权限等。

回到顶部