What is Mini Program Embedded H5
Embedding H5 in a Mini Program refers to a way to embed an H5 page into a Mini Program
Embedded H5 in the Mini Program allows users to directly browse and use H5 web pages in the Mini Program, and also allows developers to use certain functions of the H5 web page in the Mini Program.
When the original H5 is converted to a small program with similar business logic, in addition to embedding H5, a multi-terminal compilation solution can also be used, but the cost of API compatibility is high . Of course, it is also possible to develop a pure small program. The coverage rate of the basic library support version required by the web-view used by H5 has reached more than 95%, so choose this solution
Why do you need to embed H5
In the applet, the appearance and interaction effect of the H5 page are the same as opening the H5 page in the browser, and at the same time, the API and functions of the applet can be combined to achieve richer application functions.
Consider the following scenarios:
-
The H5 page contains some functions (such as speech recognition and image recognition) that cannot be realized by the applet. You can use the H5 page to interact with the applet to realize these functions.
-
Implement some functions in the applet, but do not want to use the components or APIs that come with the applet, you can use the H5 page to extend the functions of the applet.
-
The content in the H5 page is public or independent, and needs to use the authorization function of the mini program (such as QQ, WeChat, etc.), and the H5 page can be embedded in the mini program to perform authorization operations.
-
There is a questionnaire page in H5 that needs to be filled out by the user after logging in, but the login operation of H5 itself is cumbersome Perform follow-up actions that can lead to increased conversion rates through higher landing rates
It is not difficult to see that the H5 embedded in the applet has an unexpected effect in a specific scene.
How to do embedded H5
Having said all that, let's see what to do
domain configuration
First of all, we need to configure the domain name on the public platform
What is configured in the business domain name is the applet and the domain name that references the iframe in H5 and H5. Special attention here is that if there is an embedded iframe in H5, it must also be configured.
You also need to find a server friend to help put the verification file in the root directory of the business domain name
Specifically, there will be a tutorial when configuring the domain name
Small program side processing
Secondly, we need to use the web-view component in the applet
On this component we need to do two things
- Pass the embedded H5 URL in the src attribute
- Set the component style of web-view to adapt to the page layout, etc.
Handling of H5
The introduction of JS-SDK also requires the configuration of the JS-SDK security domain name in the WeChat public platform
The specific method can also be found by posting a GPT answer here, which kindly told us that the method is used for embedded H5
After the configuration is complete, we can connect with confidence.
Judging the host environment
<script src="https://res.wx.qq.com/open/js/jweixin-1.5.0.js"></script>
<script>
if (typeof wx !== 'undefined' && typeof wx.miniProgram !== 'undefined') {
// 当前在小程序环境中
} else {
// 当前不在小程序环境中
}
</script>
Other APIs
// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })HTTPS support
In addition, the H5 page must also support the HTTPS protocol, otherwise it cannot be loaded in the applet.
HTTPS can make data transmission more secure and can also play a role in SEO optimization
On the contrary, if the embedded H5 is the HTTP protocol, it will prompt an error that the link is not safe when loading
Precautions for embedded H5
After embedding H5, the content displayed on the page becomes uncontrollable for applets
So you will need to complete the relevant configuration in the background and need to meet the HPPTS protocol, etc.
In addition, there are some points to pay attention to
- Please call the JSSDK dedicated to the applet. The JSSDK in the official account is not universal
- The web-view must be a custom top menu that fills the full screen, and the floating menu is useless
- The h5 link following the web-view must be url-escaped , otherwise it will conflict with the symbol definition of the applet itself and may not be recognized? After the parameter
- The jump path of the H5 control applet must start with "/", such as "/pages/xxx/xxx", and the path must be in app.json. If there is an address error, sometimes no error will be reported.
- The embedded H5 page of the applet does not support all the capabilities of the applet and the interfaces that can be called. Therefore, when using the embedded H5 page, it is necessary to consider the interfaces that cannot be called and perform special processing and adaptation
- Compared with native applets, the performance of H5 pages embedded in applets may suffer some problems such as loading speed and lag.
Sharing of a real scene
background
encountered such a scene
There are two pages in H5, one is an activity page and the other is a questionnaire page
The activity page will display the relevant information of the activity and provide registration button click to jump to the questionnaire page to fill in the registration information
In order to improve the login rate and conversion rate, these two pages have been modified and built into the applet
question
When the activity page or the questionnaire page is opened directly from the applet, OK, both pages are normally synchronized with the login status
But if you click the button from the opened event page to jump to the registration page
It will show that you are not logged in, and the login box will pop up. After logging in, you will return to the active page and this process will be repeated.
analyze
Before thinking about the solution, let's go through the process of synchronizing the login status
First of all, for applets, login can be divided into two types
- If you have not registered, you need to obtain mobile phone authorization to perform the login process
- If you have already registered, you can get wxCode to perform automatic login (that is, silent login)
The WeChat ecology has cookies, but the login of the applet has nothing to do with this cookie, and the applet cannot operate cookies
Mini programs cannot directly use cookies as the basis for login because the users logged in by the mini program may be inconsistent with the existing cookie users in the WeChat ecosystem
WeChat can switch the login user but the applet cannot
If the login status is not synchronized after the switch, the cookie obtained at this time may be reserved before
So relying on cookies as a login basis is not acceptable.
So I changed a method to splicing username and usertoken on the embedded url
The h5 terminal judges that if it is a small program environment and there are these two parameters in the url, it will execute the synchronization process
This also led to the phenomenon in the background. Since both the activity page and the questionnaire page have been transformed, they will analyze whether the URL contains username and usertoken.
On the questionnaire page, because it is the jump of the active page configuration button operation and there is no splicing parameter, a login box will pop up to prompt you to log in.
Solution
At this time, you can consider recording a status after the first page login is successful
When the page jumps to other pages, it will first judge whether the login status has been synchronized
If it has been synchronized, there is no need to parse the URL to judge the parameters
If it has not been synchronized, it is still necessary to determine whether the URL contains corresponding parameters.