5分钟搞定uniapp与webview双向通信：最新uni.webview.js 1.5.6实战教程
5分钟搞定uniapp与webview双向通信：最新uni.webview.js 1.5.6实战教程
在移动应用开发中，混合开发模式越来越受到青睐，尤其是uniapp结合webview的方案。这种架构既能享受原生应用的性能，又能实现Web页面的灵活更新。本文将带你快速掌握最新版uni.webview.js 1.5.6的双向通信实现技巧，让你在5分钟内完成核心功能搭建。
1. 环境准备与SDK配置
1.1 获取最新版uni.webview.js
首先需要从官方渠道获取最新版本的SDK文件：
wget https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js提示：建议将文件下载到项目静态资源目录，如
static/js/下，确保打包时能正确包含。
1.2 HTML页面配置
在webview加载的HTML页面中，需要正确引入SDK文件：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview页面</title> </head> <body> <div id="app"></div> <!-- 必须在body底部引入 --> <script src="/static/js/uni.webview.1.5.6.js"></script> </body> </html>关键点说明：
- SDK必须放在
</body>标签前引入 - 路径需根据实际项目结构调整
- 确保文件加载无404错误
2. 建立通信桥梁
2.1 监听初始化事件
当webview页面加载完成后，SDK会自动触发UniAppJSBridgeReady事件：
document.addEventListener('UniAppJSBridgeReady', function() { console.log('通信桥梁已建立'); // 获取当前环境信息 uni.getEnv(function(res) { console.log('运行环境:', res.platform); }); });2.2 可用API概览
uni.webview.js 1.5.6提供了丰富的API方法：
| 方法名 | 描述 | 平台支持 |
|---|---|---|
navigateTo | 跳转页面 | 全平台 |
redirectTo | 重定向页面 | 全平台 |
postMessage | 发送消息 | 非H5 |
getEnv | 获取环境 | 部分平台 |
3. 实现双向通信
3.1 Webview向Uniapp发送消息
在webview页面中，可以通过以下方式发送消息：
// 方式1：使用postMessage API uni.postMessage({ data: { type: 'userAction', payload: 'clickedButton' } }); // 方式2：通过webView实例 uni.webView.postMessage({ data: '自定义消息内容' });在uniapp中接收消息：
// pages/index/index.vue export default { onLoad() { const currentWebview = this.$scope.$getAppWebview(); currentWebview.addEventListener('postMessage', (e) => { console.log('收到消息:', e.detail.data); }); } }3.2 Uniapp向Webview发送消息
uniapp端可以通过evalJS方法执行webview中的JS代码：
// 获取当前webview实例 const webview = this.$scope.$getAppWebview(); webview.evalJS("receiveDataFromApp('"+JSON.stringify(data)+"')");webview页面需要预先定义接收函数：
// 全局定义接收函数 window.receiveDataFromApp = function(data) { console.log('来自App的数据:', data); // 处理业务逻辑... }4. 跨平台兼容方案
4.1 H5环境的特殊处理
在H5环境下，可以使用标准的postMessageAPI：
// webview页面发送消息 window.parent.postMessage({ type: 'fromWebview', data: payload }, '*'); // uniapp页面接收 window.addEventListener('message', (event) => { if(event.data.type === 'fromWebview') { // 处理消息 } });4.2 统一封装方案
建议封装一个跨平台的通信工具类：
// utils/webviewBridge.js export default { send(data) { if(uni.getSystemInfoSync().platform === 'h5') { window.parent.postMessage(data, '*'); } else { uni.postMessage({ data }); } }, receive(callback) { if(uni.getSystemInfoSync().platform === 'h5') { window.addEventListener('message', (e) => callback(e.data)); } else { document.addEventListener('UniAppJSBridgeReady', () => { uni.onMessage(callback); }); } } }5. 实战案例：用户登录状态同步
下面通过一个典型场景演示双向通信的实际应用：
5.1 Webview页面代码
<!-- login.html --> <script> document.addEventListener('UniAppJSBridgeReady', function() { document.getElementById('loginBtn').addEventListener('click', () => { const userInfo = { username: document.getElementById('username').value, token: 'generated_token' }; // 发送登录信息给App uni.postMessage({ type: 'login', data: userInfo }); }); }); // 接收App的登出指令 window.receiveLogoutCommand = function() { clearUserSession(); alert('您已退出登录'); }; </script>5.2 Uniapp端处理
// App.vue export default { onLaunch() { // 监听所有webview的消息 uni.onMessage((res) => { if(res.type === 'login') { this.storeUserInfo(res.data); uni.showToast({ title: '登录成功' }); } }); }, methods: { logout() { // 通知所有webview登出 getCurrentPages().forEach(page => { const webview = page.$getAppWebview(); webview.evalJS("receiveLogoutCommand()"); }); } } }在实际项目中，这种通信机制可以完美解决混合开发中的状态同步问题。记得根据业务需求适当扩展通信协议，比如加入消息类型验证、数据加密等安全措施。