东营做网站优化价格,企业网站开发一般多少钱,wordpress 简历,查企业资质上什么网站背景 近期有个微信小程序需要用到web-view嵌套H5的场景#xff0c;该应用场景需要小程序中频繁传递数据到H5进行渲染#xff0c;且需要保证页面不刷新。 由于微信小程序与H5之间的通信限制比较大#xff0c;显然无法满足于我的业务场景 探索 由于微信小程序与webview的环境是…背景 近期有个微信小程序需要用到web-view嵌套H5的场景该应用场景需要小程序中频繁传递数据到H5进行渲染且需要保证页面不刷新。 由于微信小程序与H5之间的通信限制比较大显然无法满足于我的业务场景 探索 由于微信小程序与webview的环境是完全隔离的且没有突破的地方只能将关键点放在已开放的方式上来中间有利用公共存储空间cookie、SessionStorage和LocalStorage但是很遗憾无法突破后面也采用websocket利用服务器来进行双向交互但是由于网络的不稳定性导致数据可能会有一定的延迟。
思路 既然小程序只能通过改变url链接来向H5传递参数那么我就动态改变url来传递即可但是还需要解决的问题是一旦改变url页面会重新加载这个是不能接受的。 路由的hash模式正好可以做到这一点那么我们通过动态改变url的hash值H5页面监听hash值的变化就能完美解决该问题了话不多说直接开干。 实战
小程序
web-view代码
web-view src{{url}}{{hashStr}}/web-view 小程序js代码代码通过setInterval模拟实时传递不同参数到H5
Component({data: {url: http://127.0.0.1:8080/home?typewx,hashStr: ,},methods: {onLoad: function () {const _this this; setInterval(() {//此处模拟动态改变url的hash值给h5传值const postData{name: zhangsan,time: new Date()}_this.setData({hashStr:#time${JSON.stringify(postData)}})}, 2000);},}
});
注意hashStr的值必须以#开始浏览器才会识别为hash,否则无效
H5应用
在js中添加一个hashchange监听window.location.hash的变化即可 window.onhashchange function() {console.log(The hash has changed!);const newHash window.location.hash;console.log(New hash:, newHash);
};
以上方式即可完美解决我的应用场景 以为结束了其实还没有上面的方式的确可行但是我是vue项目呀其中还用到了vue-router组件通过上述直接监听页面还是会刷新 由于使用了vue-router插件那么hash的变化vue-router会默认通过hash来进行导航也会加载刷新页面所以我们还需要设置一个路由守卫用来判断如果path没有变化只是hash改变则不进行导航具体配置如下
import {createRouter, createWebHashHistory} from vue-router;const routes [ {path: /home,name: home,component: () import(../components/Home.vue)},
]
const router createRouter({history: createWebHashHistory(),routes
});router.beforeEach((to, from, next) {if (to.pathfrom.path) { next(false); // 阻止导航行为} else {next(); // 正常导航}
});export default router;
注意点
1、微信小程序会对url进行decodeURIComponent编码故在解析的的时候注意使用encodeURIComponent解码
2、如果动态改变url的hash频率过快由于vue-router在内部调用了history.replaceState(),如果太频繁会触发浏览器的安全策略抛出一个SecurityError错误这个可能是我的vue-router版本浏览器兼容性问题导致的对此没有深究有哪位大佬知道的麻烦为小弟解惑。 SecurityError: Failed to execute replaceState onHistory: Attempt to use history.replaceState() more than100 times per 30 secondsin
