腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >专栏 >前端系列19集-vue3引入高德地图，响应式，自适应

前端系列19集-vue3引入高德地图，响应式，自适应

达达前端

发布于 2023-10-08 11:13:49

1.4K00

代码可运行

文章被收录于专栏：达达前端达达前端

运行总次数：0

代码可运行

npm i @amap/amap-jsapi-loader --save

import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
//为地图注册click事件获取鼠标点击出的经纬度坐标 
map.on("click", function (e: any) { 
// 点击事件 
}); let infoWindow = new AMap.InfoWindow({ 
//创建信息窗体 
isCustom: false, 
//使用自定义窗体 
anchor: "top-right", 
//信息窗体的三角所在位置 
content: `<a href="#">XXX信息</a>`, 
//信息窗体的内容可以是任意html片段 
offset: new AMap.Pixel(-10, -5), }); 
infoWindow.open(map, [116.397128, 39.916527]); 
//填写想要窗体信息指示的坐标

import AMapLoader from '@amap/amap-jsapi-loader';
export function loadAMap() {
  return new Promise(function (resolve, reject) {
    AMapLoader.load({
      key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        'AMap.ControlBar',
        'AMap.LineSearch',
        'AMap.StationSearch',
        'AMap.PolylineEditor',
        'AMap.PolygonEditor',
        'AMap.CircleEditor',
        'AMap.AutoComplete',
        'AMap.AutoComplete',
        'AMap.DistrictSearch',
        'AMap.PlaceSearch',
        'AMap.MouseTool',
      ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap: any) => {
        window.AMap = AMap
        resolve(window.AMap);
      })
      .catch((e: any) => {
        console.log(e);
        reject();
      });
  });
}

import AMapLoader from '@amap/amap-jsapi-loader'

要在Vue 3中引入高德地图，你可以按照以下步骤进行操作：

在项目目录中使用npm或yarn安装高德地图的JavaScript API库。你可以使用以下命令之一：

npm install @amap/amap-jsapi-loader

yarn add @amap/amap-jsapi-loader

在Vue组件中引入并使用高德地图。

在你的Vue组件中，你可以使用AmapLoader从高德地图加载API，然后在地图准备好后使用AmapMap组件进行展示。以下是一个简单的示例：

// return new Promise(function (resolve, reject) {
    //     AMapLoader.load({
    //         key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
    //         version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //         plugins: [
    //             'AMap.ControlBar',
    //             'AMap.LineSearch',
    //             'AMap.StationSearch',
    //             'AMap.PolylineEditor',
    //             'AMap.PolygonEditor',
    //             'AMap.CircleEditor',
    //             'AMap.AutoComplete',
    //             'AMap.AutoComplete',
    //             'AMap.DistrictSearch',
    //             'AMap.PlaceSearch',
    //             'AMap.MouseTool'
    //         ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    //     })
    //         .then((AMap: any) => {
    //             const map = new AMap.Map('container', {
    //                 //设置地图容器id
    //                 viewMode: '3D', //是否为3D地图模式
    //                 zoom: 5, //初始化地图级别
    //                 center: [116.397428, 39.90923] //初始化地图中心点位置
    //             })
    //         })
    //         .catch((e: any) => {
    //             console.log(e)
    //             reject()
    //         })
    // })

<template>
  <div>
    <div id="mapContainer"></div>
  </div>
</template>

<script>
import { AmapLoader, AmapMap } from '@amap/amap-jsapi-loader';

export default {
  name: 'MapComponent',
  mounted() {
    AmapLoader.load({
      key: '你的高德地图API密钥',
      version: '2.0',
      plugins: ['AMap.Geolocation'],
    }).then((AMap) => {
      const map = new AMap.Map('mapContainer', {
        center: [经度, 纬度],
        zoom: 缩放级别,
      });

      // 在这里你可以使用各种高德地图的功能，例如添加标记、绘制路线等

      // 当你需要使用地图组件时，你可以使用AmapMap组件
      Vue.component('AmapMap', AmapMap);
    });
  },
};
</script>

请确保替换代码中的你的高德地图API密钥为你自己的API密钥，以及经度、纬度和缩放级别为合适的值。

使用<MapComponent>在其他Vue组件中显示地图。

在其他的Vue组件中，你可以使用<MapComponent>标签来显示地图：

const map = new AMap.Map(wrapEl, {
        zoom: 15,
        center: [116.397428, 39.90923],
        viewMode: '3D'
    })

