小程序转h5之后 vant文件查找失败:_你还在使用原生开发小程序吗

最近帮别人在做一个小程序,因为官方的支持不够好,组件库也不够多,所以就没有使用官方的操作。网上查找了一番，觉得mpvue还不错（之前也没玩过），索性拿来用吧！

01 前言

小程序的做法也是比较简单的，假如你是老手的话基本上开箱即用，但是奈何自己技术不够，那就手把手教你踩坑吧。

之前也做过几个小程序，我用过官方的、uni-app开发，效果还行。然后现在是想尝试一下mpvue，生态还可以，组件库也多。拿到设计图的时候觉得还可以，但是一看好像还是有点东西的。

02 自定义tabbar

我看到了页面是有一个自定义tabbar的，自己之前没有做做过这种，都是直接在app.json文件里面配置的，简单高效不带坑。虽然说官方支持自定义tabbar的功能，但是我和官方的意思就不是同一个频道的。这是我拿到的原型图：

一开始好像是有点蒙，但是谷歌了一下其实还有救。思想就是把原生的tabbar隐藏，然后把你自定义的tabbar放上去即可。

• 在app.json配置tabbar，因为后面要跳转（不配置报错）
• 新建一个mytabbar.vue文件，写自己的tabbar
• 在app.vue的onShow的时候隐藏原生的tabbar,wx.hideTabBar();

这样其实就好了，但是需要tabbar的页面都要引入自己的组件，talk is cheap，接下来就开始实现自己的组件吧。

自定义组件

模板部分

<template>
  <section class="tabBar-wrap">
    <article class="tabBar-box">
      <ul class="tabBar-nav" v-if="navList.length > 0">
        <li
          class="item"
          v-for="(item, index) in navList"
          @click="selectNavItem(index,item.pagePath)"
          :key="index"
        >
          <p class="item-images">
            <img
              :src="selectNavIndex === index ? item.selectedIconPath : item.iconPath"
              alt="iconPath"
            />
          </p>
          <p
            :class="selectNavIndex === index ? 'item-text item-text-active' : 'item-text' "
          >{
    {item.text}}</p>
        </li>
        <li v-if="needButton" style="