mpvue項目中使用第三方UI組件庫的方法

簡介

微信小程序上線已有一年多時間啦，自美團的mpvue(基於 Vue.js 的小程序開發框架，從底層支持 Vue.js 語法和構建工具體系)問世也過去了好幾個月。

前端技術突飛猛進，小程序的UI框架也層出不窮。

例如： 

WeUI: 一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊爲微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。(github)

ZanUI: 有贊移動 Web UI 規範 ZanUI 的小程序現實版本。(github)

iView  Weapp:  與iView（基於 Vue.js 的開源 UI 組件庫）同一組織產出的微信小程序UI組件庫。(github)

前言

前端精品教程：百度網盤下載

項目使用的插件：

mpvue-entry: 集中式頁面配置，自動生成各頁面的入口文件，優化目錄結構，支持新增頁面熱更新。(github)

mpvue-router-patch: 在 mpvue 中使用 vue-router 兼容的路由寫法。(github)

如何在mpvue中配置使用第三方的UI組件庫呢？

（PS：本文使用iView  Weapp示例）

1. 將第三方組件庫從github克隆到本地；

2. 將iview-weapp中的dist文件夾(此處我重命名爲iView,以便區分)複製到mpvue項目的輸出目錄中(默認是dist，編譯後的vue代碼在此)；

iView目錄中，全都是組件

3. 打開mpvue項目中的router/routes.js,在須要使用組件的地方，寫入相應的配置

4. 在vue頁面中使用組件

5. 效果以下

前端精品教程：百度網盤下載

具體示例：

使用：search這部分是利用小程序input組件實現，在下面的示例中主要使用了focus和bindinput兩個屬性，因爲mpvue從底層支持 Vue.js 語法和構建工具體系，所以能夠用vue的v-model進行雙向數據綁定，示例以下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88

<template>   <div class= "page" >   <div class= "page__hd" >    <div class= "page__title" >SearchBar</div>    <div class= "page__desc" >搜索欄</div>   </div>   <div class= "page__bd" >    <div class= "weui-search-bar" >    <div class= "weui-search-bar__form" >     <div class= "weui-search-bar__box" >     <icon class= "weui-icon-search_in-box" type= "search" size= "14" ></icon>     <input type= "text" class= "weui-search-bar__input" placeholder= "搜索" v-model= "inputVal" :focus= "inputShowed" @input= "inputTyping" />     <div class= "weui-icon-clear" v- if = "inputVal.length > 0" @click= "clearInput" >      <icon type= "clear" size= "14" ></icon>     </div>     </div>     <label class= "weui-search-bar__label" :hidden= "inputShowed" @click= "showInput" >     <icon class= "weui-icon-search" type= "search" size= "14" ></icon>     <div class= "weui-search-bar__text" >搜索</div>     </label>    </div>    <div class= "weui-search-bar__cancel-btn" :hidden= "!inputShowed" @click= "hideInput" >取消</div>    </div>    <div class= "weui-cells searchbar-result" v- if = "inputVal.length > 0" >    <navigator url= "" class= "weui-cell" hover-class= "weui-cell_active" >     <div class= "weui-cell__bd" >     <div>實時搜索文本</div>     </div>    </navigator>    <navigator url= "" class= "weui-cell" hover-class= "weui-cell_active" >     <div class= "weui-cell__bd" >     <div>實時搜索文本</div>     </div>    </navigator>    <navigator url= "" class= "weui-cell" hover-class= "weui-cell_active" >     <div class= "weui-cell__bd" >     <div>實時搜索文本</div>     </div>    </navigator>    <navigator url= "" class= "weui-cell" hover-class= "weui-cell_active" >     <div class= "weui-cell__bd" >     <div>實時搜索文本</div>     </div>    </navigator>    </div>   </div>   </div> </template>   <script> export default {   data() {   return {    inputShowed: false ,    inputVal: ""   }   },   methods: {   showInput() {    this .inputShowed = true ;   },   hideInput() {    this .inputVal = '' ;    this .inputShowed = false   },   clearInput() {    this .inputVal = '' ;   },   inputTyping(e) {    console.log(e);    this .inputVal = e.mp.detail.value   }   } } </script>   <style scoped> .searchbar-result {   margin-top: 0;   font-size: 14px; } .searchbar-result:before {   display: none; } .weui-cell {   padding: 12px 15px 12px 35px; } </style>

效果：