如果直接使用hash值传递参数,ios上会异常添加页面栈,点击小程序左上角会返回到上一次带hash的地址,参数传递多少次,页面栈就有多少个。以下代码解决了这个问题,废话不多说,直接贴代码。
//在webview中添加代码
let hash;
// 监听hash变化
window.addEventListener("popstate", function() {
// 有hash值时返回上一个页面,并储存hash。
// 因为返回了上一个页面,会立马进入else分支。
// 将存好的hash渲染到页面
if(location.hash){
hash = location.hash.split('#')[1];
history.back();
} else {
//hash值最好是编码后的数据
document.getElementsByTagName('body')[0].innerHTML = '解码后参数:' + decodeURIComponent(hash);
}
}, false);
wxml中引入web-view组件
<web-view src='{{src}}'></web-view>
小程序js代码
const src = 'http://127.0.0.1:8080/'; //替换成webview地址
Page({
data: {
src: src,
},
onLoad(){
let j = 0;
// 每2秒传递一次值
setInterval(() => {
let a = {test: j++};
let data = encodeURIComponent(JSON.stringify(a));//hash值最好经过编码
this.setData({src: `${src}#${data}`})
}, 2000);
}
})
请问下,我这样小程序里webview页面顶部会一直有进度条在不停的加载,如何不显示进度条呢
然而现在已经不行了,改#后的hash也会刷新web-view的
点个赞, 采用该思路,实现了基础模块。
让 h5与原生微信小程序权限(照片、定位等)交互可以实现(不用刷新界面,h5监听动态数据绑定就好了)
解决了界面现象保留问题、页面回退等问题。
现在遇到个问题,微信原生分享功能会只分享原始的微信界面,webview详情页面并没有(处理中)