233 lines
7.2 KiB
Vue
233 lines
7.2 KiB
Vue
<template>
|
||
<div class="main">
|
||
<web-view ref="webview" class="webview" :src="src" @message="handleMessage"></web-view>
|
||
<!-- src="https://dipper.in.ah.cn/wsth5/#/" -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
var webView;
|
||
const listenList = {};
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
src: "",
|
||
disabledApi: [
|
||
"setStorage",
|
||
"setStorageSync",
|
||
"removeStorage",
|
||
"removeStorageSync",
|
||
"clearStorageSync",
|
||
"clearStorage",
|
||
],
|
||
nowObj: {},
|
||
loginType: "",
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
user: "user",
|
||
}),
|
||
},
|
||
onLoad() {
|
||
let type = uni.getStorageSync("loginType");
|
||
this.loginType = type;
|
||
|
||
if (type === "min") {
|
||
let phone = this.user.MEMBERSHIP_MOBILEPHONE;
|
||
this.src = `https://dipper.in.ah.cn/wsth5/#/#${this.user.MEMBERSHIP_MOBILEPHONE}`;
|
||
} else {
|
||
this.src = `https://dipper.in.ah.cn/wsth5/#/`;
|
||
var current = this.$scope.$getAppWebview();
|
||
setTimeout(() => {
|
||
webView = current.children()[0];
|
||
}, 1000);
|
||
}
|
||
this.$utils.addUserBehaviorNew();
|
||
},
|
||
onHide() {
|
||
// 页面即将退出时要清理监听的内容,防止内存泄露
|
||
console.log("hide");
|
||
for (var key in listenList) {
|
||
uni[listenList[key].offName](listenList[key].callBack);
|
||
}
|
||
},
|
||
onBackPress() {
|
||
// 页面即将退出时要清理监听的内容,防止内存泄露
|
||
console.log("onBackPress");
|
||
for (var key in listenList) {
|
||
uni[listenList[key].offName](listenList[key].callBack);
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
init(url) {
|
||
this.src = url;
|
||
},
|
||
// 接收h5页面发来的键值判断需要执行的操作
|
||
handleMessage(evt) {
|
||
console.log("postMessage: ", evt);
|
||
var _this = this;
|
||
const d = evt.detail.data[0];
|
||
// H5 不能使用部分API
|
||
for (const i in this.disabledApi) {
|
||
if (i === d.apiName) {
|
||
console.error("API CANNOT USE");
|
||
return;
|
||
}
|
||
}
|
||
|
||
if (d.apiName) {
|
||
if (d.apiName === "openLocation") {
|
||
let obj = d.params;
|
||
uni.openLocation({
|
||
latitude: obj.latitude * 1,
|
||
longitude: obj.longitude * 1,
|
||
scale: 16, // 缩放比例
|
||
name: obj.name,
|
||
address: "", // 这个可能会影响地图的定位，所以可以选择不填
|
||
success(data) {
|
||
console.log(data);
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
},
|
||
});
|
||
} else if (d.apiName === "openNewPage") {
|
||
let obj = d.params;
|
||
console.log("openNewPage", obj);
|
||
uni.navigateTo({
|
||
url: `/pages/thirdParty/newPage?url=${obj.url}&title=${obj.title}`,
|
||
});
|
||
} else {
|
||
switch (d.type) {
|
||
case 1:
|
||
const f = function (res) {
|
||
webView.evalJS(
|
||
`UNI_CALLBACK("${d.callBackList[0]}", ${JSON.stringify(res)})`
|
||
);
|
||
};
|
||
|
||
// 此调用是监听调用
|
||
if (d.offName) {
|
||
listenList[d.apiName] = {
|
||
offName: d.offName,
|
||
callBack: f,
|
||
};
|
||
}
|
||
|
||
uni[d.apiName](f);
|
||
break;
|
||
case 2:
|
||
if (d.onName) {
|
||
// 需要取消的监听对象
|
||
uni[d.apiName](listenList[d.onName].callBack);
|
||
} else {
|
||
uni[d.apiName]();
|
||
}
|
||
break;
|
||
case 3:
|
||
if (d.callBackList && d.callBackList.length) {
|
||
d.callBackList.forEach((item) => {
|
||
const n = item.split("_");
|
||
// 若是选择图片需要转base64
|
||
if (d.apiName === "chooseImage" && n[1] === "success") {
|
||
} else {
|
||
d.params[n[1]] = function (res) {
|
||
const a = JSON.stringify(res);
|
||
webView.evalJS(`UNI_CALLBACK("${item}", ${a})`);
|
||
};
|
||
}
|
||
});
|
||
delete d.callBackList;
|
||
}
|
||
uni[d.apiName](d.params);
|
||
break;
|
||
case 4:
|
||
const c = function (res) {
|
||
webView.evalJS(
|
||
`UNI_CALLBACK("${d.callBackList[0]}", ${JSON.stringify(res)})`
|
||
);
|
||
};
|
||
c(uni[d.apiName](d.params));
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
// 获取到对应webview(关键)通过evalJs(注意大小写，如果不知道evalJ是什么，可自行百度) 执行网页的函数，可对其进行传参，完成与网页的通讯
|
||
handlePostMessage(res) {
|
||
this.$refs.webview.evalJs(`window.abc=321`);
|
||
},
|
||
// onMessage(event) {
|
||
// let _this = this;
|
||
// if (event.detail.data[0].action === "scanCode") {
|
||
// uni.scanCode({
|
||
// success: function (res) {
|
||
// console.log("res", res);
|
||
// _this.sendMessageToH5({ type: "scanCode", res: res });
|
||
// },
|
||
// });
|
||
// } else if (event.detail.data[0].action === "position") {
|
||
// let req = {
|
||
// membershipId: _this.user.MEMBERSHIP_ID,
|
||
// };
|
||
|
||
// _this.$api.$get("/Html5/GetMemberLocation", req).then((res) => {
|
||
// console.log("resdasda", res);
|
||
// });
|
||
|
||
// // plus.geolocation.getCurrentPosition(async function (position) {
|
||
// // console.log("当前位置:", position);
|
||
// // let res = position.coords;
|
||
// // let seatInfo = {
|
||
// // latitude: res.latitude,
|
||
// // longitude: res.longitude,
|
||
// // };
|
||
// // _this.sendMessageToH5({ type: "position", res: seatInfo });
|
||
// // });
|
||
// } else if (event.detail.data[0].action === "openLocation") {
|
||
// let obj = event.detail.data[0].res;
|
||
// console.log("openLocation", obj);
|
||
// uni.openLocation({
|
||
// latitude: obj.latitude * 1,
|
||
// longitude: obj.longitude * 1,
|
||
// scale: 16, // 缩放比例
|
||
// name: obj.name,
|
||
// address: "", // 这个可能会影响地图的定位，所以可以选择不填
|
||
// success(data) {
|
||
// console.log(data);
|
||
// },
|
||
// fail(err) {
|
||
// console.log(err);
|
||
// },
|
||
// });
|
||
// } else if (event.detail.data[0].action === "openNewPage") {
|
||
// let obj = event.detail.data[0].res;
|
||
// console.log("openNewPage", obj);
|
||
// uni.navigateTo({
|
||
// url: `/pages/thirdParty/newPage?url=${obj.url}&title=${obj.title}`,
|
||
// });
|
||
// }
|
||
// // event.data 包含 H5 发送过来的消息内容
|
||
// },
|
||
// sendMessageToH5(data) {
|
||
// let obj = this.nowObj;
|
||
// obj[data.type] = data.res;
|
||
// this.nowObj = obj;
|
||
// const jsonString = JSON.stringify(obj);
|
||
// const encodedData = encodeURIComponent(jsonString);
|
||
// this.webViewSrc = `https://saas.eshangtech.com/goaliPay/index.html#${encodedData}`;
|
||
// // const webView = this.$refs.myWebView;
|
||
// // webView.postMessage(data);
|
||
// },
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="less">
|
||
.main {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
}
|
||
</style> |