//进行地图初始化
const initMap = async () => {
    await toPromise() // 等待脚本加载完成的 Promise 解析
    await nextTick() // 等待 Vue 的下一个更新周期
    const wrapEl = unref(wrapRef) // 获取未包装的包裹元素的值
    if (!wrapEl) return // 如果包裹元素不存在，则返回
    const AMap = (window as any).AMap // 获取全局的 AMap 对象

    // 创建一个新的 AMap.Map 实例，并将其绑定到包裹元素上
    const map = new AMap.Map(wrapEl, {
        zoom: 15,
        center: [116.397428, 39.90923],
        viewMode: '3D'
    })

    AMap.plugin(['AMap.HawkEye'], () => {
        // 将缩略图控件添加到地图实例中
        map.addControl(new AMap.HawkEye())
    })
}

AMap.plugin(['AMap.HawkEye'], () => {
        // 将缩略图控件添加到地图实例中
        map.addControl(new AMap.HawkEye())
    })

在Vue 3中引入高德地图时，如果地图拖动不了其他地方，可能是由于以下原因：

容器尺寸问题：检查包裹地图的容器元素的尺寸设置。确保容器具有足够的宽度和高度以容纳地图，并且不会被其他元素覆盖。
CSS 样式问题：检查容器元素的 CSS 样式，确保没有设置不正确的定位或溢出属性。地图容器应该使用适当的 CSS 属性（例如position: relative）来确保地图可以正确地进行定位和拖动。
脚本加载问题：确认高德地图的相关脚本和依赖已经正确加载，并且没有出现任何错误或警告。可以检查浏览器的开发者工具控制台，查看是否有与地图加载相关的错误信息。
地图初始化设置：检查地图初始化设置，包括缩放级别、中心点位置和视图模式。确保这些设置正确，以便在地图加载后能够正确显示和拖动地图。

如果问题仍然存在，可以提供更多关于你的代码和具体情况的信息，以便更好地理解问题并提供更精确的帮助。

//进行地图初始化
const initMap = async () => {
    await toPromise() // 等待脚本加载完成的 Promise 解析
    await nextTick() // 等待 Vue 的下一个更新周期
    const wrapEl = unref(wrapRef) // 获取未包装的包裹元素的值
    if (!wrapEl) return // 如果包裹元素不存在，则返回
    const AMap = (window as any).AMap // 获取全局的 AMap 对象

    const lineArr = data.map((item) => [item.longitude, item.latitude])

    // 创建一个新的 AMap.Map 实例，并将其绑定到包裹元素上
    const map = new AMap.Map(wrapEl, {
        center: [116.397428, 39.90923]
    })

    const marker = new AMap.Marker({
        // Map: 要显示该marker的地图对象
        map: map,
        // LngLat: 点标记在地图上显示的位置，默认为地图中心点，数组类型的格式也可以
        // 或 position: new AMap.LngLat(116.478935, 39.997761),
        position: lineArr[0],
        // String/Icon: 需在点标记中显示的图标。可以是一个本地图标地址，或者Icon对象。有合法的content内容时，此属性无效
        icon: 'https://webapi.amap.com/images/car.png',
        /*
        Pixel: 点标记显示位置偏移量，默认值为Pixel(-10,-34)
        Marker指定position后，默认以marker左上角位置为基准点，对准所给定的position位置，若需使marker指定位置对准在position处，需根据marker的尺寸设置一定的偏移量
        */
        offset: new AMap.Pixel(-26, -13),
        // Boolean: 是否自动旋转。点标记在使用moveAlong动画时，路径方向若有变化，点标记是否自动调整角度，默认为false。广泛用于自动调节车辆行驶方向
        autoRotation: true,
        // Number: 点标记的旋转角度，广泛用于改变车辆行驶方向
        angle: -90
    })

    // 绘制整条轨迹
    const polyline = new AMap.Polyline({
        // Map: 要显示该polyline的地图对象
        map: map,
        // Array: 折线的节点坐标数组
        path: lineArr,
        // Boolean: 是否延路径显示白色方向箭头,默认false。Canvas绘制时有效，建议折线宽度大于6时使用
        showDir: true,
        // String: 线条颜色，使用16进制颜色代码赋值。默认值为#006600
        strokeColor: '#28F',
        // Number: 线条透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
        strokeOpacity: 1,
        // Number: 线条宽度，单位：像素
        strokeWeight: 6,
        // String: 线样式，实线:solid，虚线:dashed
        strokeStyle: 'solid'
    })
}

