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

微信小程序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.***"></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"

}

转载请说明出处内容投诉
CSS教程_站长资源网 » 微信小程序webview内嵌H5跳转页面后没有返回按钮完美解决方案

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买