The background,

The background of the requirement is as follows: in the small program, click to view the agreement signed by the user and jump to the page of agreement details. The page of agreement details is already available in another H5 project, so we want to directly jump to the page to avoid developing the agreement details page of the small program version

Two, small program jump H5 page

Small program inside running H5 pages, need to be embedded in the web- View, note: a project can only have one. SRC /pages/ create a webView folder containing WXML/WXSS /json/js

WXML: < web - view the SRC ="{{ src }}"></web-view>
Copy the code
Js: get the url from onLoad and assign it to data so that the SRC value can be retrieved from WXML. Page({ data: { url:' ',
	},
	onLoad: function (param) {
		this.setData({
			url: decodeURIComponent(param.url),
		})
	}
});
Copy the code

Json/WXSS is an empty file. In the small program page jump to H5 page writing

wx.navigateTo({
    url: '.. /webview/index? url=https://www.baidu.com/'
});
Copy the code

This successfully jumps from the small program to the H5 page.

H5 page return small program

To return to the small program page from the H5 page, use the jump method provided by the wechat SDK.

 window.wx.miniProgram.navigateTo({
    url: `/page/account/index`,
 });
Copy the code

To use the SDK method of wechat, you need to send a signature to verify wx.config first.

Four, small program and H5 mutual jump pit encountered

  1. 【 description 】 wx. MiniProgram. NavigateTo url cannot jump problem

    [Fix] : tabBar in app.json and URL in wx.navigateTo reference the same page

    First pages/account/index the path in the app. The json already exists, namely the current page from the H5 window. Wx. MiniProgram. NavigateTo (url) url has and app. Json. Now you can’t jump this way, you have to change towindow.wx.miniProgram.reLaunch(url)

If the URL is defined in app.json, use reLaunch. If not, use miniprogram.navigateto (url).

  1. [Description] When I jump to the H5 protocol detail page in the mini program, I enter the system error page (the error page defined in the project). When I open the protocol detail page on my wechat official account, it will not appear when I enter the mini program again.

    [Problem solving] Here I judge is related to the login state, because I first visit the public number, at this time there is a login state in the browser, so access protocol details page in the small program will not enter the system error page.

    Problem locating process: H5 is a VUE page, start the debugger from the routing file /routes/index.js, and sure enough find the problem in the login JS, check the login js there is a process of logging out first, and then login (here is because of the reasons of different brokerages, During the logout process, the CGI threw an exception and was globally caught, so it entered the system error page. The latter solution is to try catch the exception on logout rather than globally catch it. 
    try {await request('logout.cgi')} catch(e) {console.log('error')}
Copy the code

    Note down question 2, I want to tell myself that there is often a bugger, and I will look at the debugger one by one to see where the error comes from. Keep that in mind.