WeChat small program embedded WebView related knowledge points finishing

preface

With the wide application of WeChat applet, more and more merchants choose to migrate their marketing camp to applet. However, due to the limited size of their applet, they can not fully meet the requirements of merchants. The WEB-VIEW component comes into being to solve this problem well. On the one hand, the embedded WEB-VIEW can run directly in small programs, greatly reducing the development cost of merchants. On the other hand, it can realize the jump between small programs and H5, with good expansibility and convenient multi-end drainage of merchants.

A, WEB-VIEW embedded H5 and the traditional small program comparison

Through searching relevant information, it is found that embedded Web-View and WeChat applet have the following comparison in terms of offline ability, page switching experience, secondary rendering, operation response and development flexibility. There may be some differences in performance under different scenarios, for your reference only.

Form Source:
https://segmentfault.com/a/11…


From the above table, we can compare the advantages and disadvantages of H5 over small programs. Developers can choose according to their actual needs. In addition, using Web-View has the following advantages:

• The associated binding of your own account (third party) and the small program OpenID/UnionID enables you to avoid login

For example, you are a portal site, need to identify their own small program on the user and site user relationship, you can bind the relationship through three methods, public number, small program native, small program WET-VIEW embedded jump three methods.

• Embed rich text in H5 to reduce repetitive development

For example, you are a portal site, community, there have been a large number of news and posts, which with a variety of CSS style of rich text, audio and video custom click events, small program native components may not be compatible, at this time directly embedded these H5 news, will greatly reduce the development cost.

• Hot updates, reducing release reviews

Embedded H5 can reduce the frequency of small program submission for review, and merchants can update the content of the embedded Web-View only by republishing the version of H5.

Two, WEB-VIEW applet configuration

2.1 Configure domain name

The business domain is configured with applets and domains that reference iframes in H5 and H5. If an iframe embedded in H5 is to be configured as well, the server needs to cooperate by placing the validation file in the root directory of the business domain to be nested.

2.2 Base library selection

Web-View can only be used in the version of the base library above 1.6.4. According to the official statistics of WeChat, the coverage rate of the base library at 1.6.4+ has reached more than 95%, which can meet the needs of the product.

2.3 WeChat JSSDK was introduced in H5

The Web-View was introduced after the WeChat SDK was introduced. The WeChat SDK version required at least 1.3.2, which included a direct communication method between H5 and small programs.

< script type = "text/javascript 'SRC =' / / res.wx.qq.com/open/js/jweixin-1.4.0.js' > < / script >

2.4 Communication between Web-View and applets

Officials give two ways to communicate.

1. PostMessage communication with wx. The first is needed in the H5 miniProgram. PostMessage interface, the need to share information, pushed to small programs. After the user clicks the applet back, component destruction, share and other special events, the applet page reads the POST information through the bindMessage binding function.
2. Set up the URL communication of the Web-View component H5 jump applet:

<view>
  <web-view src="{{url}}" ></web-view>
</view

/ / jump in h5 applet navigateToWeixin () {wx. MiniProgram. NavigateTo ({url: '/ pages/shop/index'}); Jump h5} / / small program - the first step < view > < web - view SRC = "{{url}}" > < / web - view > < / view > / / small program jump h5 - the second step: Set the JS file in the applet to pass the argument to H5 by the URL in the way of question mark argument. option.page){ this.setData({ url: `${this.data.url}? ${test}` }); } else { this.setData({ url: `${this.data.url}${option.page}? ${test}` }); }

3. Embedded Web-View debugging solution

First, open it through the WeChat developer tool, where the local URL debugging can be linked with the LAN, and the developer tool can be displayed in real time. If you follow the online link, you can only scan the code through the preview.



Right-click on the page. Debugging will appear in the upper left corner. You can debug H5 in the debugger on the right.

Four, stepped on the small pit

1. H5 wake up some small program API has a certain delay, 0.3~1 seconds;
2. Please call the small program special JSSDK, the public number of JSSDK is not common;
3. Web-view must be full screen, custom top menu, floating is useless;
4. The H5 link following the Web-View must be escaped from the URL, otherwise it will conflict with the symbol definition of the applet itself, and may not be recognized. After the parameter;
5. H5 control applet jump path must be “/” beginning, such as “/pages/ XXX/XXX”, and the path must be in the app.json, address error, sometimes not error;
6. PostMessage’s JSON must start with data, otherwise it will not receive data.
7. Bindmessage related:

• Back: use small program interface name wx. MiniProgram. NavigateTo, wx. MiniProgram. NavigateBack, wx. MiniProgram. SwitchTab when switching small program page/scene API will be triggered
• Share: This is what happens when you click on a share applet and receive a postMessage sent before H5.
• Components to destroy, destroying the web – the view components, similar to wx. MiniProgram. RedirectTo will trigger.

1. Embedded H5 jump small program is a serious cache, such as: H5 page has a timer, jump small program after the timer is still accounting, can be solved by adding a timestamp after the URL.

The H5’s own background music is still playing in the background of the phone. It can be resolved by the VisibilityChange event that is triggered when the browser TAB is hidden or displayed.

conclusion

See here, I believe that we have a general understanding of the embedded Web-View, we mainly on the embedded Web-View and traditional applet comparison, analysis of the advantages and disadvantages of the embedded Web-View, and then on how to configure the embedded Web-View. And then the actual embedded Web-view debugging examples, and finally to the actual combat may step on the pit and pay attention to the small points of friendship tips. So if this article has been helpful to you, I’ll be glad to hear it. Welcome to thumb up and retweet