Vue WeChat applet and uniapp configuration environment address

1. Uniapp

To configure the interface address of the applet in uni-app, you can follow the following steps:

1. Create a file named ​​ in the root directory of the uni-app project and make sure that the suffix of the file is ​.js​. Define the interface addresses in different operating environments in the file. For example:

const apiConfig = {
  develop: {
    api_host: "http://localhost:3000",
  },
  trial: {
    api_host: "",
  },
  release: {
    api_host: "",
  },
};
export default apiConfig;

In the above example, we define the interface addresses in three operating environments: development version, trial version and official version.

2. Introduce files in the uni-app project file, such as: import apiConfig from './'​. In the file, select the corresponding interface address according to the running environment of the current applet and mount it on the Vue prototype. For example:

import Vue from 'vue'
import App from './App'
import apiConfig from './'
.$apiHost = ''
// Get current account informationconst accountInfo = ();
const envVersion = ;
if (envVersion === 'develop') {
  .$apiHost = .api_host;
} else if (envVersion === 'trial') {
  .$apiHost = .api_host;
} else if (envVersion === 'release') {
  .$apiHost = .api_host;
}
 = false
 = 'app'
const app = new Vue({
  ...App
})
app.$mount()

In the above example, we select the corresponding apipost based on the interface address defined in apiConfig by obtaining the running environment version of the applet, envVersion, and select the corresponding apipost according to the interface address defined in apiConfig. Then, place apiHost​. Then, place ​ apiHost​. Then, mount apiHost onto the Vue prototype for use throughout the application.

3. In components or pages that need to use interface addresses, you can obtain the current interface address through this.$apiHost. For example:

<template>
  <view>
    <text>{{ $apiHost }}/api/endpoint</text>
  </view>
</template>
<script>
export default {
  mounted() {
    (this.$apiHost); // Output the current interface address  }
}
</script>

In the above example, we used ​{ in the template{ $apiHost }}/api/endpoint​ to display the current interface address and print the current interface address in the ​mounted​ hook function.

In this way, depending on the running environment of the applet, you can distinguish the use of different interface addresses and use them in components or pages in uni-app.

2. WeChat mini program

In WeChat applets, you can use the global configuration and use the addresses of the development, experience, and production environment. Here is how to write the code using addresses in other pages:

1. In the applet's global configuration file, define global variables to store address information. For example:

App({
  globalData: {
    apiHost: ""
  },
  onLaunch: function() {
    // Get current account information    const accountInfo = ();
    const envVersion = ;
    let apiHost = "";
    if (envVersion === "develop") {
      apiHost = "http://localhost:3000";
    } else if (envVersion === "trial") {
      apiHost = "";
    } else if (envVersion === "release") {
      apiHost = "";
    }
     = apiHost;
  }
})

In the above example, we define three configuration items in the operating environment: development version, trial version and official version, including interface address, etc.

2. In other pages, you can obtain global variables through the getApp() method and use the address information stored there. For example:

const app = getApp();
const apiHost = ;
 // Build the request URL with apiHost in other pages and send the requestconst url = `${apiHost}/api/endpoint`;
({
  url: url,
  method: 'GET',
  success: function(res) {
    ();
  },
  fail: function(error) {
    (error);
  }
});

This is the article about Vue WeChat and uniapp configuration environment address configuration. For more related uniapp configuration environment address content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!