uni |
您所在的位置：网站首页 › uni-app开发工具 › uni |
uni
|
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：
web-view 组件加载本地 html 示例，仅在 App 环境下生效。点击下列按钮，跳转至其它页面。
navigateTo
redirectTo
navigateBack
reLaunch
switchTab
网页向应用发送消息。注意：小程序端应用会在此页面后退时接收到消息。
postMessage
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;
}
},
}
}
.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;
}
|
【本文地址】
今日新闻 |
推荐新闻 |