记录一次用vant框架做h5微信公众号

这次是用vant框架做一个h5微信公众号，是在我一同事封装的基础上开发的。封装的项目在gitee上的地址：湖南巨仑网络科技有限公司/vant-H5移动端封装 - Gitee.com。内容有底部导航的，轮播的，时间转时间戳的，axios请求的一些功能的封装。这样使用起来就方便一些。

整个项目的目录是这样的：

 几乎所有页面都在components里面。

路由写在router/index.js里面。

 看了同事封装的组件，我自己也会封装了一些。

关于vant框架，大家可以参考官方文档：Vant - 轻量、可靠的移动端组件库 (gitee.io)

我们这里引用vant的组件一般这样写：

import { Tabbar, TabbarItem } from 'vant';

components: {

    [Tabbar.name]: Tabbar,

    [TabbarItem.name]: TabbarItem,

  },

比如他这里底部导航组件封装是这样的：HTML:

<template>
  <!-- 底部导航组件 -->
  <div>
    <van-tabbar
      :border="false"
      @change="onChange"
      v-model="active"
      :placeholder="true"
      :route="true"
      inactive-color="#999999"
      active-color="#976A57"
    >
      <van-tabbar-item v-for="(d, index) in tabberlist" :key="index" :to="d.path">
        <template #icon="props">
          <img :src="props.active ? d.inactive : d.active" />
        </template>
        {{ d.name }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

 js:

import { Tabbar, TabbarItem } from 'vant';
import homeSele from "../assets/images/homeFont_select.png";
import home from "../assets/images/homeFont.png";
import circle_select from "../assets/images/circle_select.png";
import circle from "../assets/images/circle.png";
import mine_select from "../assets/images/mine_select.png";
import mine from "../assets/images/mine.png";
export default {
  name: 'App',
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  data() {
    return {
      active: 0,
      tabberlist: [
        {
          name: '首页',
          path: '/',
          active: home,
          inactive: homeSele,
        },
        {
          name: '圈子',
          path: '/classification',
          active: circle,
          inactive: circle_select,
        },
        {
          name: '我的',
          path: '/personalCenter',
          active: mine,
          inactive: mine_select,
        },
      ],
    };
  },
  methods:{
    onChange(){

    }
  }
};

在其他页面引用（比如首页）：

<!-- 底部导航 -->
<Tabber></Tabber>

import Tabber from './Tabber.vue'; // 底部tabber组件

components:{
    Tabber
}

当然，在首页底部导航需要设置样式为透明，因为首页用背景图填充。

css:

>>> .van-tabbar--fixed {
  border-top: 1px solid transparent;
  background-color: transparent;
}
>>> .van-tabbar-item--active {
  background-color: transparent;
}