First of all, according to the official website documentation, only impersonal applets can use the Web-view component. If you are a personal developer, you can skip this article.

First, using Web-View and its benefits

1. Associate and bind your own account (the third party) with small program openId/UnionId to achieve log-in free

For example, you are a portal site S, you want to identify their relationship between users and website users on the small program, you can bind the relationship through three methods, public number, small program source, small program web-view embedded jump three methods

2, embedded H5 rich text, reduce repeated development

For example, if you are a portal site, community, there used to be a lot of news and posts, with a variety of CSS style rich text, small program source is not directly read, need a lot of transformation, this time directly embedded these H5 news, greatly reduce the development cost

3, hot update, reduce release review

For content, announcements, and activity pages that need to be updated frequently, embedding H5 can reduce frequent submission of applets for review

Second, small program function empowerment

H5 provides a variety of small program only features, such as recording, scanning and so on.

Matters needing attention

  1. You are advised to use the official API: wx.miniprogram.getenv
  2. The H5 wakes up some applets with a delay of 0.3~1 seconds
  3. Please call small program dedicated JSSDK, JSSDK in the public number is not general
  4. The applets automatically get the title for loading H5
  5. The URL of the IFrame in H5 must also be a service domain name
  6. Web-view must be full screen, custom top menu, floating is useless

Three, small program and H5 before the mutual communication

1, small program ==>> H5

The applet controls H5, which can be passed as a SRC path, for example

<! -- HTML --> <web-view SRC ="//URL? a=param1&b=param2"></web-view>
Copy the code

Avoid using Chinese characters in links. In iOS, the white screen may open. It is recommended to add encodeURIComponent.

2, from H5 ==>> small program

Bindmessage is a small application that listens for H5 messages, but it’s not too big! These are its three departure scenarios:

  • Back: use small program interface name wx. MiniProgram. NavigateTo, wx. MiniProgram. NavigateBack, wx. MiniProgram. SwitchTab when switching small program page/scene API will start
  • Share: This is the postMessage sent before H5 when you click on the share widget
  • Components to destroy, destroying the web – the view components, similar to wx. MiniProgram. RedirectTo will trigger.
<! -- HTML --> <web-view bindMessage ="handleGetMessage"  src="{{openUrl}}"></web-view>
Copy the code
// openUrl --> Page({/** **);""}, /** * get request data */ handleGetMessage:function(e) { console.log(e.detail.data); }}})Copy the code
<! H5-side HTML and JS --> <scripttype="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
wx.miniProgram.postMessage({
    data: {
        link: "//test.com",
        title: "Learn together and make progress together."}}); //wx.miniProgram.redirectTo({ // url:"/pages/inner/index? source=123"
//})
wx.miniProgram.navigateBack({delta: 1})
</script>
Copy the code

Matters needing attention

  1. The jump path of the H5 control applet must start with a “/ “, such as “/pages/ XXX/XXX “, and the path must be in app.json.
  2. Json for postMessage must start with data, or it will receive no data.

There are three important features of receiving a bindMessage.

  1. The receive can be a postMessage sent several minutes before H5, not necessarily immediately.

  2. The DATA messages sent by the previous postMessage stack up to an array when the BindMessage is triggered.

  3. When bindMessage receives the data again, the data it sent before is not cleaned up and is returned as a sum

Five, the Tips

1. How to debug H5 in IDE tools

2. Embedded H5 cache problem

The WEB-view loaded H5 has a heavy cache, and if you need to debug it, you can do this by putting a timestamp after the URL.

3. H5 background music is still playing when the small program is closed

The small program has been closed, but the background music of H5 is still playing in the background of the phone. Here we can use an attribute:

Visibilitychange: Page visibility state

Simply put, the visibilityChange event is triggered when a browser TAB is hidden or displayed.

var statusBeforeHide = true; Var music = document.getelementById ("xxx"); // Change the music playing statefunction setChangeMusic() {
    if(document[hiddenProperty]) {// Page hiddenif(statusBeforeHide) { music.pause(); // pause}}else{// page displayif(statusBeforeHide) {music.play() // If statusBeforeHide istrue, continue playing}}}let hiddenProperty = ('hidden' in document) ? 'hidden'
        : ('webkitHidden' in document) ? 'webkitHidden'
            : ('mozHidden' in document) ? 'mozHidden' : null;
if (hiddenProperty) {
    let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
    let onVisibilityChange = () => {
        //console.log('visibilityChange');
        setChangeMusic();
    };
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);
} else {
    console.log("This API is not supported.");
}
Copy the code

In conclusion, web-view is still a very useful component, but try to avoid over the wall operations, and use and cherish ~

Past review:

  • Small program new edition subscription message + cloud development practice and pit
  • Small program PC version, how to do PC compatible? !
  • Poster generation by small program Canvas