1. 程式人生 > >mpvue項目中使用第三方UI組件庫的方法

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

true form 原生 index hide 搜索欄 view 熱更新 因此

簡介

微信小程序上線已有一年多時間啦,自美團的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>

效果:

技術分享圖片

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