微信小程序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',

            })

          },

        })

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"

}