地图的创建

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });
</script>
</body>
</html>

地图加载完成

地图加载完成事件 map.on("complete")

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
  <title>地图加载完成</title>
</head>

<body>
  <div id="container"></div>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script>
    var map = map = new AMap.Map('container', {
        resizeEnable: true
    });
    
    map.on("complete", function(){
       log.success("地图加载完成！");  
    });
  </script>
</body>

</html>

地图的销毁

地图的销毁 map.destroy

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
  <title>地图创建与销毁</title>
</head>

<body>
  <div id="container"></div>
  <div class="input-card" style="width:16rem">
    <h4>创建、销毁地图</h4>
    <div id="btns">
      <div class="input-item">
        <button id="create-btn" class="btn" style="margin-right:1rem;">创建地图</button>
        <button id="destroy-btn" class="btn">销毁地图</button>
      </div>
    </div>
  </div>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script>
    var map = null;

    function createMap() {
      map = new AMap.Map('container', {
        resizeEnable: true
      });
      log.success("创建地图成功");
    }

    function destroyMap() {
      map && map.destroy();
      log.info("地图已销毁");
    }

    //初始化地图
    createMap();

    //绑定创建、销毁事件
    document.querySelector("#create-btn").onclick = createMap;
    document.querySelector("#destroy-btn").onclick = destroyMap;
  </script>
</body>

</html>

异步加载地图

给JSAPI引用地址url加上callback参数，异步调用JSAPI接口。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>异步加载地图</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
</head>
<body>
<div id="container"></div>
<script>
    function onApiLoaded(){
        var map = new AMap.Map('container', {
            center: [117.000923, 36.675807],
            zoom: 6
        });
        map.plugin(["AMap.ToolBar"], function() {
            map.addControl(new AMap.ToolBar());
        });
    }
     var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onApiLoaded';
    var jsapi = document.createElement('script');
    jsapi.charset = 'utf-8';
    jsapi.src = url;
    document.head.appendChild(jsapi);
</script>
</body>
</html>

中、英文地图

英文地图显示，英文、中英文、中文地图之间动态切换

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>英文、中英文地图</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <div class="input-card" style="width:13rem">
    <h4>底图语言切换</h4>
    <div id="lang">
      <div class="input-item"><input id="en" name="language" type="radio" checked="checked"><span class="input-text">英文底图</span></div>
      <div class="input-item"><input id="zh_en" name="language" type="radio"><span class="input-text">中英文对照</span></div>
      <div class="input-item"><input id="zh_cn" name="language" type="radio"><span class="input-text">中文底图</span></div>
    </div>
  </div>
  <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
  <script>
    //初始化地图
    var map = new AMap.Map('container', {
      resizeEnable: true,
      center: [121.498586, 31.239637],
      lang: "en" //可选值：en，zh_en, zh_cn
    });

    //绑定radio点击事件
    var radios = document.querySelectorAll("#lang input");
    radios.forEach(function(ratio) {
      ratio.onclick = setLang;
    });

    function setLang() {
      map.setLang(this.id);
    }
  </script>
</body>

</html>

设置/获取地图显示范围

通过map.getBounds、map.getBounds设置/获取地图显示范围

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>地图显示范围</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }

    .lnglat {
      color: #0288d1;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <div class="info">
    <h4>当前地图显示范围（Bounds）</h4>
    <p>NorthEast坐标：<span id="ne" class="lnglat"></span></p>
    <p>SouthWest坐标：<span id="sw" class="lnglat"></span></p>
  </div>
  <div class="input-card" style="width:16rem;">
    <h4>控制地图显示范围</h4>
    <div class="input-item">
      <button class="btn" id="reset-bounds">指定地图显示范围</button>
    </div>
  </div>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  <script>
    //创建地图
    var map = new AMap.Map('container', {
      resizeEnable: true,
      zoom: 10,
      center: [116.405285, 39.904989],
      showIndoorMap: false
    });

    //显示当前地图边界范围坐标
    function logMapBounds() {
      var bounds = map.getBounds();
      document.querySelector("#ne").innerText = bounds.northeast.toString();
      document.querySelector("#sw").innerText = bounds.southwest.toString();
    }

    logMapBounds();

    //绑定地图移动与缩放事件
    map.on('moveend', logMapBounds);
    map.on('zoomend', logMapBounds);

    //绑定按钮事件
    document.querySelector("#reset-bounds").onclick = function() {
      //通过 new AMap.Bounds(southWest:LngLat, northEast:LngLat) 或者 map.getBounds() 获得地图Bounds信息
      var mybounds = new AMap.Bounds([116.319665, 39.855919], [116.468324,39.9756]);
      map.setBounds(mybounds);
    }
  </script>
</body>

</html>

地图的平移

除了鼠标、触摸交互，通过map.panBy和map.panTo也可以移动地图

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图平移</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
   
   <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
    }
  </style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: auto">
    <div class="input-item">
        <input id="piexBtn" type="button" class="btn" value="平移像素值：(50,100)"/>
    </div>
    <div class="input-item">
        <input id="pantoBtn" type="button" class="btn" value="地图中心点平移至：(116.405467,39.907761)"/>
    </div>
