jeremygo

Recently, I have done a lot of work related to the webview feature in mini programs, and here is a summary record.

Comparison between Embedded H5 and Native Mini Programs#

The web-view tag requires a base library version of 1.6.4 or higher.

Generally, the technology selection should be based on development flexibility and native API support, which correspond to different interaction designs.

In addition, there are the following advantages of using embedded H5:

• A self-built account system can be associated and bound with the mini program's openid/UnionID to achieve automatic login.
• Embedded H5 supports rich text, reducing redundant development.
• Updating embedded H5 is convenient and reduces the need for publishing and reviewing.

Webview Configuration and Initialization#

Domain Configuration#

• The corresponding H5 business domain (including the domain of the iframe embedded in H5) needs to be configured in the mini program backend.
• The server needs to place the verification file in the root directory of the configured business domain.

Initialization#

• The web-view tag requires a mini program base library version of 1.6.4 or higher.
• In H5, import the WeChat JS-SDK.
  • Determine if the current environment is a mini program webview, then asynchronously load the SDK file and initialize wx.config.
  • Implement an API call queue to cache the calls during the asynchronous loading process of the SDK, and execute them uniformly after the SDK is initialized.

Webview Communication#

postMessage#

Mini program base library version 1.7.1 or higher.

In H5, use wx.miniProgram.postMessage to notify the mini program. After special events such as clicking the mini program back button, component destruction, and sharing by the user, listen for data through the bindmessage callback event of the web-view tag (data from multiple postMessage calls will be an array).

Setting the URL of the web-view tag#

• Pass parameters to H5 through the src attribute of the web-view tag. For example, when opening H5 through a mini program webview, the token will be passed from the link to avoid secondary login in H5.
• After updating the url, the H5 page will be reloaded.

WebSocket#

In addition to the above two methods recommended by the official, you can also use WebSocket. The webview component needs to connect to the same socket as H5. This method bypasses the limitations of the mini program itself and communicates entirely through the server, so it has higher flexibility but also higher development and maintenance costs.

Webview Debugging#

• Set a custom startup page and startup parameters in the mini program developer tool for preview or real device debugging. The online environment needs to go through the experience version verification.
• In H5, use the vConsole plugin for debugging.

Note#

• web-view should occupy the entire screen.
• The H5 link after the mini program webview needs to be encodeURIComponent escaped, and then decoded using decodeURIComponent within the component.
• When calling a mini program jump path in H5, it must start with / and be defined in app.json.
• After jumping from an embedded H5 to a mini program, the original page may still be cached. This can be solved by adding a timestamp to the URL.

Reference#

Summary of Knowledge Points Related to WeChat Mini Program Embedded Webview