What will confuse you when you start building WeChat Mini-Program for the first time

David Yu
Shanghai Coders
Published in
4 min readDec 28, 2019

Why can’t I make an API request?

All request URLs of WeChat need ICP license and whitelist in WeCht admin panel

  1. Get ICP license for your URL

2. Find develop button in https://mp.weixin.qq.com/

3. Find server domain section

4. Add the URL

How to bypass the whitelist constraint for development?

  • In WeChat Devtool, check off “Does not verify valid domain names”
  1. Find in “Details” of WeChat DevTool

2. Find in Local Settings

How to bypass whitelist constraints for the device?

If you choose “Remote Debug”, it won’t block the URL.

If you choose “Preview”, you will need to choose “Enable Debugging” in the device.

Why does my app look different on the device from the emulator?

Since WeChat Mini-Program is essentially a web-view within WeChat, WeChat uses different web-view on the different operating system.

WeChat DevTool uses Chrome which generally supports more web-like features.

If you haven’t experienced this problem before, here are a few examples where I found a discrepancy in the past.

  • position relative and absolute doesn’t work expected
  • input placeholder text float has the highest z-index for some reason
  • <cover-view /> doesn’t play well with css most of the time

Note that WeChat could have fixed these problems when you read this.

You can check the latest known problem here:

https://developers.weixin.qq.com/community/develop/issueList?page=2&type=%E4%BF%AE%E5%A4%8D%E4%B8%AD&block=bug

How do I launch my Mini-Program online?

First, you will need a Mini-Program account.

A test account will not have the “upload” button

After clicking on the “upload” button, go to https://mp.weixin.qq.com/

Click on “Version Management”, you should see the version you uploaded at the bottom.

If you just want to have a Beta version for the internal team to see, click on the first option after clicking on caret.

If you click on the green button, then it submits to Tencent for review. After 1–2 business day, you should get a notification on your WeChat about the result.

If you see “审核通过待发布”, then your app is ready to be launched to the public.

Is the JavaScript in Mini-Program the same as JavaScript on the Web?

The simple answer is “No”

It supports most of ES5 and ES6, as long as you have “Transpile ES6 to ES5” and “Transpile Enhance” checked in your “Local Settings” of DevTool

Here is a list of JavaScript methods that are NOT supported at the time of writing(12/28/2019):

  • eval
  • new Function
  • values(Android)
  • proxy (Android)

Here’s the list on their official document: https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/js-support.html

Conclusion

Here you are completely new to WeChat related software development, I have a free glossary to get you started.

--

--

David Yu
Shanghai Coders

Full-stack developer based in Shanghai. I help people turning their ideas into reality.