当前位置：首页 > news >正文

webview真正实现通信！！！

news 来源：原创 2025/5/9 13:19:54

相信大家尝试了很多方法都无法通信，现在我说一下我的开发经历和解决过程，包成功哈！

1：首先去webview熟读一下--发现webview用的是html，自己写的却是vue文件，我该如何书写呢？

2：翻到一篇文章说是下载这个uni.webview.1.5.6.js玩意后引入，然后去调用里面的postMessage方法--发现报错不认识这个玩意里面的方法！

解决

1.首先uni.webview.1.5.6.js我不使用他的，你们去复制以下代码放入一个js文件代替它【比如uni.webview.111.js】

!(function(global, factory) {'object' == typeof exports && 'undefined' != typeof module? (module.exports = factory()): 'function' == typeof define && define.amd? define(factory): ((global = global || self).hx = factory());
})(this, function() {'use strict';try {var passiveEventsSupport = {};Object.defineProperty(passiveEventsSupport, 'passive', {get: function() {return true;},}),window.addEventListener('test-passive', null, passiveEventsSupport);} catch (error) {}var hasOwnProperty = Object.prototype.hasOwnProperty;function hasProperty(object, property) {return hasOwnProperty.call(object, property);}var webviewIds = [];function getWeexPostMessage() {return window.__dcloud_weex_postMessage || window.__dcloud_weex_;}function getUniAppPostMessage() {return window.__uniapp_x_postMessage || window.__uniapp_x_;}var invokeAppService = function(action, payload) {var requestData = {options: {timestamp: +new Date(),},name: action,arg: payload,};if (getUniAppPostMessage()) {console.log('uniAppPostMessage');if ('postMessage' === action) {var messageData = {data: payload,};return getUniAppPostMessage()? getUniAppPostMessage()(messageData): window.__uniapp_x_.postMessage(JSON.stringify(messageData));}var serviceRequest = {type: 'WEB_INVOKE_APPSERVICE',args: {data: requestData,webviewIds: webviewIds,},};getUniAppPostMessage()? getUniAppPostMessage(): window.__uniapp_x_.postMessageToService(JSON.stringify(serviceRequest));} else if (getWeexPostMessage()) {console.log('weexPost');if ('postMessage' === action) {var messageDataForWeex = {data: [payload],};return getWeexPostMessage()? getWeexPostMessage()(messageDataForWeex): window.__dcloud_weex_.postMessage(JSON.stringify(messageDataForWeex));}var weexServiceRequest = {type: 'WEB_INVOKE_APPSERVICE',args: {data: requestData,webviewIds: webviewIds,},};getWeexPostMessage()? getWeexPostMessage()(weexServiceRequest): window.__dcloud_weex_.postMessageToService(JSON.stringify(weexServiceRequest));} else {if (!window.plus) {console.log('window.parent.postMessage');return window.parent.postMessage({type: 'WEB_INVOKE_APPSERVICE',data: requestData,pageId: '',},'*',);}if (webviewIds.length === 0) {var currentWebview = plus.webview.currentWebview();if (!currentWebview) throw new Error('plus.webview.currentWebview() is undefined');var parentWebview = currentWebview.parent();var webviewId = '';webviewId = parentWebview ? parentWebview.id : currentWebview.id;webviewIds.push(webviewId);}if (plus.webview.getWebviewById('__uniapp__service')) {console.log('postMessageToUniNView');plus.webview.postMessageToUniNView({type: 'WEB_INVOKE_APPSERVICE',args: {data: requestData,webviewIds: webviewIds,},},'__uniapp__service',);} else {console.log('localEvalJSMessage');var jsonRequestData = JSON.stringify(requestData);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("WEB_INVOKE_APPSERVICE",' +jsonRequestData +',' +JSON.stringify(webviewIds) +');',);}}};var router = {navigateTo: function(options) {var params = options || {};var url = params.url;invokeAppService('navigateTo', {url: encodeURI(url),});},navigateBack: function(options) {var params = options || {};var delta = params.delta;invokeAppService('navigateBack', {delta: parseInt(delta) || 1,});},switchTab: function(options) {var params = options || {};var url = params.url;invokeAppService('switchTab', {url: encodeURI(url),});},reLaunch: function(options) {var params = options || {};var url = params.url;invokeAppService('reLaunch', {url: encodeURI(url),});},redirectTo: function(options) {var params = options || {};var url = params.url;invokeAppService('redirectTo', {url: encodeURI(url),});},getEnv: function(callback) {if (getUniAppPostMessage()) {callback({uvue: true,});} else if (getWeexPostMessage()) {callback({nvue: true,});} else if (window.plus) {callback({plus: true,});} else {callback({h5: true,});}},postMessage: function(options) {var params = options || {};invokeAppService('postMessage', params.data || {});},login: function(data) {data = data || {};data.action = 'login';invokeAppService('postMessage', data || {});},};var isUniApp = /uni-app/i.test(navigator.userAgent);var isHtml5Plus = /Html5Plus/i.test(navigator.userAgent);var isReadyStateComplete = /complete|loaded|interactive/;var isMyApp =window.my &&navigator.userAgent.indexOf(['t', 'n', 'e', 'i', 'l', 'C', 'y', 'a', 'p', 'i', 'l', 'A'].reverse().join('')) >-1;var isSwanApp = window.swan && window.swan.webView && /swan/i.test(navigator.userAgent);var isQQMiniProgram =window.qq &&window.qq.miniProgram &&/QQ/i.test(navigator.userAgent) &&/miniProgram/i.test(navigator.userAgent);var isToutiaoMiniProgram = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent);var isWeChatMiniProgram =window.wx &&window.wx.miniProgram &&/micromessenger/i.test(navigator.userAgent) &&/miniProgram/i.test(navigator.userAgent);var isQuickApp = window.qa && /quickapp/i.test(navigator.userAgent);var isKuaishouMiniProgram =window.ks &&window.ks.miniProgram &&/micromessenger/i.test(navigator.userAgent) &&/miniProgram/i.test(navigator.userAgent);var isFeishuMiniProgram = window.tt && window.tt.miniProgram && /Lark|Feishu/i.test(navigator.userAgent);var isJDminiProgram = window.jd && window.jd.miniProgram && /jdmp/i.test(navigator.userAgent);var isXhsMiniProgram = window.xhs && window.xhs.miniProgram && /xhsminiapp/i.test(navigator.userAgent);for (var handler,initHandler = function() {window.UniAppJSBridge = true;document.dispatchEvent(new CustomEvent('UniAppJSBridgeReady', {bubbles: true,cancelable: true,}),);},eventHandlers = [function(callback) {if (isUniApp || isHtml5Plus)return (getUniAppPostMessage() || getWeexPostMessage()? document.addEventListener('DOMContentLoaded', callback): window.plus && isReadyStateComplete.test(document.readyState)? setTimeout(callback, 0): document.addEventListener('plusready', callback),router);},function(callback) {if (isWeChatMiniProgram)return (window.WeixinJSBridge && window.WeixinJSBridge.invoke? setTimeout(callback, 0): document.addEventListener('WeixinJSBridgeReady', callback),window.wx.miniProgram);},function(callback) {if (isQQMiniProgram)return (window.QQJSBridge && window.QQJSBridge.invoke? setTimeout(callback, 0): document.addEventListener('QQJSBridgeReady', callback),window.qq.miniProgram);},function(callback) {if (isMyApp) {document.addEventListener('DOMContentLoaded', callback);var myApp = window.my;return {navigateTo: myApp.navigateTo,navigateBack: myApp.navigateBack,switchTab: myApp.switchTab,reLaunch: myApp.reLaunch,redirectTo: myApp.redirectTo,postMessage: myApp.postMessage,getEnv: myApp.getEnv,};}},function(callback) {if (isSwanApp) return document.addEventListener('DOMContentLoaded', callback), window.swan.webView;},function(callback) {if (isToutiaoMiniProgram)return document.addEventListener('DOMContentLoaded', callback), window.tt.miniProgram;},function(callback) {if (isQuickApp) {window.QaJSBridge && window.QaJSBridge.invoke? setTimeout(callback, 0): document.addEventListener('QaJSBridgeReady', callback);var qaApp = window.qa;return {navigateTo: qaApp.navigateTo,navigateBack: qaApp.navigateBack,switchTab: qaApp.switchTab,reLaunch: qaApp.reLaunch,redirectTo: qaApp.redirectTo,postMessage: qaApp.postMessage,getEnv: qaApp.getEnv,};}},function(callback) {if (isKuaishouMiniProgram)return (window.WeixinJSBridge && window.WeixinJSBridge.invoke? setTimeout(callback, 0): document.addEventListener('WeixinJSBridgeReady', callback),window.ks.miniProgram);},function(callback) {if (isFeishuMiniProgram)return document.addEventListener('DOMContentLoaded', callback), window.tt.miniProgram;},function(callback) {if (isJDminiProgram)return (window.JDJSBridgeReady && window.JDJSBridgeReady.invoke? setTimeout(callback, 0): document.addEventListener('JDJSBridgeReady', callback),window.jd.miniProgram);},function(callback) {if (isXhsMiniProgram) return window.xhs.miniProgram;},function(callback) {return document.addEventListener('DOMContentLoaded', callback), router;},],i = 0;i < eventHandlers.length && !(handler = eventHandlers[i](initHandler));i++);handler || (handler = {});var hxAPI = 'undefined' != typeof hx ? hx : {};if (!hxAPI.navigateTo) for (var key in handler) hasProperty(handler, key) && (hxAPI[key] = handler[key]);return (hxAPI.webView = handler), hxAPI;
});

js文件

2.其次你写了个网页【.vue文件】，在该网页页面中引入该uni.webview.111.js

【import uniWeb from '@/uni.webview.111.js'】

3.将你需要传给app的数据写进去，一定是data里面放入你想传的数据！！

fn()
{
let commentData={title：'你好'}
uniWeb.postMessage({data: {xxx: 'xxx',xxx: 'xxx',commentData,},});
//总之格式是这样子
uniWeb.postMessage({data: {xxx},});
}

网页代码

4.app代码写法如下

首先是肯定考虑头部导航栏，你得设top距离给网页【也就是webviewStyles】，其次网页传过来的数据是靠webview标签中的 @onPostMessage="handleMessage"得到的【也就是数据监听】