When developing a WeChat applet, sometimes you need to open a web page link in the applet, and then you need to use the web-view tag. web-view is the container used to host web pages on applets, and each page can only have one web-view, which will automatically fill the entire page and cover other components. Currently, it is not supported on personal mini-programs.
The address of the webpage link opened on the Mini Program can be roughly divided into two types:
- Links to external web pages, such as Baidu, Zhihu, etc.
- WeChat official account article link
1. Links to external web pages
The business domain name needs to be configured for web-view to jump to the external webpage link, and the domain name of the iframe in the external webpage also needs to be configured. For the method of configuring the business domain name of the Mini Program, please refer to Business Domain Name | WeChat Open Documentation . After configuring the business domain name, you can open any legal subdomain name. The general configuration process is as follows:
1. Scan the code to log in to the WeChat public platform ;
2. Development management - development settings - business domain name to add and modify;
3. After configuring the business domain name, you need to download the verification file (the red box in the fourth picture in step 2), and place the verification file in the root directory of the domain name (let the backend operate). This step is equivalent to allowing the other party to authorize you to open his webpage. For example, if you want to open Baidu in your applet, you need Baidu to put the verification file in the root directory of his domain name to obtain his authorization;
4. When setting up a business domain name, you can refer to Business Domain Name Settings--Self-inspection Guidelines for Verification File Inspection Failed | Wechat Open Community for self-examination.
2. WeChat official account article link
The web-view can directly open the official account articles associated with the applet, but cannot open the links to articles that are not associated with official accounts. Apply for an associated Mini Program on the official account. For details, see Official Account Associated Mini Program Binding Process|WeChat Open Community .
After successfully associating the Mini Program on the Official Account, you can view the associated Official Account in the background of the Mini Program:
1. Scan the QR code to log in to the WeChat public platform (same as above);
2. At the bottom of the left side Settings - Associated Settings - Associated Official Account View.
3. The link cannot be opened
When using web-view, sometimes the link cannot be opened:
Here is a summary of the situation encountered before and the general solution:
1. Unable to open an external webpage link:
- Check whether the business domain name of the applet is configured, and note that other domain names embedded in iframes in external web pages also need to be configured
- Check whether it is https protocol, http protocol is not supported, and IP address is not supported
2. Unable to open official account articles: check whether the applet is associated with the official account
3. Links to external webpages and official account articles can be opened on the development tools and trial version, but not on the official version:
- Check whether the "Do not verify legal domain name, web-view business domain name, TLS version, and HTTPS certificate" option is enabled on the development tool. If this option is enabled on the development tool, the link can be opened without configuring the business domain name or associated applet. If this option is turned off on the tool, it cannot be opened. The location of this option is as shown in the figure below; on the trial version, it can be opened because "Development and Debugging" is turned on. After the development and debugging are turned off, it also cannot be opened.
- If there are no problems with the above points, it is likely that there is a problem with the link address. You can check whether it contains Chinese characters, whether there are spaces before and after the address, etc. If there are Chinese characters, you can use the encodeURI or encodeURIComponent function to encode and then open. There are spaces. It is easy to find that you can use trim( ) to remove the spaces before and after the address.