北京网络网站推广,锦州网站建设更好,wordpress 设置页面,宠物电商网站模板需求#xff1a;
1、需要在Uniapp开发的APP或小程序页面嵌入一个H5网页#xff0c;需要拿到H5给APP传递的数据。
2、并且这个H5是使用vuevant开发的。#xff08;其实跟使用uniapp开发H5一样#xff09;
实现步骤#xff1a;
1、首先需要兼容多端和App端#xff0c;因…需求
1、需要在Uniapp开发的APP或小程序页面嵌入一个H5网页需要拿到H5给APP传递的数据。
2、并且这个H5是使用vuevant开发的。其实跟使用uniapp开发H5一样
实现步骤
1、首先需要兼容多端和App端因此这里需要在h5项目的index.html文件引入多个js。
给app端传递需要引入uni.webview.1.5.5.js 这里是改后的1.5.5版本 把uni地方该为了webUni
!function(e,n){objecttypeof exportsundefined!typeof module?module.exportsn():functiontypeof definedefine.amd?define(n):(ee||self).webUnin()}(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/micromessenger/i.test(navigator.userAgent)/miniProgram/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 webUni?webUni:{};if(!P.navigateTo)for(var b in S)i(S,b)(P[b]S[b]);return P.webViewS,P}));其他多端需要引入不同端的js这里是多家小程序引入的js
script typetext/javascriptvar userAgent navigator.userAgent;if (userAgent.indexOf(AlipayClient) -1) {// 支付宝小程序的 JS-SDK 防止 404 需要动态加载如果不需要兼容支付宝小程序则无需引用此 JS 文件。 document.writeln(script srchttps://appx/web-view.min.js / script);} else if (/QQ/i.test(userAgent) /miniProgram/i.test(userAgent)) {// QQ 小程序 document.write(script typetext/javascript srchttps://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js\/script);} else if (/miniProgram/i.test(userAgent) /micromessenger/i.test(userAgent)) {// 微信小程序 JS-SDK 如果不需要兼容微信小程序则无需引用此 JS 文件。 document.write(script typetext/javascript srchttps://res.wx.qq.com/open/js/jweixin-1.4.0.js\/script);} else if (/toutiaomicroapp/i.test(userAgent)) {// 头条小程序 JS-SDK 如果不需要兼容头条小程序则无需引用此 JS 文件。 document.write(script typetext/javascript srchttps://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js\/script);} else if (/swan/i.test(userAgent)) {// 百度小程序 JS-SDK 如果不需要兼容百度小程序则无需引用此 JS 文件。 document.write(script typetext/javascript srchttps://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js\/script);} else if (/quickapp/i.test(userAgent)) {// quickapp document.write(script typetext/javascript srchttps://quickapp/jssdk.webview.min.js\/script);}/script
2、宿主tset.vue 需要在宿主APP或小程序嵌入webview页面使用message方法进行监听h5页面传递的数据这里是个页面demo注意不能再带有tab栏页面嵌入webview
templateview classcontentweb-view srchttps://xxx.com/xxdDev/#/ messagegetMessage onPostMessagegetMessage/web-view/view
/templatescriptexport default {data() {return {}},methods: {getMessage(e) {console.log(e,监听到H5发送的数据)}}}
/scriptstyle/style3、index.htmlH5项目完整的在index.html引入代码我这里把uni.webview.1.55.js放在了/static/js目录下
!DOCTYPE html
html langenheadmeta charsetUTF-8 /scriptvar coverSupport CSS in window typeof CSS.supports function (CSS.supports(top: env(a)) ||CSS.supports(top: constant(a)))document.write(meta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0 (coverSupport ? , viewport-fitcover : ) /)/scripttitle/title!-- 引入微信小程序兼容文件官网上还有其他平台的兼容文件这里只用了微信小程序所以就不判断环境了 --script typetext/javascriptvar userAgent navigator.userAgent;if (userAgent.indexOf(AlipayClient) -1) {// 支付宝小程序的 JS-SDK 防止 404 需要动态加载如果不需要兼容支付宝小程序则无需引用此 JS 文件。 document.writeln(script srchttps://appx/web-view.min.js / script);} else if (/QQ/i.test(userAgent) /miniProgram/i.test(userAgent)) {// QQ 小程序 document.write(script typetext/javascript srchttps://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js\/script);} else if (/miniProgram/i.test(userAgent) /micromessenger/i.test(userAgent)) {// 微信小程序 JS-SDK 如果不需要兼容微信小程序则无需引用此 JS 文件。 document.write(script typetext/javascript srchttps://res.wx.qq.com/open/js/jweixin-1.4.0.js\/script);} else if (/toutiaomicroapp/i.test(userAgent)) {// 头条小程序 JS-SDK 如果不需要兼容头条小程序则无需引用此 JS 文件。 document.write(script typetext/javascript srchttps://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js\/script);} else if (/swan/i.test(userAgent)) {// 百度小程序 JS-SDK 如果不需要兼容百度小程序则无需引用此 JS 文件。 document.write(script typetext/javascript srchttps://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js\/script);} else if (/quickapp/i.test(userAgent)) {// quickapp document.write(script typetext/javascript srchttps://quickapp/jssdk.webview.min.js\/script);}/script!-- 需要下载 uni.webview.1.5.5.js 并修改源码,前面笔者有提供修改文件 --scriptvar currentEnv window.location.protocol;var hostName window.location.host;var pathName window.location.pathnamevar isHttps currentEnv https:;var scriptSrc currentEnv // hostName pathName /static/js/uni.webview.1.5.5.js;if (!isHttps) { //如果本地环境scriptSrc ./static/js/uni.webview.1.5.5.js}var script document.createElement(script);script.type module;script.src scriptSrc;document.head.appendChild(script);/scriptbodydiv idapp!--app-html--/divscript typemodule src/main.js/script/body
/html
4、h5test.vue 最后在H5单页面测试 给小程序或App发送消息注意给微信小程序发送消息必须使用jWeixin.miniProgram发送给APP发送使用webUni
templateviewbutton clickgoWebView typewarn给App或微信小程序发送消息/button/view
/templatescriptexport default {data() {return {}},methods: {goWebView() {//这里一套代码 判断给微信小程序发送还是给App发送信息if (typeof jWeixin ! undefined) {jWeixin.miniProgram.getEnv(function(res) {if (res) {jWeixin.miniProgram.postMessage({data: {action: 我是H5页面给微信小程序发送的信息}})jWeixin.miniProgram.navigateBack({delta: 1})}});} else {webUni.postMessage({data: {action: 我是H5页面给APP发送的信息}})}},}}
/scriptstyle/style
打印效果 注意
1、uni.webview.js文件需要放在static/js/目录下不然你得把index.html引入路径改成你所在目录。
2、在index.html文件我已经做了线上uni.webview.js文件路径判断动态获取你所在目录。
这样就大功告成了哈
