1. uni-app中web-view的使用
uni-app中的web-view是一个 web 浏览器组件，可以用来承载网页的容器，uni-app开发的app与web-view实现交互的方式相关简单，应用通过属性@message绑定触发事件，然后在web-view的网页向应用 postMessage 触发并收到消息即可，详细请参考官网：web-view | uni-app官网 (https://uniapp.dcloud.net.cn/component/web-view.html#)主要实现代码参考下图所示。
1.1. uni-app中web-view的使用
1.1.1. app页面
<template>
<web-view :src="url" @message="handleMessage"></web-view>
</template>
<script>
export default {
data() {
return {
url: null //要打开的外部链接
};
},
methods: {
//通过 @message 事件接收外部链接传过来的内容
handleMessage(event) {
if (event.detail.data[0].isClose) {
uni.reLaunch({
url: '/main/main'
});
}
}
}
};
</script>
1.1.2.外部链接H5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是在app里打开的页面</title>
<script src="./jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 微信JS-SDK 兼容微信小程序 引入此文件 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni-app SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</head>
<body>
<div style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;right: 0;bottom: 0;">
<button id="btn">按钮</button>
</div>
</body>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
console.log("加载完成，可以使用uni相关接口");
});
$("#btn").click(function() {
uni.postMessage({
data: {
isClose: true
}
})
uni.navigateBack();
})
</script>
</html>
1.1.3.问题
但是，以上方法只适合于APP，在H5环境中是不支持的，官方说明如下：
那么，在uni-app如何实现在H5环境中与web-view中的网页交互通讯呢，按照官方的说法，使用window.postMessage方式实现！
1.2. window.postMessage
关于window.postMessage的通讯原理，请参考官方档window.postMessage - Web API 接口参考 | MDN（https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage）
1.2.1. 应用端代码
onLoad: function() {
window.addEventListener('message', function(e) { // 监听 message 事件
console.log(e.origin);
console.log("从" + e.origin + "收到消息： " + e.data);
});
}
1.2.2. 网页端代码（H5）
//向uniapp发送信息
function sendMsgToUniapp(value) {
parent.postMessage(value, "*");
}
说明：uni-app的web-view，在H5环境中其实就是通过iframe来实现的，因此在iframe中的页面可直接通过jquery中的parent来获取父页面对象，并通过parent.postMessage的方式传递消息。
1.3. 完整代码
1.3.1. pageWeb.vue（uiapp）
<template>
<view>
<web-view @message="message"
:src="webViewUrl"></web-view>
</view>
</template>
<script>
import pageUtil from '../../../utils/pageUtil.js';
export default {
data() {
return {
webViewUrl: '/hybrid/html/html/pageUniWeb.html?data=您好',
//webViewUrl: 'http://120.224.9.76:18080/app/news/html/pageUniWeb.html?data=efhejr',
wv: ''
}
},
onReady() {
pageUtil.setTitleBar('业务协同')
},
onLoad() {
var that = this;
// #ifdef APP-PLUS
//此对象相当于html5plus里的plus.webview.currentWebview()。
// 在uni-app里vue页面直接使用plus.webview.currentWebview()无效
let currentWebview = this.$scope.$getAppWebview()
setTimeout(() => {
this.wv = currentWebview.children()[0]
}, 300)
// #endif
try {
//信息交互（H5浏览器使用）,监听 message 事件
window.addEventListener('message',
function (e) {
console.log("从" + e.origin, "收到消息： ", e);
var resData = e.data.data.arg;
if (resData.myType) {
uni.showToast({
icon: 'none',
title: "uniap获取H5发送数据：" + JSON.stringify(resData)
});
}
});
} catch (e) {
}
},
methods: {
//信息交互（app真机使用）
message(e) {
var that = this
var resData = e.detail.data;
console.log("uniap获取H5发送数据：", e)
uni.showToast({
icon: 'none',
title: "uniap获取H5发送数据：" + JSON.stringify(resData)
});
var myObj = {}
myObj.msg="我是uniapp"
//这里必须序列化！！！
myObj = JSON.stringify(myObj)
this.wv.evalJS(`postJS(${myObj})`);
},
}
}
</script>
<style>
</style>
1.3.2. pageUniWeb.html（H5）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>web-view</title>
<script type="text/javascript" src="../static/js/init-rem.js"></script>
<script type="text/javascript" src="../static/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../static/helper/init-helper.js"></script>
<!-- <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"-->
<!-- type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript" src="../static/helper/web-view-custom.js"></script>
<script type="text/javascript" src="../static/js/vconsole.min.js"></script>
<script type="text/javascript">
var vc = new VConsole()
</script>
<style>
.btn-layout {
display: flex;
flex-direction: column;
align-items: center;
}
.btn-item {
display: inline;
font-size: 0.32rem;
color: white;
text-align: center;
padding: 0.2rem 0.5rem;
border-radius: 0.3rem;
margin-top: 0.5rem;
background-color: #1AAD19;
}
.content {
display: inline;
font-size: 0.32rem;
color: black;
text-align: center;
padding: 0.2rem 0.5rem;
border-radius: 0.3rem;
margin-top: 0.5rem;
}
</style>
</head>
<body>
<div class="btn-layout">
<span id="h5ToUniappId" class="btn-item">H5发送数据到uniapp</span>
<div id="contentId" class="content"></div>
<div id="content2Id" class="content"></div>
</div>
</body>
<script type="text/javascript">
var itemData = getParamByKey('data');
console.log("获取uniapp链接传递数据：", itemData)
$(function () {
$('#contentId').html("获取uniapp链接传递数据："+itemData)
});
/**
* 获取uniapp传递数据方法一
* 定义全局方法，接收来自应用的信息
*/
// window.postJS = (msg) => {
// console.log('来自应用的消息', msg)
// }
/**
* 获取uniapp传递数据方法二
*/
function postJS(e) {
console.log("获取uniapp传递数据：", e)
$('#content2Id').html("获取uniapp传递数据："+JSON.stringify(e))
}
document.addEventListener('UniAppJSBridgeReady',
function () {
webUni.webView.getEnv(function (res) {
console.log('当前环境：' + JSON.stringify(res));
});
document.querySelector('#h5ToUniappId')
.addEventListener('click', function (evt) {
// webUni.webView.navigateBack();
//向uniapp传值
//方法一
//window.parent.postMessage("", '*')
//parent.postMessage("sdcec", "*");
//方法二
webUni.postMessage({
data: {
action: 'message',
msg: '我是H5',
myType: 'typeH5',
}
});
});
});
</script>
</html>
1.3.3. web-view-custom.js
!function (e, n) {
"object" == typeof exports && "undefined" != typeof module ? module.exports = n() : "function" == typeof define && define.amd ? define(n) : (e = e || self).webUni = n()
}(this, (function () {
"use strict";
try {
var e = {};
Object.defineProperty(e, "passive", {
get: function () {
!0
}
}), window.addEventListener("test-passive", null, e)
} catch (e) {
}
var n = Object.prototype.hasOwnProperty;
function t(e, t) {
return n.call(e, t)
}
var i = [], a = function (e, n) {
var t = {options: {timestamp: +new Date}, name: e, arg: n};
if (window.__dcloud_weex_postMessage || window.__dcloud_weex_) {
if ("postMessage" === e) {
var a = {data: [n]};
return window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessage(a) : window.__dcloud_weex_.postMessage(JSON.stringify(a))
}
var o = {type: "WEB_INVOKE_APPSERVICE", args: {data: t, webviewIds: i}};
window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessageToService(o) : window.__dcloud_weex_.postMessageToService(JSON.stringify(o))
}
if (!window.plus) return window.parent.postMessage({type: "WEB_INVOKE_APPSERVICE", data: t, pageId: ""}, "*");
if (0 === i.length) {
var r = plus.webview.currentWebview();
if (!r) throw new Error("plus.webview.currentWebview() is undefined");
var d = r.parent(), s = "";
s = d ? d.id : r.id, i.push(s)
}
if (plus.webview.getWebviewById("__uniapp__service")) plus.webview.postMessageToUniNView({
type: "WEB_INVOKE_APPSERVICE",
args: {data: t, webviewIds: i}
}, "__uniapp__service"); else {
var w = JSON.stringify(t);
plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE", '",').concat(w, ",").concat(JSON.stringify(i), ");"))
}
}, o = {
navigateTo: function () {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, n = e.url;
a("navigateTo", {url: encodeURI(n)})
}, navigateBack: function () {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, n = e.delta;
a("navigateBack", {delta: parseInt(n) || 1})
}, switchTab: function () {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, n = e.url;
a("switchTab", {url: encodeURI(n)})
}, reLaunch: function () {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, n = e.url;
a("reLaunch", {url: encodeURI(n)})
}, redirectTo: function () {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, n = e.url;
a("redirectTo", {url: encodeURI(n)})
}, getEnv: function (e) {
window.plus ? e({plus: !0}) : e({h5: !0})
}, postMessage: function () {
var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
a("postMessage", e.data || {})
}
}, r = /uni-app/i.test(navigator.userAgent), d = /Html5Plus/i.test(navigator.userAgent),
s = /complete|loaded|interactive/;
var w = window.my && navigator.userAgent.indexOf("AlipayClient") > -1;
var u = window.swan && window.swan.webView && /swan/i.test(navigator.userAgent);
var c = window.qq && window.qq.miniProgram && /QQ/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent);
var g = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent);
var v = window.wx && window.wx.miniProgram && /micromessenger/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent);
var p = window.qa && /quickapp/i.test(navigator.userAgent);
for (var l, _ = function () {
window.UniAppJSBridge = !0, document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady", {
bubbles: !0,
cancelable: !0
}))
}, f = [function (e) {
if (r || d) return window.__dcloud_weex_postMessage || window.__dcloud_weex_ ? document.addEventListener("DOMContentLoaded", e) : window.plus && s.test(document.readyState) ? setTimeout(e, 0) : document.addEventListener("plusready", e), o
}, function (e) {
if (v) return window.WeixinJSBridge && window.WeixinJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener("WeixinJSBridgeReady", e), window.wx.miniProgram
}, function (e) {
if (c) return window.QQJSBridge && window.QQJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener("QQJSBridgeReady", e), window.qq.miniProgram
}, function (e) {
if (w) {
document.addEventListener("DOMContentLoaded", e);
var n = window.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 (u) return document.addEventListener("DOMContentLoaded", e), window.swan.webView
}, function (e) {
if (g) return document.addEventListener("DOMContentLoaded", e), window.tt.miniProgram
}, function (e) {
if (p) {
window.QaJSBridge && window.QaJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener("QaJSBridgeReady", e);
var n = window.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) {
return document.addEventListener("DOMContentLoaded", e), o
}], m = 0; m < f.length && !(l = f[m](_)); m++) ;
l || (l = {});
var E = "undefined" != typeof webUni ? webUni : {};
if (!E.navigateTo) for (var b in l) t(l, b) && (E[b] = l[b]);
return E.webView = l, E
}));
1.3.4. init-helper.js
var u = navigator.userAgent;
// 是否为ios设备
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
// 是否为PC端
var isPC = typeof window.orientation === 'undefined';
// 是否为android端
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
// 是否为微信端,此处不能为===,因为match的结果可能是null或数组
var isWx = u.toLowerCase().match(/MicroMessenger/i) == 'micromessenger';
var strConstant = {
/**
* 业务协同
*/
//待办
eventWaitDeal: '我的待办',
//已办
eventHasDeal: '我的已办',
//考勤打卡
workCheckSign: '考勤打卡',
//添加
pageTypeAdd: 'add',
//编辑
pageTypeEdit: 'edit',
/**
* 跳转类型
*/
jumpTypeMapLoc: 'jumpTypeMapLoc',
}
/**
* @desc 返回上一页
*/
function backPage() {
//单击Android左上角返回键执行该方法
history.pushState(null, null, location.href);
window.addEventListener('popstate',
function (event) {
if (isAndroid) {
if (window.androidJsHook) {
history.pushState(null, null, location.href);
window.androidJsHook.htmlFinish();
} else {
history.go(-1)
}
} else if (isiOS) {
if (window.webkit) {
history.pushState(null, null, location.href);
window.webkit.postMessage(null);
} else {
history.go(-1)
}
} else {
history.go(-1)
}
});
};
/**
* 跳换页面
*/
function openPage(webUrl, webTitle, webParams) {
if (window.androidJsHook) {
window.androidJsHook
.startForResult(webUrl, webTitle, webParams);
} else {
mui.openWindow({
url: webUrl + webParams,
id: webUrl,
styles: {
top: '0px',
bottom: '0px'
},
waiting: {
autoShow: false, //自动显示等待框，默认为true
}
});
}
}
/**
* @description 通过传入key值,得到页面key的初始化传值
* plus情况为plus.webview.currentWebview.***
* h5情况为 window.location.href 中的参数的值
* @param {String} key
*/
function getParamByKey(key) {
if (!key) {
return null;
}
return GetQueryString(key) || getExtraDataByKey(key);
};
function GetQueryString(name) {
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
// var r = window.location.search.substr(1).match(reg);
// if (r != null) return unescape(r[2]); return null;
/*中文不乱码*/
return decodeURIComponent((new RegExp('[?|&]' + name
+ '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1]
.replace(/\+/g, '%20')) || null;
}
/**
* @description 通过传入key值,得到页面key的初始化传值
* plus情况为plus.webview.currentWebview.***
* h5情况为 window.location.href 中的参数的值
* @param {String} key
*/
function getExtraDataByKey(key) {
if (!key) {
return null;
}
var value = null;
//h5
value = getUrlParamsValue(window.location.href, key);
if (value === 'undefined') {
value = null;
}
return value;
};
/**
* 删掉遮罩
*/
function removeDrop() {
$('.mui-popup-backdrop').remove();
}
/**
* 合并json对象
* @param {Object} target 第一个json对象，同时也是合并后的json对象
* @param {Object} source 第二个json对象
*/
function extend(target, source) {
for (var obj in source) {
target[obj] = source[obj];
}
return target;
}
/**
* 转为json数据格式
* @param {Object} idStr form表单的id
*/
function transformToJson(idStr) {
var formData = $("#" + idStr).serializeArray();
var obj = {};
var j = 1;
for (var i in formData) {
obj[formData[i].name] = formData[i]['value'];
//伪数组length字段，用于遍历改造json对象
obj['length'] = j;
j++
}
return obj;
}
/**
* 通用方法封装处理
* commonUtils.isEmpty(jsonParam.countyLabel
*/
var commonUtils = {
// 判断字符串是否为空
isEmpty: function (value) {
if (value == null || this.trim(value) == "" || value == undefined) {
return true;
}
return false;
},
// 判断一个字符串是否为非空串
isNotEmpty: function (value) {
return !commonUtils.isEmpty(value);
},
// 空格截取
trim: function (value) {
if (value == null) {
return "";
}
return value.toString().replace(/(^\s*)|(\s*$)|\r|\n/g, "");
},
// 判断字符串是否是以start开头
startWith: function (value, start) {
var reg = new RegExp("^" + start);
return reg.test(value)
}
};
/**
* 重置form表单
*/
function resetForm(resetArr) {
var textInputArr = $("input[type='text']")
var numberInput = $("input[type='number']")
var domId = null
for (var i = 0; i < textInputArr.length; i++) {
domId = $(textInputArr[i]).attr('id')
var isContain = false
resetArr.forEach(function (item, index) {
if (domId == item) {
isContain = true
}
})
if (!isContain) {
$(textInputArr[i]).val("")
}
}
for (var i = 0; i < numberInput.length; i++) {
domId = $(numberInput[i]).attr('id')
var isContain = false
resetArr.forEach(function (item, index) {
if (domId == item) {
isContain = true
}
})
if (!isContain) {
$(numberInput[i]).val("")
}
}
}
/**
* 更新三级联动字典
* @param {Object} name
* @param {Object} nameMS
* @author zzs
*/
function updateDictLevel3(name, nameMsArr, urlStr) {
var queryParam = {};
if (isNotNull(name)) {
queryParam.name = name;
}
getNetData(urlStr, queryParam, function (result) {
if (result.code == '200') {
var nameA = [];
if (result.data && result.data.length == 0) {
nameA = [{
"id": "",
"value": "请选择"
}];
} else {
$.each(result.data, function (i, item) {
var flag = {};
flag.id = item.value;
flag.value = item.label;
//二级
var childsA = [];
if (item.children && item.children.length > 0) {
$.each(item.children, function (j, childsItem) {
var childsFlag = {};
childsFlag.id = childsItem.value;
childsFlag.value = childsItem.label;
//三级
var childsB = [];
if (childsItem.children && childsItem.children.length > 0) {
$.each(childsItem.children, function (k, grandsonItem) {
var grandsonFlag = {};
grandsonFlag.id = grandsonItem.value;
grandsonFlag.value = grandsonItem.label;
childsB.push(grandsonFlag);
});
}
childsFlag.childs = childsB;
childsA.push(childsFlag);
});
}
flag.childs = childsA;
nameA.push(flag);
});
}
if (nameMsArr != null && nameMsArr.length > 0) {
nameMsArr.forEach(function (nameMs, index) {
nameMs.updateWheels(nameA);
})
}
}
})
}
