目录
1、 H5嵌套网页
1.1、 重要准备
1.2、 引入网页
1.3、 屏蔽ts类型判断
1.4、 参考代码
2、 Uniapp webview 页面（vue 页面）
2.1、webview页面
3、 其它配置
3.1、uniapp
3.2、H5项目
- H5嵌套网页
- 重要准备
H5 页面需要引入 uni 的 js，或者自己下载对应js文件，文档附完整下载uni.webview.1.5.6.js：
<script src="https://cdn.jsdelivr.net/npm/uni-app@2.0.0/dist/uni.webview.1.5.6.js"></script>
- 引入网页
将下载的uni.webview.1.5.6.js引入网页，文件优先放置在public下，或者可放置在assets，参考如下图：
- 屏蔽ts类型判断
vue项目，屏蔽ts类型判断，uni-webview.d.ts具体内容如下：
declare var uni: {
postMessage: (opt: { data: any }) => void
webView: {
getEnv: (cb: (res: any) => void) => void
}
}
// 全局事件
interface DocumentEventMap {
UniAppJSBridgeReady: Event
}
- 参考代码
具体测试页面参考如下：
具体测试代码如下：
<template>
<div class="container"
style="display: flex; height: 100vh; justify-content: center; align-items: center;flex-direction: column;">
<button @click="tests">测试1、点击按钮通知</button>
<br>
<div> 测试2，进入页面自动通知</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
//=============点击按钮测试通知栏=========================================================================
// 点击测试
const tests = () => {
sendUniMsg('测试通知', '通知内容Test，这是一段测试通知！！！。')
}
const bridgeReady = ref(false)
// 发送消息函数
const sendUniMsg = (title: string, content: string) => {
if (!bridgeReady.value) {
// console.warn('bridge 还没准备好！')
return
}
//安卓、苹果实时发送通知，区别在webView
if (uni?.webView && typeof (uni.webView as any).postMessage === 'function') {
(uni.webView as any).postMessage({
data: {
title,
content
}
})
}
// uni.webView.postMessage({
// data: {
// title,
// content
// }
// })
// uni.postMessage({
// data: {
// title,
// content
// }
// })
}
onMounted(() => {
// 只监听一次
const readyHandler = () => {
// console.log('bridge就绪，可以调用uni.postMessage')
bridgeReady.value = true
}
document.addEventListener('UniAppJSBridgeReady', readyHandler, { once: true })
// 【重要兼容】如果脚本加载比vue快，事件已经触发完了，直接判断
// 可以用 uni.webView.getEnv 探测是否在uni webview环境
if (typeof uni !== 'undefined' && uni?.webView) {
uni.webView.getEnv((res: any) => {
// res.plus === true 代表在uni-app webview中
if (res.plus) {
bridgeReady.value = true
// console.log('在uni webview环境')
}
})
}
//这里是进入页面默认测试通知
// document.addEventListener('UniAppJSBridgeReady', () => {
// console.log('bridge就绪，可以调用uni.postMessage')
// uni.postMessage({
// data: {
// title: '通知标题222222222',
// content: '通知内容2222222222'
// }
// })
// })
})
//==============================================================================================
</script>
<style scoped></style>
- Uniappwebview 页面（vue 页面）
2.1、webview页面
全部代码如下：
代码：
<template>
<web-view :src="h5Url" @message="handlePostMessage" />
</template>
<script>
export default {
data() {
return {
h5Url: "http://183.207.187.82:18007/testapp/#/",
}
},
methods: {
handlePostMessage(e) {
console.log('外层收到H5消息，原始：', e.detail.data)
const msg = e.detail.data?.[0] || {}
const title = msg.title || '系统通知'
const content = msg.content || '您有一条新消息'
console.log(title);
// #ifdef APP-PLUS
try {
uni.createPushMessage({
title: title,
content: content,
sound: "system",
// channelId: "msg-channel",安卓专属，可能会导致无法显示通知，非必要，可注释
cover: false,
payload: msg,
success(res) {
console.log(' 创建通知成功', res)
},
fail(err) {
console.error(' 创建通知失败', err)
}
})
} catch (ex) {
console.error('通知异常：', ex)
}
// #endif
}
}
}
</script>
- 其它配置
（本地测试可能不需要设置也能达到效果，如果需要端对端通知，必须勾选，并且需要配合数据库，接口使用。如用户a，推送通知到指定用户或者用户群，一定需要！！！）
3.1、uniapp
H5 这边只做业务，消息由后端推 uniPush2.0，uni-app 原生监听推送，收到后展示通知栏，不走 webview 消息通道。
开启推送参考图如下：
3.2、H5项目
打包后，需要注意项目引入文件路径格式，打包后默认不是./，部署需要注意：
