StarSky
StarSky
  • 发布:2021-08-09 17:16
  • 更新:2023-06-02 10:48
  • 阅读:2102

nvue的web-view与uniapp的h5项目进行通讯传值接受不到的问题(精华踏坑分享)

分类:nvue

nvue页面

<web-view src="http://192.168.169.62:8080" @onPostMessage="onPostMessage"></web-view>//将你的h5项目运行以下,用你自己的h5地址。
在methods方法中定义onPostMessage事件。
onPostMessage(e) { //打印接收的参数 console.log(e) }

uniapp创建的h5项目

先在h5项目的根路径下手动创建一个html文件,例如命名为h5.html的文件,并在源码视图的h5配置里模板路径选择该文件,接下来在static目录下引入web-view.js文件,然后在main.js中挂载到Vue实例上,
import webUni from './static/web-view.js'
Vue.prototype.$webUni = webUni;

在你需要的h5的某个页面进行使用

this.$webUni.postMessage({
data:{
pathUrl: '会议列表' //传递的参数
}
})
这样你的nvue页面就可以接收到这个参数啦。
支持以下方式进行打点调用this.$webUni.navigateTo({url: '/pages/index/index'})//非tabbar页面。this.$webUni.switchTab({url: '/pages/index/index'}),还有navigateBack、reLaunch、redirectTo、getEnv这些。

2 关注 分享
芬吸员儿 阿飞呀

要回复文章请先登录注册

阿飞呀

阿飞呀

牛逼,必须给你来个赞
2023-06-02 10:48
芬吸员儿

芬吸员儿

这是改了官方的uni.webview.js实现的吗? 官方这个文件引进uni-h5项目好像会被 uni-h5的uni变量覆盖掉, 导致失效
2022-12-17 16:09
梅花三

梅花三

完美!!!比官方靠谱!
2022-11-28 20:37