学习笔记——uni-app在App中使用web-view

末蓝、 2022-11-11 05:20 773阅读 0赞

> **在地图添加覆盖物，或设置额外图层，这种情况，uni-app自带的地图大多满足不了这些需求。所以需要用到web-view这一组件来实现。**
> 
>

--------------------

### 1.创建带有地图的html ###

> 注意：App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在 `uni-app 项目根目录->hybrid->html` 文件夹下或者 `static` 目录下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70][]

### 2. 在组件中引用web-view ###

export default {
    		data() {
    			return {
    				webSrc: '/hybrid/html/index.html'
    			}
    		},
    		onLoad() {
    
    		},
    		methods: {
                handlePostMessage(e) {
                    console.log(e.detail.data)
                    let action = e.detail.data[0].action
                    console.log(action)
                    uni.navigateTo({ url: '/pages/else/else?action=' + action })
                }
    		}
    	}

**其中，@message用来监听，html页面给app通过uni.postMessage方法传递的信息。**

> **注意：在PC端测试时，uni.postMessage没有反应，可以使用移动端测试或者使用雷神等模拟器进行测试。**

### 3.完善html页面 ###

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图key值"></script>
    
    <script>
    window.onload = function(){
                var map = new AMap.Map('map-container', {
                    zoom:11,//缩放级别
                    center: [116.397428, 39.90923],//地图显示中心点坐标，如果没有center属性，则会定位到你当前所处的位置
                    // viewMode:'3D'//使用3D视图
                });
                
                var text = new AMap.Text({
                    text: '故宫 32',
                    title: '故宫',
                    anchor: 'center',
                    draggable: false,
                    cursor: 'pointer',
                    zIndex: 99,
                    style: {
                        'padding': '0.25rem .5rem',
                        'border-radius': '.25rem',
                        'background-color': 'rgba(0,0,255,0.5)',
                        'font-size': '13px',
                        'color': 'white'
                    },
                    position: [116.45, 39.90923],
                    clickable: false,
                    extData: {
                        name: '故宫',
                        positon: '116.397428, 39.90923'
                    }
                })
                text.setMap(map);
            }
    </script>

> 注意：
> 
>   uni的SDK必须要引入。
> 
>   高德地图的key值，可以在高德应用中注册后获取。

### 4.效果  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70]: /images/20221022/ae4d23caa2c947fda5a2aafaab674b37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70 1]: /images/20221022/865bfcc386994e71bde26027f09198c4.png