注:本文仅适用于页面使用web网页原生能力通过事件传递给uniapp壳体触发的项目创建事件分发器(uniapp壳体)//模块注册的事件保存类 class EventModule{ //保存的模块事件 events {} constructor(){} //注册事件 on(eventName,callback){ if(this.events[eventName]) return console.error(事件名已存在!); if(typeof callback ! function) return console.error(回调函数类型错误!); //注册模块事件 this.events[eventName] callback; } } //事件分发器 class EventEmit { //组件实例 instance null; //事件模块集合 eventMap new Map(); //事件集合 events null; //构造函数 constructor() {}; //创建实例 static init(){ if(!EventEmit.instance){ EventEmit.instance new EventEmit(); } return EventEmit.instance; } //获取当前模块的事件 static initEvents(){ //创建事件容器 this.events new EventModule() //返回容器类 return this.events; } //注册模块 use(moduleName,module) { if(this.eventMap.get(moduleName)) return console.error(模块名重复!); this.eventMap.set(moduleName,module.events); } //注册事件 on(eventName,callback){ if(typeof callback ! function) return console.error(回调函数类型错误!); //注册模块事件 this.events.on(eventName,callback); } //触发事件 emit(wv,{ moduleName,eventName,params }){ if(!wv) throw new Error(webview尚未加载完成!) if(!this.eventMap.get(moduleName)) return console.error(模块不存在!); //获取模块 const module this.eventMap.get(moduleName); //检查事件是否存在 if(!module[eventName]) return console.error(事件不存在!); //触发模块事件 module[eventName]({ send:(params){ const data JSON.stringify({ type:success,data:params }) wv.evalJS(onUniEventListener(${data})) }, error:(params){ const data JSON.stringify({ type:fail,data:params }) wv.evalJS(onUniEventListener(${data})) }},params); } } /** * 创建类实例 */ export default EventEmit首页使用(uniapp壳体)template div classpage web-view srchttp://192.168.x.xxx:8080 //你自己的ip messageAppEmit onPostMessageAppEmit /web-view /div /template script setup import { ref,onMounted } from vue; import { onLoad } from dcloudio/uni-app import EventEmit from /events/index.js import bluetoothEmit from /events/bluetooth; //事件分发器实例 const eventEmit EventEmit.init() //注册测试模块 eventEmit.use(bluetooth,bluetoothEmit); const pages getCurrentPages(); const page pages[pages.length - 1]; const webview page.$getAppWebview(); let wv; setTimeout((){ wv webview.children()[0]; },800); //网页向webview触发事件 const AppEmit (e){ //获取h5传过来的事件及参数 const event e.detail.data[0]; //分发事件 eventEmit.emit(wv,event) } /script style scoped langscss .page { padding-top: 60px; } /style注册模块事件(uniapp壳体)import initEventEmit from /events/index.js; const bluetoothEmit initEventEmit.initEvents(); bluetoothEmit.on(test,(res,params){ console.error(事件触发了,params) res.send({ msg:test发送给h5的消息 }) }) export default bluetoothEmituni.webview.js(web项目)在html页面或者main.js中引入uni.webview.js!function(e,n){objecttypeof exportsundefined!typeof module?module.exportsn():functiontypeof definedefine.amd?define(n):(ee||self).unin()}(this,(function(){use strict;try{var e{};Object.defineProperty(e,passive,{get:function(){!0}}),window.addEventListener(test-passive,null,e)}catch(e){}var nObject.prototype.hasOwnProperty;function i(e,i){return n.call(e,i)}var t[];function o(){return window.__dcloud_weex_postMessage||window.__dcloud_weex_}function a(){return window.__uniapp_x_postMessage||window.__uniapp_x_}var rfunction(e,n){var i{options:{timestamp:new Date},name:e,arg:n};if(a()){if(postMessagee){var r{data:n};return window.__uniapp_x_postMessage?window.__uniapp_x_postMessage(r):window.__uniapp_x_.postMessage(JSON.stringify(r))}var d{type:WEB_INVOKE_APPSERVICE,args:{data:i,webviewIds:t}};window.__uniapp_x_postMessage?window.__uniapp_x_postMessageToService(d):window.__uniapp_x_.postMessageToService(JSON.stringify(d))}else if(o()){if(postMessagee){var s{data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(s):window.__dcloud_weex_.postMessage(JSON.stringify(s))}var w{type:WEB_INVOKE_APPSERVICE,args:{data:i,webviewIds:t}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(w):window.__dcloud_weex_.postMessageToService(JSON.stringify(w))}else{if(!window.plus)return window.parent.postMessage({type:WEB_INVOKE_APPSERVICE,data:i,pageId:},*);if(0t.length){var uplus.webview.currentWebview();if(!u)throw new Error(plus.webview.currentWebview() is undefined);var gu.parent(),v;vg?g.id:u.id,t.push(v)}if(plus.webview.getWebviewById(__uniapp__service))plus.webview.postMessageToUniNView({type:WEB_INVOKE_APPSERVICE,args:{data:i,webviewIds:t}},__uniapp__service);else{var cJSON.stringify(i);plus.webview.getLaunchWebview().evalJS(UniPlusBridge.subscribeHandler(.concat(WEB_INVOKE_APPSERVICE,,).concat(c,,).concat(JSON.stringify(t),);))}}},d{navigateTo:function(){var earguments.length0void 0!arguments[0]?arguments[0]:{},ne.url;r(navigateTo,{url:encodeURI(n)})},navigateBack:function(){var earguments.length0void 0!arguments[0]?arguments[0]:{},ne.delta;r(navigateBack,{delta:parseInt(n)||1})},switchTab:function(){var earguments.length0void 0!arguments[0]?arguments[0]:{},ne.url;r(switchTab,{url:encodeURI(n)})},reLaunch:function(){var earguments.length0void 0!arguments[0]?arguments[0]:{},ne.url;r(reLaunch,{url:encodeURI(n)})},redirectTo:function(){var earguments.length0void 0!arguments[0]?arguments[0]:{},ne.url;r(redirectTo,{url:encodeURI(n)})},getEnv:function(e){a()?e({uvue:!0}):o()?e({nvue:!0}):window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var earguments.length0void 0!arguments[0]?arguments[0]:{};r(postMessage,e.data||{})}},s/uni-app/i.test(navigator.userAgent),w/Html5Plus/i.test(navigator.userAgent),u/complete|loaded|interactive/;var gwindow.mynavigator.userAgent.indexOf([t,n,e,i,l,C,y,a,p,i,l,A].reverse().join())-1;var vwindow.swanwindow.swan.webView/swan/i.test(navigator.userAgent);var cwindow.qqwindow.qq.miniProgram/QQ/i.test(navigator.userAgent)/miniProgram/i.test(navigator.userAgent);var pwindow.ttwindow.tt.miniProgram/toutiaomicroapp/i.test(navigator.userAgent);var _window.wxwindow.wx.miniProgram/micromessenger/i.test(navigator.userAgent)/miniProgram/i.test(navigator.userAgent);var mwindow.qa/quickapp/i.test(navigator.userAgent);var fwindow.kswindow.ks.miniProgram/micromessenger/i.test(navigator.userAgent)/miniProgram/i.test(navigator.userAgent);var lwindow.ttwindow.tt.miniProgram/Lark|Feishu/i.test(navigator.userAgent);var Ewindow.jdwindow.jd.miniProgram/jdmp/i.test(navigator.userAgent);var xwindow.xhswindow.xhs.miniProgram/xhsminiapp/i.test(navigator.userAgent);for(var S,hfunction(){window.UniAppJSBridge!0,document.dispatchEvent(new CustomEvent(UniAppJSBridgeReady,{bubbles:!0,cancelable:!0}))},y[function(e){if(s||w)return window.__uniapp_x_postMessage||window.__uniapp_x_||window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener(DOMContentLoaded,e):window.plusu.test(document.readyState)?setTimeout(e,0):document.addEventListener(plusready,e),d},function(e){if(_)return window.WeixinJSBridgewindow.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener(WeixinJSBridgeReady,e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridgewindow.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener(QQJSBridgeReady,e),window.qq.miniProgram},function(e){if(g){document.addEventListener(DOMContentLoaded,e);var nwindow.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(v)return document.addEventListener(DOMContentLoaded,e),window.swan.webView},function(e){if(p)return document.addEventListener(DOMContentLoaded,e),window.tt.miniProgram},function(e){if(m){window.QaJSBridgewindow.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener(QaJSBridgeReady,e);var nwindow.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(f)return window.WeixinJSBridgewindow.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener(WeixinJSBridgeReady,e),window.ks.miniProgram},function(e){if(l)return document.addEventListener(DOMContentLoaded,e),window.tt.miniProgram},function(e){if(E)return window.JDJSBridgeReadywindow.JDJSBridgeReady.invoke?setTimeout(e,0):document.addEventListener(JDJSBridgeReady,e),window.jd.miniProgram},function(e){if(x)return window.xhs.miniProgram},function(e){return document.addEventListener(DOMContentLoaded,e),d}],M0;My.length!(Sy[M](h));M);S||(S{});var Pundefined!typeof uni?uni:{};if(!P.navigateTo)for(var b in S)i(S,b)(P[b]S[b]);return P.webViewS,P}));创建触发器(web项目)export default class Events { instance null; eventMap {}; constructor() { if (!Events.instance) { Events.instance this; } return Events.instance; } emit(moduleName, options) { uni.postMessage({ data: { moduleName: moduleName, eventName: options.eventName, params: options.data } }); //绑定回调事件 this.eventMap[${moduleName}-${options.eventName}] { success: options.success ? options.success : () {}, fail: options.fail ? options.fail : () {} }; } on({ type, moduleName, eventName, data }) { switch (type) { case success: this.eventMap[${moduleName}-${eventName}].success(data); break; case fail: this.eventMap[${moduleName}-${eventName}].fail(data); break; } } }在入口注册(web项目 通常在main.js)import EventEmit from /system/events; const eventEmit new EventEmit(); //注册uniapp事件 window.onUniEventListener (data) eventEmit.on(data);页面中使用(web项目)import EventEmit from /system/events; const eventEmit new EventEmit(); const emit () { eventEmit.emit(bluetooth, { eventName: test, data: { msg: 你在干啥呢? }, success: (res) { console.log(结果, res); }, fail: (err) { console.log(发生了错误, err); } }); };
uniapp webview 与 web页面交互通信
注:本文仅适用于页面使用web网页原生能力通过事件传递给uniapp壳体触发的项目创建事件分发器(uniapp壳体)//模块注册的事件保存类 class EventModule{ //保存的模块事件 events {} constructor(){} //注册事件 on(eventName,callback){ if(this.events[eventName]) return console.error(事件名已存在!); if(typeof callback ! function) return console.error(回调函数类型错误!); //注册模块事件 this.events[eventName] callback; } } //事件分发器 class EventEmit { //组件实例 instance null; //事件模块集合 eventMap new Map(); //事件集合 events null; //构造函数 constructor() {}; //创建实例 static init(){ if(!EventEmit.instance){ EventEmit.instance new EventEmit(); } return EventEmit.instance; } //获取当前模块的事件 static initEvents(){ //创建事件容器 this.events new EventModule() //返回容器类 return this.events; } //注册模块 use(moduleName,module) { if(this.eventMap.get(moduleName)) return console.error(模块名重复!); this.eventMap.set(moduleName,module.events); } //注册事件 on(eventName,callback){ if(typeof callback ! function) return console.error(回调函数类型错误!); //注册模块事件 this.events.on(eventName,callback); } //触发事件 emit(wv,{ moduleName,eventName,params }){ if(!wv) throw new Error(webview尚未加载完成!) if(!this.eventMap.get(moduleName)) return console.error(模块不存在!); //获取模块 const module this.eventMap.get(moduleName); //检查事件是否存在 if(!module[eventName]) return console.error(事件不存在!); //触发模块事件 module[eventName]({ send:(params){ const data JSON.stringify({ type:success,data:params }) wv.evalJS(onUniEventListener(${data})) }, error:(params){ const data JSON.stringify({ type:fail,data:params }) wv.evalJS(onUniEventListener(${data})) }},params); } } /** * 创建类实例 */ export default EventEmit首页使用(uniapp壳体)template div classpage web-view srchttp://192.168.x.xxx:8080 //你自己的ip messageAppEmit onPostMessageAppEmit /web-view /div /template script setup import { ref,onMounted } from vue; import { onLoad } from dcloudio/uni-app import EventEmit from /events/index.js import bluetoothEmit from /events/bluetooth; //事件分发器实例 const eventEmit EventEmit.init() //注册测试模块 eventEmit.use(bluetooth,bluetoothEmit); const pages getCurrentPages(); const page pages[pages.length - 1]; const webview page.$getAppWebview(); let wv; setTimeout((){ wv webview.children()[0]; },800); //网页向webview触发事件 const AppEmit (e){ //获取h5传过来的事件及参数 const event e.detail.data[0]; //分发事件 eventEmit.emit(wv,event) } /script style scoped langscss .page { padding-top: 60px; } /style注册模块事件(uniapp壳体)import initEventEmit from /events/index.js; const bluetoothEmit initEventEmit.initEvents(); bluetoothEmit.on(test,(res,params){ console.error(事件触发了,params) res.send({ msg:test发送给h5的消息 }) }) export default bluetoothEmituni.webview.js(web项目)在html页面或者main.js中引入uni.webview.js!function(e,n){objecttypeof exportsundefined!typeof module?module.exportsn():functiontypeof definedefine.amd?define(n):(ee||self).unin()}(this,(function(){use strict;try{var e{};Object.defineProperty(e,passive,{get:function(){!0}}),window.addEventListener(test-passive,null,e)}catch(e){}var nObject.prototype.hasOwnProperty;function i(e,i){return n.call(e,i)}var t[];function o(){return window.__dcloud_weex_postMessage||window.__dcloud_weex_}function a(){return window.__uniapp_x_postMessage||window.__uniapp_x_}var rfunction(e,n){var i{options:{timestamp:new Date},name:e,arg:n};if(a()){if(postMessagee){var r{data:n};return window.__uniapp_x_postMessage?window.__uniapp_x_postMessage(r):window.__uniapp_x_.postMessage(JSON.stringify(r))}var d{type:WEB_INVOKE_APPSERVICE,args:{data:i,webviewIds:t}};window.__uniapp_x_postMessage?window.__uniapp_x_postMessageToService(d):window.__uniapp_x_.postMessageToService(JSON.stringify(d))}else if(o()){if(postMessagee){var s{data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(s):window.__dcloud_weex_.postMessage(JSON.stringify(s))}var w{type:WEB_INVOKE_APPSERVICE,args:{data:i,webviewIds:t}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(w):window.__dcloud_weex_.postMessageToService(JSON.stringify(w))}else{if(!window.plus)return window.parent.postMessage({type:WEB_INVOKE_APPSERVICE,data:i,pageId:},*);if(0t.length){var uplus.webview.currentWebview();if(!u)throw new Error(plus.webview.currentWebview() is undefined);var gu.parent(),v;vg?g.id:u.id,t.push(v)}if(plus.webview.getWebviewById(__uniapp__service))plus.webview.postMessageToUniNView({type:WEB_INVOKE_APPSERVICE,args:{data:i,webviewIds:t}},__uniapp__service);else{var cJSON.stringify(i);plus.webview.getLaunchWebview().evalJS(UniPlusBridge.subscribeHandler(.concat(WEB_INVOKE_APPSERVICE,,).concat(c,,).concat(JSON.stringify(t),);))}}},d{navigateTo:function(){var earguments.length0void 0!arguments[0]?arguments[0]:{},ne.url;r(navigateTo,{url:encodeURI(n)})},navigateBack:function(){var earguments.length0void 0!arguments[0]?arguments[0]:{},ne.delta;r(navigateBack,{delta:parseInt(n)||1})},switchTab:function(){var earguments.length0void 0!arguments[0]?arguments[0]:{},ne.url;r(switchTab,{url:encodeURI(n)})},reLaunch:function(){var earguments.length0void 0!arguments[0]?arguments[0]:{},ne.url;r(reLaunch,{url:encodeURI(n)})},redirectTo:function(){var earguments.length0void 0!arguments[0]?arguments[0]:{},ne.url;r(redirectTo,{url:encodeURI(n)})},getEnv:function(e){a()?e({uvue:!0}):o()?e({nvue:!0}):window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var earguments.length0void 0!arguments[0]?arguments[0]:{};r(postMessage,e.data||{})}},s/uni-app/i.test(navigator.userAgent),w/Html5Plus/i.test(navigator.userAgent),u/complete|loaded|interactive/;var gwindow.mynavigator.userAgent.indexOf([t,n,e,i,l,C,y,a,p,i,l,A].reverse().join())-1;var vwindow.swanwindow.swan.webView/swan/i.test(navigator.userAgent);var cwindow.qqwindow.qq.miniProgram/QQ/i.test(navigator.userAgent)/miniProgram/i.test(navigator.userAgent);var pwindow.ttwindow.tt.miniProgram/toutiaomicroapp/i.test(navigator.userAgent);var _window.wxwindow.wx.miniProgram/micromessenger/i.test(navigator.userAgent)/miniProgram/i.test(navigator.userAgent);var mwindow.qa/quickapp/i.test(navigator.userAgent);var fwindow.kswindow.ks.miniProgram/micromessenger/i.test(navigator.userAgent)/miniProgram/i.test(navigator.userAgent);var lwindow.ttwindow.tt.miniProgram/Lark|Feishu/i.test(navigator.userAgent);var Ewindow.jdwindow.jd.miniProgram/jdmp/i.test(navigator.userAgent);var xwindow.xhswindow.xhs.miniProgram/xhsminiapp/i.test(navigator.userAgent);for(var S,hfunction(){window.UniAppJSBridge!0,document.dispatchEvent(new CustomEvent(UniAppJSBridgeReady,{bubbles:!0,cancelable:!0}))},y[function(e){if(s||w)return window.__uniapp_x_postMessage||window.__uniapp_x_||window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener(DOMContentLoaded,e):window.plusu.test(document.readyState)?setTimeout(e,0):document.addEventListener(plusready,e),d},function(e){if(_)return window.WeixinJSBridgewindow.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener(WeixinJSBridgeReady,e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridgewindow.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener(QQJSBridgeReady,e),window.qq.miniProgram},function(e){if(g){document.addEventListener(DOMContentLoaded,e);var nwindow.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(v)return document.addEventListener(DOMContentLoaded,e),window.swan.webView},function(e){if(p)return document.addEventListener(DOMContentLoaded,e),window.tt.miniProgram},function(e){if(m){window.QaJSBridgewindow.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener(QaJSBridgeReady,e);var nwindow.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(f)return window.WeixinJSBridgewindow.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener(WeixinJSBridgeReady,e),window.ks.miniProgram},function(e){if(l)return document.addEventListener(DOMContentLoaded,e),window.tt.miniProgram},function(e){if(E)return window.JDJSBridgeReadywindow.JDJSBridgeReady.invoke?setTimeout(e,0):document.addEventListener(JDJSBridgeReady,e),window.jd.miniProgram},function(e){if(x)return window.xhs.miniProgram},function(e){return document.addEventListener(DOMContentLoaded,e),d}],M0;My.length!(Sy[M](h));M);S||(S{});var Pundefined!typeof uni?uni:{};if(!P.navigateTo)for(var b in S)i(S,b)(P[b]S[b]);return P.webViewS,P}));创建触发器(web项目)export default class Events { instance null; eventMap {}; constructor() { if (!Events.instance) { Events.instance this; } return Events.instance; } emit(moduleName, options) { uni.postMessage({ data: { moduleName: moduleName, eventName: options.eventName, params: options.data } }); //绑定回调事件 this.eventMap[${moduleName}-${options.eventName}] { success: options.success ? options.success : () {}, fail: options.fail ? options.fail : () {} }; } on({ type, moduleName, eventName, data }) { switch (type) { case success: this.eventMap[${moduleName}-${eventName}].success(data); break; case fail: this.eventMap[${moduleName}-${eventName}].fail(data); break; } } }在入口注册(web项目 通常在main.js)import EventEmit from /system/events; const eventEmit new EventEmit(); //注册uniapp事件 window.onUniEventListener (data) eventEmit.on(data);页面中使用(web项目)import EventEmit from /system/events; const eventEmit new EventEmit(); const emit () { eventEmit.emit(bluetooth, { eventName: test, data: { msg: 你在干啥呢? }, success: (res) { console.log(结果, res); }, fail: (err) { console.log(发生了错误, err); } }); };
