uniapp开发使用 web-view APP 与 H5 (vue)通信
2024-09-06 15:06:33
需求：这边是uniapp开发的APP 需要内嵌H5（vue），就得使用web-view跳转网页
H5端
在vue的index,html文件引入web-view的插件
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
在vue界面当中
// 通过事件使用uniapp的 方法
postMsg(){
// 重点 “uni.postMessage,像APP端发送消息”
uni.postMessage({
data: {
action: '我是消息'
}
});
},
uniapp端
<template>
<view :style="'paddingTop:' + statusBarHeight + 'px;backgroundColor:' + warpperBgColor">
<web-view ref="webview" @message="getMessage" @onPostMessage="getPostMessage" :src="url" :style="'height: ' + windowHeight + 'px;'" />
</view>
</template>
设置内容宽高
methods: {
设置内容宽高
nitializeUrl() {
let info = uni.getSystemInfoSync();
this.windowHeight = info.windowHeight - info.statusBarHeight;
this.statusBarHeight = info.statusBarHeight;
},
H5与APP通信 这里接收H5传递的参数，触发事件
getMessage(e) {
const val = e.detail.data[0].action || ''
if(val) {
uni.reLaunch({
url:'/pages/home'
})
}
},
}
最新文章
- JMX
- 《利用Python进行数据分析》第5章学习笔记
- Ruby 类案例
- YbRapidSolution.Mvc判断不同用户登录不同页面
- p3p之讲解
- Linux系统编程（21）——信号的产生
- c++ primer plus 习题答案(3)
- tag标签记录
- linux bash 和 sh的区别
- 51NOD 1185 威佐夫游戏 V2(威佐夫博弈)
- UICollectionViewController的用法1
- vps 切换内核
- 用Copy命令合并文件
- [STL][C++]VECTOR
- PAT 1053 住房空置率 (20)（代码+思路）
- 漫谈js自定义事件、DOM/伪DOM自定义事件
- Android倒计时案例展示
- VUE中关于表单提交的简单实现
- main(argc,argv[])
- 【python】Python的logging模块封装