Embed H5 pages in WeChat applets and perform page jumps

The requirement is very simple, that is, to embed an H5 page in the applet, and provide a button to jump to other pages of this applet. Because this is the first time for the
author to get in touch, so make a record: mainly use the components
of the WeChat applet web-view, detailed usage >>> web-view WeChat official document .
insert image description here
It should be noted that personal applets are not supported!

1. Embed H5

After we have written the H5, we can embed the page in the applet page through the following code, and the page will be automatically filled, and we need to do a good job of mobile terminal adaptation:

<!--pages/test/test.wxml-->
<web-view src="http://192.168.xx.xxx:8080/#/"></web-view>

After going online, the domain name here needs to be added to the legal domain name of the Mini Program before it can be embedded. When testing locally, just check the domain name not to be checked in the local settings of the applet!

2. Jump to the page in the applet

Need to import WeChat SDK, you can directly import the official CDN:

http://res.wx.qq.com/open/js/jweixin-1.6.0.js

or using npm:

npm install weixin-js-sdk

Introduced on the H5 page:

import wx from 'weixin-js-sdk';

Call the WeChat open interface to jump to the page:
tabbar page:

wx.miniProgram.switchTab({
    
    
     url: "/pages/home/home",
   });

Non-tabbar pages:

wx.miniProgram.navigateTo({
    
    
    url: "/pages/smile/smile",
  });

think:

After reading some information, I found that there is a need to jump to other applets. The solution I see so far is to jump to a relay page (the applet’s own page), and then jump to other applets through the applet.
above!

Guess you like

Origin blog.csdn.net/weixin_54858833/article/details/118653960