简单的讲就是我们可以在小程序内放置一个<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.com"></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"文章来源:https://www.toymoban.com/news/detail-716112.html
}文章来源地址https://www.toymoban.com/news/detail-716112.html
到了这里,关于微信小程序webview内嵌H5跳转页面后没有返回按钮完美解决方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!