Shulou(Shulou.com)05/31 Report--

This article mainly explains "WeChat Mini Programs how to use JS to load esmap map", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "WeChat Mini Programs how to use JS to load esmap map" bar!

First, two conditions to be met for displaying indoor 3D map in WeChat Mini Programs

Mini Program web-view component is required to call ESMap indoor map. To call ESMap indoor map through web-view, you need to meet the following two conditions:

1. Mini Program is the main body of the enterprise, and the Wechat web-view component is not open to individual types of Mini Program.

two。 You need to have your own domain name, and you need to verify the domain name in the Wechat background when embedding the web page (only the web page under your own domain name can be displayed correctly, you can't find a public link randomly).

II. Specific implementation steps

1. Domain name verification:

Due to the regulations of the Wechat platform, the address web-view points to must be a domain name registered at the backend of WeChat Mini Programs, otherwise there will be a prompt that "opening non-business domain names is not supported, please reconfigure".

First of all, we find the developer-> Development Settings-> Business Domain name module in the backend of Wechat, and fill in the domain name you need to bind.

It should be noted that the domain name here forces https, so you need to configure the https certificate, and pay attention to the purchase of servers that support https when purchasing servers.

Next, we need to download a Wechat verification file, put it in the root directory of your domain name, and support access.

Specifically, if your domain name www.esmap.cn and the verification file for Wechat is WATLNxupm4.txt, you need to make sure that https://www.esmap.cn/WATLNxupm4.txt is publicly accessible. After confirmation, click Save to save successfully.

Note: all https requests used by Mini Program need to be configured with a valid domain name.

2. Embed web-view with indoor map

The process is actually very simple. Find your WeChat Mini Programs's .wxml file and add the following code

Where https://www.esmap.cn / esmap.html is an H5 page with a map

For the indoor mapping process, you can build this page in two ways:

1) copy the test map source code DEMO from the https://www.esmap.cn official website and deploy it on your own server for free.

2) refer to the https://www.esmap.cn indoor 3D map SDK development instructions and add your own indoor map to your existing H5 page.

3. Some tips on Mini Program web-view

WeChat Mini Programs's web-view can only be full-screen and will cover all other components on the page.

1) if you want to judge whether you are in WeChat Mini Programs on the web page

Var ua = window.navigator.userAgent.toLowerCase (); if (ua.indexOf ('micromessenger') = =-1) {/ / explain the logic that is not in Wechat / / the logic that is not in Mini Program} else {wx.miniProgram.getEnv (function (res) {if (res.miniprogram) {/ / logic in Mini Program} else {/ / logic that is not in Mini Program})}

2) if the web page wants to send information to Mini Program, you can use the wx.miniProgram.postMessage method.

3) in Mini Program, you can listen to the data transmitted from the web page through the postMessage method, but this method is only triggered at a specific time (Mini Program retreat, component destruction, sharing), and cannot deliver messages in real time.

4) the web page jumps to the Mini Program page

Wx.miniProgram.navigateTo ({url:'/ pages/esmap/esmap?location=' + obj.location})

Third, more effects!

Thank you for your reading, the above is the content of "how WeChat Mini Programs uses JS to load esmap maps". After the study of this article, I believe you have a deeper understanding of how WeChat Mini Programs uses JS to load esmap maps, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.