Introduction to the method of embedding H5 in small programs

Note:

The applet does not support cookies. The embedded h5 supports cookies but they coexist with WeChat web page cookies and affect each other.

The mini program only supports https

The domain name of H5 embedded in the mini program must be set as a trusted domain name in the WeChat background

Use WeChat sdk version 1.4, some functions of 1.0 are not available Support: https://res.wx.qq.com/open/js/jweixin-1.4.0.js

1. Determine the mini program environment

The old version of WeChat depends on whether the mini program supports it. If it supports H5, it needs

wx.miniProgram.getEnv(function(res) {
     if (res.miniprogram) {
         //这里才是小程序环境
         //但是这个方法是异步的请注意
     }

or let the mini program developer open the H5 page and pass a field to H5 through the url to determine whether the field is the mini program environment.

2. Mini Program Sharing

Mini Program Documentation:

The user can obtain the URL of the current web-view when sharing, that is, return the webViewUrl parameter in the onShareAppMessage callback.

However, in real machine practice, according to feedback from mini program development, the URL cannot be obtained in some scenarios, so we finally pass the sharing information through the postMessage method. The example is as follows:

wx.miniProgram.postMessage({ data:{
      active_shareTit:分享语言,
      active_shareimg:分享图
      active_shareurl: 分享链接
}})

3. Synchronize cookies.

The mini program brings the required parameters through the URL, and sets them in the cookie after being intercepted by H5.

4. H5 jump applet

Cannot use Href to jump! The url is in the form of "/page/.." and cannot contain http protocol. You must use the following three methods:

navigateTo jump to the mini program page and keep the current page

redirectTo closes the current page and jumps to the mini program page (you cannot return to the current page when you return)

switchTab jumps to the mini program tabbar page (the page of the mini program with bottom navigation, if this page uses navigateTo or redirectTo will fail!)

demo:

wx.miniProgram.navigateTo({
    url: '/pages/prod/prod?参数1=大大说&参数2=qweqw'
})

5. The applet jumps to H5

You can pass parameters to H5 in src

 <web-view src="https://mp.weixin.qq.com/qq.html"></web-view>

Recommended: "小program development tutorial》

The above is the detailed content of Introduction to the method of embedding H5 in small programs. For more information, please follow other related articles on the PHP Chinese website!