uni-app App和WebView中的网页进行交互
官方文档地址：
uni.webview.js 最新版地址： https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js
场景：
uni-app 打包的 App，通过 WebView 载入了一个网页，需要在这个网页里面点击扫码，然后调用 App 的扫码能力，然后再把扫码的结果传给这个网页。
需求比较简单，只涉及到了 App 和 WebView 中网页的通信，交互流程看图
交互流程图
实现的基本流程：
- App 通过 WebView 载入指定的网页
- 网页中预先引入 uniapp 的 JS-SDK
- 网页里点击按钮的时候，调用 uni.postMessage 方法，向 App 发送消息
- App 里监听 @message
- App 里判断事件对象，执行扫码操作
- App 里获取扫码的数据，通过 WebView 对象的 evalJS 方法注入 JS，将结果传递给网页
代码实现：
<template>
<view class="wallet-page">
<web-view v-if="blockChainUrl !== ''" :src="blockChainUrl" :webview-styles="webviewStyles" @message="msgHandler"></web-view>
</view>
</template>
<script>
export default {
name: 'BlockChainWallet',
data() {
return {
blockChainUrl: '',
webviewStyles: {
progress: {
color: '#FF0000'
}
}
};
},
onLoad(options) {
let baseUrl = 'http://192.168.0.200:8080/wallet/?';
let userRegHash = options.userRegHash;
let params = [`userid=${userRegHash}`];
this.blockChainUrl = baseUrl + params.join('&');
},
onBackPress() {},
methods: {
/**
* 网页向应用postMessage的处理方法
* @param {Object} e 事件对象
*/
msgHandler(e) {
let data = e.detail.data;
if (data[0].action === 'postScan') {
uni.scanCode({
success: res => {
this.callH5Method(res.result);
}
});
}
},
/**
* 调用WebView页面里的JS方法，将扫码结果传给网页
* @param {Object} data 扫码的结果
*/
callH5Method(data) {
// #ifdef APP-PLUS
let currentWebview = this.$scope.$getAppWebview();
let wv = currentWebview.children()[0];
console.log('执行JS注入');
wv.evalJS(`window.setScanResult('${data}')`);
// #endif
}
}
};
</script>
<style></style>