目前已经启用,当前是前期调用的,要求使用h5本地map宣绒,后放弃了,目前只是写了一个简单的demo,组要是h5和本地的交互
本地html
js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>本地网页</title>
<style type="text/css">
.btn {
display: block;
margin: 20px auto;
padding: 5px;
background-color: #007aff;
border: 0;
color: #ffffff;
height: 40px;
width: 200px;
}
.btn-red {
background-color: #dd524d;
}
.btn-yellow {
background-color: #f0ad4e;
}
.desc {
padding: 10px;
color: #999999;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<p class="desc">web-view 组件加载本地 html 示例,仅在 App 环境下生效。点击下列按钮,跳转至其它页面。</p>
<p class="desc">网页向应用发送消息。注意:小程序端应用会在此页面后退时接收到消息。</p>
<div class="btn-list">
<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
</div>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script>
<script src="http://webmap.sf-express.com/api/map?v=3.1&ak=申请的ak"></script>
<script type="text/javascript">
var map = ''
// 接收数据的全局函数(与 uni-app 中 evalJS 调用的名称一致)
function receiveDataFromApp(data) {
console.log('收到 App 数据1:', data);
// 可选:发送数据回 uni-app
uni.postMessage({
data: {
response: 'Data received!'
}
});
//范围自适应
if (map) {
var coords = [
[113.945899, 22.525566],
[113.940964, 22.529943],
[113.93914, 22.527132],
[113.942594, 22.525029]
];
new SFMap.Polygon({
coordinates: coords,
paint: {
"fill-color": "#088",
"fill-opacity": 0.8
}
}).addTo(map);
// 计算bounds
var bounds = coords.reduce(function(rtn, item) {
rtn.extend(item);
return rtn;
}, new SFMap.LngLatBounds());
// 地图fitBounds
if (!bounds.isEmpty()) {
map.fitBounds(bounds, {
padding: {
top: 0,
bottom: 0,
left: 300,
right: 0,
},
maxZoom: 14
});
}
}
}
map = new SFMap.Map({
container: 'map',
center: [113.99709, 22.56859],
zoom: 9 // starting zoom
});
document.addEventListener('UniAppJSBridgeReady', function() {
console.log("map", map)
uni.postMessage({
data: {
action: 'load'
}
});
document.querySelector('.btn-list').addEventListener('click', function(evt) {
var target = evt.target;
if (target.tagName === 'BUTTON') {
var action = target.getAttribute('data-action');
switch (action) {
case 'switchTab':
uni.switchTab({
url: '/pages/tabBar/API/API'
});
break;
case 'reLaunch':
uni.reLaunch({
url: '/pages/tabBar/API/API'
});
break;
case 'navigateBack':
uni.navigateBack({
delta: 1
});
break;
default:
uni[action]({
url: '/pages/component/button/button'
});
break;
}
}
});
document.querySelector("#postMessage").addEventListener('click', function() {
uni.postMessage({
data: {
action: 'message'
}
});
})
});
</script>
</body>
</html>
uniapp本地测试页面
js
<template>
<view>
<web-view style="height: 200px;width: 100%;" src="/hybrid/html/local.html" ref="myWebview" :webview-styles="webviewStyles" @message="getMessage"
id="webviewId" @load="webLoad"></web-view>
<button type="default" style="position: fixed;botttom:0;margin-top: 300px;" @click="sendData">发送消息给html</button>
</view>
</template>
<script>
export default {
data() {
return {
currentWebview: '',
webviewStyles: {
progress: {
color: '#ffffff'
},
}
}
},
onReady() {
var that = this
setTimeout(function() {
that.initWebView()
}, 1000); //如果是页面初始化调用时,需要延时一下
},
methods: {
initWebView() {
if (!this.currentWebview) {
// #ifdef APP-HARMONY
this.currentWebview = uni.createWebviewContext('webviewId', this);
// #endif
// #ifdef APP-PLUS
this.currentWebview = this.$scope.$getAppWebview().children()[0];
// #endif
// #ifdef APP-PLUS
this.currentWebview.setStyle({
top: 0,
height: 300
})
// #endif
}
},
webLoad() {
//微信小程序、支付宝小程序、抖音小程序、QQ小程序、H5
console.log("-------webLoad----------")
},
getMessage(e) {
console.log("-------getMessage--------")
uni.showModal({
content: JSON.stringify(e.detail),
showCancel: false
})
this.initWebView()
},
sendData() {
var data = {
log: '1',
lat: '2'
}
if (this.currentWebview) {
if (this.currentWebview.evalJS) {
this.currentWebview.evalJS(`receiveDataFromApp(${JSON.stringify(data)})`);
} else {
console.error(" evalJS 方法不存在");
}
} else {
console.error("WebView 实例 不存在");
}
// 方式1:直接调用 WebView 中的全局函数(推荐)
// webview.evalJS(`receiveDataFromApp(${JSON.stringify(data)})`);
// 方式2:通过 window 对象传递
// webview.evalJS(`window.appData = ${JSON.stringify(data)}`);
}
}
}
</script>
<style>
</style>