1、基于非uni-app开发的三方web应用、网页应用与uni-app应用页面交互
该方案为通用方案，参考官方方案即可，该方案仅作为参考
// 动态加载js
function loadScript(options, callback) {
if (!options.src) {
return;
}
// 判断引入的js对象是否存在
if (typeof options.fun == 'undefined') {
console.log('自动引入');
var node = document.createElement('script');
node.src = options.src;
node.addEventListener('load', callback, false);
document.head.appendChild(node);
} else {
console.log('直接渲染');
console.log(options.eventListener || 'load');
document.addEventListener(options.eventListener || 'load', callback, false);
}
};
// 执行动态加载，初始化js
this.loadScript({
src: '/static/uni.webview.1.5.2.js',
fun: window.h5uni,
eventListener: 'UniAppJSBridgeReady'
}, () => {
// your code
uni.navigateBack();
});
2、基于uni-app开发的H5应用页面交互
此处有坑：基于uni-app开发的H5应用与uni-app开发的应用进行集成页面交互，存在无法调用的情况，初步分析属于uni.webview.1.5.2.js中注册的uni对象被uni-app中注册的uni对象覆盖，导致无法正常加载；
解决办法：修改uni.webview.1.5.2.js源码中暴漏的uni对象名称，此处名称可自定义，我们暂时以h5uni为例进行演示，源码修改如下：
源码文件：详见附件
2.1 将源码解压，并将uni.webview.1.5.2.js添加到uni-app开发的H5应用的static目录下
2.2 应用DEMO：
<template>
<view class="body">
<view class="desc">web-view 组件加载本地 html 示例，仅在 App 环境下生效。点击下列按钮，跳转至其它页面。</view>
<view class="btn-list">
<button class="btn" type="primary" @click="btnOpt" data-action="navigateTo">navigateTo</button>
<button class="btn" type="primary" @click="btnOpt" data-action="redirectTo">redirectTo</button>
<button class="btn" type="primary" @click="btnOpt" data-action="navigateBack">navigateBack</button>
<button class="btn" type="primary" @click="btnOpt" data-action="reLaunch">reLaunch</button>
<button class="btn" type="primary" @click="btnOpt" data-action="switchTab">switchTab</button>
</view>
<view class="desc">网页向应用发送消息。注意：小程序端应用会在此页面后退时接收到消息。</view>
<view class="btn-list">
<button class="btn btn-red" type="button" @click="btnOpt" data-action="postMessage">postMessage</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
this.loadScript({
src: '/static/uni.webview.1.5.2.js',
fun: window.h5uni,
eventListener: 'UniAppJSBridgeReady'
}, () => {});
},
methods: {
loadScript(options, callback) {
if (!options.src) {
return;
}
// 判断引入的js对象是否存在
if (typeof options.fun == 'undefined') {
console.log('自动引入');
var node = document.createElement('script');
node.src = options.src;
node.addEventListener('load', callback, false);
document.head.appendChild(node);
} else {
console.log('直接渲染');
console.log(options.eventListener || 'load');
document.addEventListener(options.eventListener || 'load', callback, false);
}
},
btnOpt(e) {
var action = e.currentTarget.dataset.action;
switch (action) {
case 'switchTab':
h5uni.switchTab({
url: '/pages/index/index'
});
break;
case 'reLaunch':
h5uni.reLaunch({
url: '/pages/index/index'
});
break;
case 'navigateBack':
h5uni.navigateBack({
delta: 1
});
break;
default:
h5uni[action]({
url: '/pages/index/index'
});
break;
}
},
}
}
</script>
<style>
.body {
margin: 0 16rpx;
}
.desc {
padding: 52rpx 20rpx;
color: #999999;
font-size: 32rpx;
}
.btn {
display: block;
margin: 20px auto;
padding: 5px;
border: 0;
color: #ffffff;
height: 40px;
width: 200px;
font-size: 13px;
}
.btn-red {
background-color: #dd524d;
}
.btn-yellow {
background-color: #f0ad4e;
}
</style>