</div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 13,
        center: [116.397428, 39.90923]
    });

    AMap.event.addDomListener(document.getElementById('piexBtn'), 'click', function() {
        map.panBy(50, 100);
    });
    AMap.event.addDomListener(document.getElementById('pantoBtn'), 'click', function() {
        map.panTo([116.405467, 39.907761]);
    });
</script>
</body>
</html>

获取鼠标点击经纬度

给地图绑定click事件，获取鼠标位置的经纬度坐标。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>鼠标拾取地图坐标</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<style type="text/css">
    html,body{
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    .map{
        height: 100%;
        width: 100%;
        float: left;
    }
</style>
<body>
<div id="container" class="map"></div>
<div class="input-card">
    <h4>左击获取经纬度：</h4>
    <div class="input-item">
      <input type="text" readonly="true" id="lnglat">
    </div>
</div>

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Autocomplete"></script>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //为地图注册click事件获取鼠标点击出的经纬度坐标
    map.on('click', function(e) {
        document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
    });
</script>
</body>
</html>

设置鼠标样式

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>设置鼠标样式</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_873139_0v65kqy674.css" >
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            margin: 0px;
        }
        .map{
            height: 100%;
            width: 100%;
            float: left;
        }
        .input-card {
            width: 70px;
        }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
</head>
<body>
<div id="container" class="map"></div>
<ul id="cursorList" class="input-card">
    <li>
        <input name="cursor" value="default" type="radio" onclick="switchCursor(this)" checked>
        <span class="iconfont icon-Cursor"></span>
    </li>
    <li>
        <input name="cursor" value="pointer" type="radio" onclick="switchCursor(this)">
        <span class="iconfont icon--Hand-Cursor"></span>
    </li>
    <li>
        <input name="cursor" value="move" type="radio" onclick="switchCursor(this)">
        <span class="iconfont icon-cursor-move"></span>
    </li>
    <li>
        <input name="cursor" value="crosshair" type="radio" onclick="switchCursor(this)">
        <span class="iconfont icon-cross"></span>
    </li>
</div>
<script type="text/javascript">
    //初始化地图对象，加载地图
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    
    //使用CSS默认样式定义地图上的鼠标样式
    map.setDefaultCursor("pointer");
    
    
    //自定义鼠标样式图标
    function switchCursor(target) {
        var value = target.value;
        map.setDefaultCursor(value);
    }
</script>
</body>
</html>

隐藏文字标注

showLabel设定为 false 隐藏文字标注

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>地图文字标记开关</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
  <script>
    //初始化地图
    var map = new AMap.Map('container', {
      showLabel: false //不显示地图文字标记
    });
  </script>
</body>

</html>

响应式 vs. 自适应

媒体查询，边界断点的规则设定（Media queries && break point）
内容的可伸缩性效果（Flexibel visuals）
流式网格布局(Fluid grids)
主要内容呈现及图片的高质量(Main content and high quality)

通常认为，RWD 是 AWD 的子集。

RWD：Ethan Marcote 的文章是大家认为 RWD 的起源。他提出的 RWD 方案是通过 HTML 和 CSS 的媒体查询技术，配合流体布局实现。RWD 倾向于只改变元素的外观布局，而不大幅度改变内容。Jeffrey Zeldman 总结说，我们就把 RWD 定义为一切能用来为各种分辨率和设备性能优化视觉体验的技术。

