To put it simply, we can place a <web-view> component in the mini program to link to our HTML page.
But when you click to jump to the page. There is no upper left corner of the page! ! Back button! ! As a result, I can't go back. Isn't this funny?
After looking at other mini programs, I found that if two mini program pages jump, there will be a return button in the upper left corner of the second page. Then we can think of it, if we also put a webview component on the second page to display the link after the jump, wouldn't it be a perfect solution?
1. Code used to jump to the second page of the mini program:
（1）pages/webview/webview.wxml
Webview.wxml blank page is enough
(2) pages/webview/webview.js webview.js code is as follows:
Page({
//Enter page loading
onLoad: function(e) {
wx.showLoading({
Title: 'Loading'
});
},
onShow: function(e){
wx.showLoading({
Title: 'Loading'
});
wx.navigateTo ({
url: '/pages/index/index',
})
},
})
2. The WeChat applet index is used to nest the <web-view> component to display the H5 web page we want to jump to.
pages/index/index.wxml index.wxml code is as follows:
<view>
<web-view src="https://www.baidu.com"></web-view>
</view>
3. The code in the app.json page is as follows:
{
"pages": [
"pages/webview/webview",
"pages/index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Mini program name",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}