uniapp微信小程序使用webview嵌套uniappH5，并实现通信
| 后台-插件-广告管理-内容页头部广告（手机） |
uniapp微信小程序使用webview嵌套uniappH5，并实现通信
公司业务需要实现微信小程序调起手机文件管理实现pdf上传，但是微信不支持这种操作，使用wx.chooseMessageFile或者uni.chooseMessageFile，只能调起微信聊天框选择文件，经过多方研究了解，最后决定使用webview嵌套H5的方式来实现，共耗时两天半，以下为各种踩坑记录，希望能帮到大家（看完整代码直接拉到最后）。
一、技术准备与实现方案
因为之前已经写好了相应的上传页面与逻辑，在看了官网的webview示例后，就想着能够直接使用之前的界面，不再单独写html（真不想写T_T），正好项目（uniapp vue3+ts）是需要发布H5的，于是便开始探究如何自己调自己。下面为具体实现步骤(非最终代码)：
1.1 将项目发布为H5可以外网访问。
1.2 小程序中使用webview嵌入H5对应界面。
有其他方式可以实现通信（wx有专门的postMessage），笔者这里直接将参数带在url后面，再通过@message方法接收参数回调实现通信（实际上传逻辑都在H5完成了，并没有用到回调）
<template> <view class="box"> <web-view :webview-styles="webviewStyles" :src=webViewUrl @message="getMessage">web-view> view> template>- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
- 6
- 7
1.3 H5界面获取参数。
onLoad(() => { //获取地址栏传参 const paraString = window.location.href; const queryData = JSON.parse(decodeURIComponent(paraString.split("=")[1])); console.log(queryData, 'queryData'); })- 1
- 2
- 3
- 4
- 5
- 6
1.4 H5回调传参
uni.postMessage定义回调参数，uni.navigateBack销毁界面触发回调
const confirm = () => { console.log('confirm'); uni.postMessage({ data: { action: 'message' } }); uni.navigateBack({ delta: 1 }); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
以上4个步骤就是小程序调自身H5的所有步骤了，但是，你以为实现了吗，还有一堆问题等着解决呢。
二、问题处理
2.1 uni-webview.js的引入
笔者本以为在uniapp中就可以直接调用uni的方法，结果在调用uni.postMessage就会报错:类型“Uni”上不存在属性“postMessage”。ts(2339)
一番查看后发现uni确实没有导出postMessage方法，再次看看文档，发现需要引入uni-webview.js文件，但是在引入过后也依然不能调用，人麻了。
2.2 修改uni-webview.js源码
花费了不少时间，最后发现引入的uni-webview.js文件也导出了uni对象，会被uniapp本身的uni对象覆盖，改源码吧，把uni-webview.js下载到本地，全局搜一下uni，把定义的uni与导出的uni改为webUni，这是笔者修改过的uni.webview.1.5.5.js文件。
然后把文件放在本地（笔者放在了src/static/js下），在index.html文件中按官方文档正常引入
| 后台-插件-广告管理-内容页尾部广告（手机） |
