当前位置: 首页> 教育> 幼教 > html教程 菜鸟教程_一键优化免费下载_企业推广策划方案_可以免费投放广告的平台

html教程 菜鸟教程_一键优化免费下载_企业推广策划方案_可以免费投放广告的平台

时间:2025/7/10 3:17:53来源:https://blog.csdn.net/qq_32430463/article/details/144068787 浏览次数:0次
html教程 菜鸟教程_一键优化免费下载_企业推广策划方案_可以免费投放广告的平台

背景

        近期有个微信小程序需要用到web-view嵌套H5的场景,该应用场景需要小程序中频繁传递数据到H5进行渲染,且需要保证页面不刷新。

        由于微信小程序与H5之间的通信限制比较大,显然无法满足于我的业务场景

探索

        由于微信小程序与webview的环境是完全隔离的,且没有突破的地方,只能将关键点放在已开放的方式上来;中间有利用公共存储空间cookie、SessionStorageLocalStorage,但是很遗憾,无法突破,后面也采用websocket利用服务器来进行双向交互,但是由于网络的不稳定性,导致数据可能会有一定的延迟。

思路

        既然小程序只能通过改变url链接来向H5传递参数,那么我就动态改变url来传递即可,但是还需要解决的问题是,一旦改变url页面会重新加载,这个是不能接受的。

        路由的hash模式正好可以做到这一点,那么我们通过动态改变urlhash值,H5页面监听hash值的变化就能完美解决该问题了,话不多说,直接开干。

实战

小程序

web-view代码

<web-view src="{{url}}{{hashStr}}"></web-view>

 小程序js代码,代码通过setInterval模拟实时传递不同参数到H5

Component({data: {url: `http://127.0.0.1:8080/home?type=wx`,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.path===from.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

关键字:html教程 菜鸟教程_一键优化免费下载_企业推广策划方案_可以免费投放广告的平台

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: