Due to some well-known or unknown reasons, in WeChat's mini programs we can only call Tencent's own maps (not great). Looking at the beautiful styles of Mapbox, we can only sigh in longing. After exhausting 200 engineers' worth of hair, we finally thought of a roundabout solution (PS: An engineer's hair is quite valuable, especially that of a senior engineer). First, let's look at the effect:

How about that? Isn't it amazing?!

How?

Perhaps you've already thought of it; that's right, we achieved this through the web-view component provided by WeChat.

To call Mapbox maps via web-view, the following conditions must be met:

1. The mini program must be under a corporate entity, as the WeChat web-view component is not open to personal mini programs.
2. Have a domain name that must be verified in the WeChat backend when embedding the webpage.

Learn by Action

1. Domain Verification

Due to the regulations of the WeChat platform, the address pointed to by web-view must be a domain that is registered in the WeChat mini program backend, otherwise a message will appear saying Non-business domain names cannot be opened, please reconfigure.

First, we locate the module Development > Development Settings > Business Domain in the WeChat backend and fill in the domain name that needs to be bound.

Next, we need to download a verification file from WeChat and place it in the root directory of your domain, ensuring that it is accessible. For example, if your domain is abc.com and the WeChat verification file is WATLNxupm4.txt, you need to ensure that abc.com/WATLNxupm4.txt is publicly accessible.

Once everything is confirmed to be correct, click save.

2. Embedding a web-view with a Map

This process is actually quite simple. Find your WeChat mini program's .wxml file and add the following code:

<web-view src="https://abc.com/map.html"/>

Where abc.com/map.html is the H5 page that has the map. Note that the WeChat mini program's web-view must be full-screen and will cover all other components on the page.

As for how to use the Mapbox maps, you can refer to Mapbox's official documentation.

3. Some Tips for Mini Program web-view

• If you want to check whether you are in a WeChat mini program within a webpage, you can determine it with window.__wxjs_environment === 'miniprogram'.
• If a webpage wants to send information to the mini program, it can use the wx.miniProgram.postMessage method.
• In the mini program, you can listen for data sent back from the webpage using the postMessage method, but this method only triggers at specific moments (such as when the mini program goes back, component destruction, or sharing), so messages cannot be transmitted in real-time.

Summary

Overall, embedding the map via web-view is a roundabout way to achieve this; the interaction and performance may not be as smooth as the WeChat mini program itself. However, this method also brings us some new ways to solve problems. For specific needs, we can accomplish some functionalities that WeChat components cannot implement or find inconvenient, and then we can send information back to the WeChat mini program using postMessage. Moreover, I strongly advise against putting everything in H5 and then directly embedding it in the WeChat mini program. Leaving aside whether it will pass WeChat's review, from the perspective of interaction experience, many functionalities in pages differ significantly from native components of WeChat mini programs.