Deployment Environment for WeChat Mini-Program

Hidden within the doc

Photo by Grant Ritchie on Unsplash

What is this environment that we speak of?

For software development, deployment environments allow continuous development while ensuring stability for the version used by the end-users.

The most common environment setup:

Development: an environment where developers can test and mess around without consequences.

Staging: an environment for stakeholders to test and preview. A stakeholder can be the company’s boss or invest, or whomever who is not a part of the active development, but have “stakes” within the project.

Production: an environment for the end-users to use. Should be the most stable.

Does WeChat Mini-Program have these environments?

Yes, but with different names.

Develop for Development

This is the environment within the WeChat Devtool.

Trial for Staging

This is the environment when code is submitted to Tencent as “Beta Version”

Release for Production

This is the environment when the code is approved by Tencent and released to the public.

But how?

According to the doc, you are able to get the envVersion through a method called wx.getAccountInfoSync()

This is what it looks like in destructuring syntax.

const res = wx.getAccountInfoSync();
const { miniProgram: { envVersion }} = res;
// envVersion === 'develop' || 'trial' || 'release'

When to call this method?

You can either call this method on launch and store envVersion as a global variable.

Or you can set up a config file to handle all the different URLs for your environments

Here’s an example of the config.js

// Default Global Values
let envChecked = false;
let environment = 'develop';
let apiUrl = 'https://dev.link.com';
// A function to check environment of mini-program
const checkEnv = () => {
  try {
   const res = wx.getAccountInfoSync();
   const { miniProgram: { envVersion }} = res;
   // If need to hardcode env, do it here
   environment = envVersion;
   envChecked = true;
   return environment;
  } catch (e) {
   // Do something when catch error
   console.error('error while getting env', e);
   return 'default';
  }
}

// Another function to get the proper URL for the environment
const getUrl = () => {
   if(!envChecked) {
    checkEnv();
   }
   switch (environment) {
     case 'develop':
      apiUrl = 'https://dev.link.com';
      break;
     case 'trial':
      apiUrl = 'https://staging.link.com';
      break;
     case 'release':
      apiUrl = 'https://prod.link.com';
      break;
     default:
      break;
   return apiUrl;
}
export {
  getUrl
};

When making the request, import the config file and use getUrl as a function.

You might think, why we don’t just export apiUrl and use that value?

The problem is that wx.getAccountInfoSync() takes some time to finish executing. If your request has to wait for it, it will delay the initial startup time.

Calling getUrl will make sure that we have checked the environment, but also avoid calling wx.getAccountInfoSync too many times.

So when making a request in index.js , it can look like

import {
  getUrl
} from '../../utils/config';

// ... Page setup code 
// Make request within some function
const url = `${getUrl()}/users`;
const {
  data
} = await wxp.request({
  method: 'GET',
  url
})

Conclusion

If you want to learn more about WeChat-related development, click here.