微信小程序webview内嵌H5跳转页面后没有返回按钮完美解决方案

简单的讲就是我们可以在小程序内放置一个<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',

        })

      },

    })

1. 微信小程序index用来嵌套<web-view>组件显示我们要跳转的H5网页

pages/index/index.wxml index.wxml代码如下：

<web-view src="https://www.baidu.com"></web-view>

1. app.json页面里面的代码如下：

{

"pages": [

"pages/webview/webview",

"pages/index/index"

],

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "小程序名称",

"navigationBarTextStyle": "black"

},

"style": "v2",

"sitemapLocation": "sitemap.json"

}