关于小程序嵌套网页，使用顶部原生后退按钮的实现

最新推荐文章于 2024-02-01 15:44:18 发布

chunchun1681487

最新推荐文章于 2024-02-01 15:44:18 发布

阅读量533

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3247416/blog/2459325

版权

1.官方<web-view/>提供的接口

小程序官方 <web-view/> 组件提供了一套jssdk，用户网页和小程序交互。其中 wx.miniProgram.navigateTo 接口提供了原生页面之间跳转的能力。

网页中引用JS

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

执行该方法实现原生页面跳转

wx.miniProgram.navigateTo({url: '../b/b?weburl=product.html&id=1'})//参数中不能出现？否则会不被识别

2.顶部后退按钮出现的时机

当前显示的小程序页不是首页的时候，会自动出现后退按钮。

3.实现思路

基于以上两点，将原来的单页webview 改成两个webview 页面，页面A显示网页首页。网页首页下的所有超链接通过wx.miniProgram.navigateTo方法打开页面B,由B页面显示

B页面代码如下

b.wxml代码

<web-view class='webview' src="{{url}}" bindmessage="updatefx" ></web-view>

b.js代码

/*监听页面加载*/

onLoad: function (options) {

var url = options.weburl;//此处接收navigateTo传过来的链接

var u2 = "";

delete options.weburl;

console.log(options)

for (var i in options){

u2 += "&" + i + "=" + options[i];

}

url += u2==""?u2:"?"+u2.substring(1);

console.log(url);

this.setData({

url: 'https://wxapp.rongsue.com/sudx/'+url //动态设置需要显示的网页

})

}

注：经过实测，顶部后退按钮会优先处理网页中的后退，如果网页中退回到了顶层，则最后从B页面退回至A页面。

转载于:https://my.oschina.net/u/3247416/blog/2459325

关注