小程序的踩坑之旅

1 uniapp 本身是加载不了mapbox的

下面两个是在vue环境下导入mapbox

https://blog.csdn.net/weixin_44402694/article/details/87794850

https://blog.csdn.net/Isaac_Play/article/details/103890231?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3

==uniapp中加载mapbox会出现这个错误==

“TypeError: Cannot read property ‘getElementById’ of undefined”

原因：微信小程序不支持操作dom元素， dom is not defined

mapbox 他的Map方法里面就用的document.getElementById ，是封装好的，因此加载不出来，如下图

img img

2 小程序仅支持加载网络网页，不支持本地html

App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在uni-app 项目根目录->hybrid->html文件夹下，如下为一个加载本地网页的uni-app项目文件目录示例：

img

加载本地文件加载不了

1

this.url = `/hybrid/html/map/chooseDev.html`

加载网络文件可以

1

this.url = 'http://ip地址:8080/tgmobile/hybrid/html/map/chooseDev.html?lon=119.318580&lat=26.034681'

文章

https://www.jianshu.com/p/adc72eae0593

https://www.cnblogs.com/lizhao123/p/11558674.html

**注意：**目前通过webview跳转到其他网址支持：

1、与微信小程序绑定的微信公众号文章地址;

2、在微信小程序后台配置好业务域名的地址。

3 查看官方文档，copy实例代码，终于可以加载出来了！！！

https://uniapp.dcloud.io/component/web-view

uni.postMessage(OBJECT)

网页向应用发送消息，在 <web-view> 的message事件回调 event.detail.data 中接收消息。

Tips

传递的消息信息，必须写在data对象中。

event.detail.data中的数据，以数组的形式接收每次 post 的消息。

1
2
3
4
5
6
7
8

// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
    uni.postMessage({
        data: {
            action: 'message'
        }
    });
});

代码如下：

跳转的vue组件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<template>
	<view>
		<web-view :src="url" @message="getMessage"></web-view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				url:''
			}
		},
		onLoad(option) { 
			console.log("chooseDev option:",option)
			this.url = 'http://ip地址:8080/tgmobile/hybrid/html/map/chooseDevTest.html'
		},
		methods:{
			getMessage(e){
				console.log("e:",e)
			}
		}
	}
</script>
	
<style>

</style>

webview页面：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网络网页</title>
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
  </head>
  <body>
    
    <div id="map"></div>

    <script type="text/javascript">
      document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
    </script>
    <!-- uni 的 SDK -->
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <script type="text/javascript">
      // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
      document.addEventListener('UniAppJSBridgeReady', function() {
        uni.postMessage({
            data: {
                action: 'message'
            }
        });
        uni.getEnv(function(res) {
            console.log('当前环境：' + JSON.stringify(res));
        });
        mapboxgl.accessToken = 'your accessToken';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v10',
            zoom: 14,
            center: [119.318580, 26.034681],  
            minZoom: 3
        });
      });
    </script>
  </body>
</html>