小程序使用mpvue框架无缝接入Vant Weapp组件库

有美团开源出的mpvue以其vue的语法和良好的开发效率再搭配上用户体验良好的UI组件无疑是定制化微信小程序的开发方式，然而因为mpvue是对微信原生开发的再次封装，这也为咱们引入UI组件添加了很多麻烦，话很少说，接下来为你们展现引入vant-weapp的方法。

一、首先，咱们须要有个mpvue的基础的项目文件骨架，即用mpvue初始化一个项目

# 全局安装 vue-cli
$ npm install --global vue-cli

# 建立一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

二、其次,在微信开发者工具中新建项目,填入注册的appid和文件目录（敲黑板了这里要注意一点，文件目录是mpvue项目中下的dist目录），根目录中的dist目录实际上就是mpvue每次打包完成后（npm run build）的目录，因此里面的MINA文件结构就是微信小城小程序原生开发的文件结构；

三、接下来,咱们须要用到vant-weapp开源项目中vant UI组件，因此要将vant-weapp下载下来,下来后将其项目下的dist文件所有都copy到咱们须要用到原项目中（就是咱们开始初始化的项目），为了方便管理，能够在根目录下的static下新建一个vant用于存放UI组件文件；

git clone https://github.com/youzan/vant-weapp.git

 

粘贴位置如图所示

四、接下来就比较简单了，组件的具体用法可在官方文档中查看，咱们只须要在咱们须要使用组件的页面的配置json文件中引入咱们须要的组件

如下是个人首页json配置

{ 
    // 页面配置，即 page.json 的内容
    navigationBarTitleText: '首页',
    'usingComponents': {
      'van-search': '/static/vant/search/index',
      'van-row': '/static/vant/row/index',
      'van-col': '/static/vant/col/index',
      'van-tab': '/static/vant/tab/index',
      'van-tabs': '/static/vant/tabs/index',
      'van-cell': '/static/vant/cell/index',
      'van-cell-group': '/static/vant/cell-group/index',
      'van-radio': '/static/vant/radio/index',
      'van-radio-group': '/static/vant/radio-group/index',
      'van-field': '/static/vant/field/index',
      'van-button': '/static/vant/button/index',
      'van-card': '/static/vant/card/index',
      'van-popup': '/static/vant/popup/index',
      'van-icon': '/static/vant/icon/index',
      'van-panel': '/static/vant/panel/index',
      'van-action-sheet': '/static/vant/cell-group/index',
      'van-switch-cell': '/static/vant/switch-cell/index',
      'van-area': '/static/vant/area/index',
      'van-dialog': '/static/vant/dialog/index'
    }
  }

 

四、将UI组件导入后可在项目册测试，在此以前为了让UI组件生效，咱们须要将项目打包一下，即为咱们须要打开终端，在项目的根目录下执行一遍（npm run build）,这样vant的UI组件就会在页面中正常发挥做用了

注意事项

在vant-weapp的官方文档中的具体用法是使用wxml的语法，因此咱们不能直接照搬使用

一、数据的绑定方式

原生小程序，在标签内绑定数据的方式

value="{{value}}"

因为咱们使用的事mpvue，因此咱们须要改为

v-bind:value="value"
//或者
:value="value"

二、事件的绑定方式

原生小程序使用方式

bind:click="onClick"

mpvue 使用方式

@click="onClick"

三、交互组件的引用

vant中像notify这种操做反馈类的组件都有两个引入，一是组件的引入，这个在main.json中引入；另外一个是方法的引入，须要在vue文件中import引入，值得注意的是，这里的引入不能使用绝对路径，能够用相似于这样的相对路径。

import Notify from '@/../static/vant/notify/notify' //@是mpvue的一个别名，指向src目录

四、获取 event 事件对象中值

值得注意的是，mpvue中获取event值与原生小程序有所不一样。举例：

onChange(event){ // 获取表单组件filed的值
  console.log(event.mp.detail) // 注意加入mp
}

五、监听方式的变动
mpvue 里面没法使用@click-icon这样的监听名,所以若是 API 文档里面有出现这样的监听名，那么须要手动修改源代码。

能够改为驼峰式的监听名。

eg: 我在field组件中就遇到这个问题，个人作法是：

// static/vant/field/index.js

this.$emit('click-icon');

// 修改成:

this.$emit('clickIcon');

报错的处理方式

通常的报错报错均可以经过一下流程处理。

一、是否打开了微信开发者工具中的ES6转ES5功能。
二、仔细检查代码和比对文档，看看是否有使用不当的地方。
三、从新编译npm run dev或删掉dist目录从新npm run dev
四、重启或更新微信开发者工具。

在添加UI组件后,报页面丢失，TypeError: Cannot read property 'index' of undefined

一、新建的页面，没有从新打包
二、添加的组件路径有问题，路径错误或者是重复添加

分享到此结束，以后若是我还遇到了什么坑会继续分享的！