简单的讲就是我们可以在小程序内放置一个<web-view>组件来链接我们的HTML页面了。
但是点击跳转页面的时候。页面左上角没有!!返回按钮!!导致回不去了,这不是搞笑的吗。
看了下其他的小程序,发现如果是两个小程序页面跳转的话,第二个页面的左上角是会有返回按钮的。那我们可以想到,如果在第二个页面也放个webview组件,用来显示跳转之后的链接,不就完美解决了吗?
1. 用来跳转到小程序第二个页面的代码:
(1)pages/webview/webview.wxml
webview.wxml空白页面就可以
(2)pages/webview/webview.js webview.js代码如下:
Page({
// 进入页面加载
onLoad: function(e) {
wx.showLoading({
title: '加载中'
});
},
onShow: function(e){
wx.showLoading({
title: '加载中'
});
wx.navigateTo ({
url: '/pages/index/index',
})
},
})
2. 微信小程序index用来嵌套<web-view>组件显示我们要跳转的H5网页
pages/index/index.wxml index.wxml代码如下:
<view>
<web-view src="https://www.baidu.***"></web-view>
</view>
3. app.json页面里面的代码如下:
{
"pages": [
"pages/webview/webview",
"pages/index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小程序名称",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}