mpvue引入第三方UI组件库（Vant Weapp）的两种方式

前言

美团开源出的mpvue 是一个使用 Vue.js 开发小程序的前端框架。由于它是围绕小程序开发为目的，针对于微信原生开发的再次封装。但因为小程序平台原因(比如不能操作DOM，BOM)，所以有些第三方框架不能引入，下面我们以有赞前端团队vant UI组件库说明mpvue如何引入UI组件库的。

根据官网提示，有两种安装方式，1.通过 npm 安装，2.下载代码导入。

方式一(下载代码导入)

1.下载vant UI组件
在开源项目这里下载vant UI组件，打开文件夹，将其项目下的dist文件全部拷贝到一个新的文件夹里，名命为:vant-weapp。

2.存放UI组件文件在mpvue项目中

将vant-weapp的文件夹放在mpvue项目根目录下的static的下面，如下图所示位置:

3.引入组件
在要引入组件的文件夹下，创建main.json，如下图所示位置：

在其main.json中，加入如下代码:

 "usingComponents": {    
  "van-area": "../../../static/vant-weapp/area/index",   
  "van-toast":"../../../static/vant-weapp/toast/index"
  }

4.使用组件
在用webstorm打开src下的文件夹，在上述main.js同级的index.vue中，放入如下代码：然后终端运行npm run dev

 <template>
  <div>
      <van-area :area-list="areaList" :columns-num="3"  @confirm="onConfirm"  @cancel="onCancel" />
  </div>
  </template>
  <script>import Toast from '../../../static/vant-weapp/toast/toast'
  export default {
  data () {  
    return {    
        areaList:{}
    }
  },
    mounted(){    
      this.$getHttp('https://cashier.youzan.com/wsctrade/uic/address/getAllRegion.json',{})
          .then(response => {           
             this.areaList = response.data//获取组件地址
          })
      },    methods:{
        onCancel(){
            Toast('取消')
        },
        onConfirm(even){
            Toast('确定'+JSON.stringify(even))
        }
    }

}</script>

实现效果图如下:

方式二(步骤)

1.使用 npm 安装
用webstorm打开项目的src下的文件夹，在终端输入如下代码：

# npmnpm i vant-weapp -S --production

安装完成

2.构建npm
保证是微信开发者工具是最新版本，选择工具--->构建npm，小程序的根目录出现了 miniprogram_npm这个文件夹。

3.引入组件
需要调用到Vant组件的时候，在相对应的.json文件里添加配置：

"usingComponents": { 
 "van-area": "../../miniprogram_npm/vant-weap/area/index",  
 "van-toast":"../../miniprogram_npm/vant-weapp/toast/index"
  }

4.使用组件
如方式一所示

注意事项

我们在参考vant-weapp的官方文档时，有些语法需要做适当的调整，因为官方用法是使用wxml的语法，并不完全的适合mpvue。

1.数据的绑定方式

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

area-list="{{ areaList }}"

mpvue需要更改为:

v-bind:area-list="areaList"或:area-list="areaList"

2.事件的绑定方式

小程序绑定方式

  bind:confirm="onConfirm"
  bind:cancel="onCancel"

mpvue需要更改为:

@confirm="onConfirm" 
 @cancel="onCancel"

3.获取 event 事件对象中值

onConfirm(even){   
 console.log(JSON.stringify(even))   
  console.log(event.mp.detail) // 注意加入mp
 }

4.在使用交互性第三方组件
类似Toast，第三方结构如下图所示:

这类组件都要有两个引入，一是组件的引入，这个在main.json中引入；另一个是方法的引入，需要在vue文件中import引入。

import Toast from '../../../static/vant-weapp/toast/toast'

5.全局引入组件不显示
考虑到在每个页面引入组件很是麻烦，能不能全局引入呢？测试一下发现不行，无论是在app.json或app.js加入都不可以。

解决运行报错

解决方案：

(1).打开了微信开发者工具中的ES6转ES5功能。

(2).打开node_modules文件夹找到vant-weapp中的dist文件夹拷贝到miniprogram_npm文件夹下，同时把路径中的“path/to/”删除，然后再运行就不会报错了

2.

解决方案:

 检查相应文件夹下的main.json，内容是否为空，格式是否正确。

3.在添加UI组件后,报页面丢失，TypeError: Cannot read property 'index' of undefined。
解决方案:
(1). 新建的页面，没有重新打包npm run dev
(2).添加的组件路径是否有问题，路径错误或者是重复添加。

本文独发金蝶云社区。