H5 和 小程序 均使用 vue3 + ts + vite开发
0.在
uni-app H5项目static文件中创建本地jweixin-1.6.0.js和uni.webview.1.5.5.js文件
将下面的源代码复制到相应的文件中
源代码地址：
jweixin-1.6.0.js ：https://res.wx.qq.com/open/js/jweixin-1.6.0.js
uni.webview.1.5.5.js：https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.5.js
创建本地 jweixin-1.6.0.js 和 uni.webview.1.5.5.js文件
1.在原有
uni-app H5项目中引入jweixin-1.6.0、uni.webview.1.5.5
在index.html中导入相关的插件
<!-- 注意uni sdk放到body下面 -->
<script type="module" src="./src/static/jweixin-1.6.0"></script>
<script type="module" src="./src/static/uni.webview.1.5.5"></script>
<!-- <script type="text/javascript" src="https://saas-one.oss-cn-beijing.aliyuncs.com/uniapp/js/uni.webview.1.5.5.js"> -->
</script>
<script>
document.addEventListener('UniAppJSBridgeReady', function () {
uni.webView.getEnv(function (res) {
console.log('当前环境：' + JSON.stringify(res));
});
});
</script>
注意：
-
uni sdk放到body下面 - src 对应的目录文件不要带
.js后缀，不然会报错 - 不要使用
<script type="text/javascript" src="https://xxxxxxx/uni.webview.1.5.5.js">, 会导致 js 交互不起作用 - Q：
web-view加载uni-app H5，内部跳转冲突如何解决 A：使用uni.webView.navigateTo...
源码
2.
H5向小程序发送消息
<template>
<view>
<button @click="h5PostMessage">H5向小程序页面传递消息</button>
</view>
</template>
<script lang="ts">
import { ref, defineComponent } from 'vue';
export default defineComponent({
setup() {
function h5PostMessage() {
try {
uni.webView.postMessage({
data: {
title: '我是从uni-app H5 传递过来的 message',
desc: '传递的消息信息，必须写在 data 对象中',
},
});
uni.webView.navigateBack();
} catch (e: any) {
uni.showToast({ title: '**出错了** :' + e, icon: 'none' });
}
}
return {
h5PostMessage,
};
},
});
</script>
<style lang="scss"></style>
- 小程序接收
H5传递过来的消息
<web-view :webview-styles="webviewStyles" :src="webUrlRef" @message="onMessageHandler"></web-view>
function onMessageHandler(event: any) {
let res = event.detail.data;
console.log('小程序接收到H5传递过了的message:', JSON.stringify(res));
uni.showToast({
title: '小程序接收到H5传递过了的message:' + JSON.stringify(res),
icon: 'none'
});
}
微信小程序接收到H5传递过来的消息
