微信小程序开发(第四天)-引入vant插件，引入iconfont，地图页面车辆等按钮优化

---

一、引入vant小程序组件

借鉴一位博主的保姆级教程，微信小程序中使用vant组件库（超详细）
超级详细具体。

二、vant-icon引入iconfont

由于vant组件提供的icon图标不多，按照一位博主引入教程微信小程序使用iconfont及引入vant-icon使用iconfont，引入iconfont。

1. 进入iconfont官网下载需要的组件
   进入官网，[我的资源]-[我的项目]-[新建项目]
   
   查找自己需要的图标，若有多个图标可重复此操作
   添加入库，可以一次性批量入库

2. 将组件解压复制到项目下
   解压后目录如下
   
   修改iconfont.css文件

@font-face {
  font-family: "iconfont"; /* Project id 4243021 */
  /*这里未修改的
  src: url('iconfont.woff2?t=1694143319081') format('woff2'),
       url('iconfont.woff?t=1694143319081') format('woff'),
       url('iconfont.ttf?t=1694143319081') format('truetype');*/
  /*下面3行是修改后的*/
  src: url('//at.alicdn.com/t/c/font_4243021_ee99na4c0ia.woff2?t=1694150277134') format('woff2'),
       url('//at.alicdn.com/t/c/font_4243021_ee99na4c0ia.woff?t=1694150277134') format('woff'),
       url('//at.alicdn.com/t/c/font_4243021_ee99na4c0ia.ttf?t=1694150277134') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-guiji:before {
  content: "\e625";
}

.icon-car:before {
  content: "\e627";
}

.icon-yiliaojigou:before {
  content: "\e99a";
}

将iconfont.css文件改为iconfont.wxss并复制到小程序项目下assets/iconfont文件夹(若没有则新建)中

3. 引用
   在app.wxss中引用iconfont.wxss，添加以下代码

  @import './assets/iconfont/iconfont.wxss';

在需要的页面引用如index页面，index.json中添加以下代码

"usingComponents": {
      "van-icon": "@vant/weapp/icon/index"
  }

在index.wxml可以使用iconfont了，如下

<van-icon class="iconfont" class-prefix="icon" name="car" ></van-icon>

三、车辆、机构等按钮优化

1. 在引入vant、iconfont组件后，修改map.wxml文件

<cover-view class="btnGroup">
            <van-button id="carBtn" class="carImgBtn" bind:click="carClick" color="{{carColor}}" >
                <van-icon class="iconfont" class-prefix="icon" name="car" ></van-icon>
                <cover-view style="font-size: 10px;">车辆</cover-view>
            </van-button>
            <van-button class="institucarImgBtntionImgBtn" >
                <van-icon class="iconfont" class-prefix="icon" name="yiliaojigou"></van-icon>
                <cover-view style="font-size: 10px;">机构</cover-view>
            </van-button>
            <van-button class="carImgBtn"  >
                <van-icon class="iconfont" class-prefix="icon" name="guiji"></van-icon>
                <cover-view style="font-size: 10px;">轨迹</cover-view>
            </van-button>
        </cover-view>

2. 修改map.wxss文件

.btnGroup{
    width: 30px;
    height: 131px;
    margin: 10px;
    position:absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
}
.carImgBtn{
    width: 30px;
    height: 30px;
    display:table;
}

3. 修改map.js文件

data{
...
carColor:""
},
...
carClick:function(e){
        if(this.data.carColor==""){
            this.setData({
                carColor:"#1989fa",
                markers:this.data.initMarkers
            });
        }else{
            this.setData({
                carColor:"",
                markers:[]
            });
        }
        
    },

小程序截图

四、BUG

1.小程序报错：routeDone with a webviewId 19 that is not the current page
2.微信小程序渲染报错：Failed to load local image resource /miniprogram_npm/@vant/images/car.png