AWD：Adaptive Design 是 Aaron Gustafson 的书的标题。他认为 AWD 在包括 RWD 的 CSS 媒体查询技术以外，也要用 Javascript 来操作 HTML 来更适应移动设备的能力。AWD 有可能会针对移动端用户减去内容，减去功能。AWD 可以在服务器端就进行优化，把优化过的内容送到终端上。

设备独立像素 = CSS 像素 = 逻辑像素

GitLab私有化部署

一台云服务器
云服务器上已安装Docker
了解Docker基础

部署和使用公共密钥

公共密钥可以在所有项目中使用，添加读写权限。部署后可以为git仓库的使用或者配合其他平台做自动化流程提供便利。

image.png

选择“部署密钥”，点击“新建部署密钥”

https://docs.gitlab.cn/jh/user/ssh.html#generate-an-ssh-key-pair

填入标题和ssh公钥，ssh密钥的生成参考官网这里[1]进入某个具体的项目（如没有则新建一个），点击“设置” => “仓库”

“部署密钥”展开 => 选择“公开访问的部署密钥” => 启用对应的公共密钥

“已启用的部署密钥” => 选择对应的公共密钥，点击编辑 => 打钩“授予此密钥写入权限” 保存更改

image.png

1. 安装GitLab 插件

2. 配置触发时机

选择“Build when a change is pushed to GitLab”
点击Generate 生成一个Secret token

使用Docker安装Jenkins

image.png

image.png

GitLab webhooks

填写url，这个url就在Jenkins “Build when a change is pushed to GitLab” 后面
填写Jenkins刚刚生成的secret token
触发来源勾选“标签推送事件”
SSL 验证取决于你的Jenkins服务是http还是https，如果是http就取消勾选

image.png

image.png

webhooks

点击 “标签推送事件”，Jenkins自动触发一次构建，则配置成功

image.png

https://juejin.cn/post/7242105983136448573

docker run --name docker_jenkins --privileged=true -itd -p 8080:8080 -p 50000:50000 --restart=on-failure -v jenkins_home:/var/jenkins_home jenkins/jenkins:lts-jdk11

--name：自定义容器名称
--privileged=true：赋予该容器更高的权限。几乎与宿主机上的root用户拥有相同的权限。能够在容器中使用docker命令
-itd ：容器内增加交互终端
-v jenkins_home:/var/jenkins_home：存储Jenkins数据，这几乎是必须的。如果不设置，重启Jenkins容器后，Jenkins将会被重置

安装成功后，访问服务器8080端口

打印Jenkins日志：docker logs -f [container_id]。日志中就存有初始化的管理员密码
进入容器内部，根据提示找到初始密码所在位置查看
- 进入容器：docker exec -it [container_id] bash
- 查看密码：cat /var/jenkins_home/secrets/initialAdminPassword

image.png

image.png

image.png

全局凭据

类型：选择“SSH Username with private key”
Username：填写GitLab用户名
Enter directly：选中后，将生成的ssh密钥的私钥填入
Passphrase：如果生成ssh密钥对时设置了就填写设置的内容，未设置就不需要填写

image.png

image.png

拉取GitLab仓库代码

Jenkins新建任务，选择 “构建一个自由风格的软件项目”
源码管理：选择Git，进行配置
1. 安装插件时选择“安装推荐的插件” Git Plugin会自动安装，才会出现这个Git选项。否则需要先手动安装Git Plugin
2. 地址填写基于ssh的仓库地址
3. 凭据选择之前创建的全局凭据
4. GitLab侧需要同步配置，将ssh的公钥作为项目的部署密钥，这一步参考GitLab私有化部署[2]

移动端适配及PC端适配心得总结体会(二)

WebSocket

let _ws: WebSocket | null = null

export function initWebSock(vm: Vue) {

  _ws = new WebSocket('')

  _ws.addEventListener('open', (e) => {
  })

  _ws.addEventListener('message', (e: any) => {

  })
}

仓库地址：https://github.com/webVueBlog/WebGuideInterview

参考资料

[1]

https://docs.gitlab.cn/jh/user/ssh.html#generate-an-ssh-key-pair: https://link.juejin.cn/?target=https%3A%2F%2Fdocs.gitlab.cn%2Fjh%2Fuser%2Fssh.html%23generate-an-ssh-key-pair

[2]

https://juejin.cn/post/7242007082920312888#heading-6: https://juejin.cn/post/7242007082920312888#heading-6

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-10-08，如有侵权请联系 cloudcommunity@tencent.com 删除