解释

整理了一个简单的源代码，放在github里，需要参考的同学要拿起来~

简介

微信小程序上线一年多了，距离美团的mpvue(一个基于Vue.js的小程序开发框架，从底层支持Vue.js语法和构建工具系统)已经过去了几个月。

前端技术日新月异，小程序UI框架层出不穷。

例如：

WeUI:是微信官方设计团队为微信中的网页和微信小程序设计的一套与微信原有视觉体验一致的基础风格库，让用户的使用感知更加统一。(github)

ZanUI:有一个现实版的ZanUI，一个移动Web UI规范。(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.效果如下

具体例子：

用法：使用小程序的输入组件实现搜索。在下面的示例中，主要使用了focus和bindinput。由于mpvue从底层支持Vue.js语法和构建工具系统，因此可以使用vue的v-model进行双向数据绑定。示例如下：

模板div class=' page ' div class=' page _ _ HD ' div class=' page _ _ title ' searchbar/div class=' page _ _ desc '搜索栏/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 '/图标输入类型=' text ' class=' weui-search-bar _ _ input ' placeholder='搜索v-model=' input val ' : focus=' input shoud ' @ input=' input typing '/div class=' weui-icon-clear ' v-if=' input val。 长度' 0 ' @ click=' clearInput '图标类型=' clear '大小=' 14 '/icon/div/div标签类=' weui-search-bar _ _ label ' : hidden=' input shoud ' @ click=' showInput '图标类=' weui-icon-search '类型='搜索/div/label/div class=' weui-search-bar _ _ cancel-BTN ' : hidden='！输入显示@点击='隐藏输入'取消/div/div class=' weui-单元格搜索栏-结果' v-if='输入val。长度0 '导航器URL=' class=' weui-cell ' hover-class=' weui-cell _ active ' div class=' weui-cell _ BD ' div实时搜索文本/div/div/navigator navigator URL=' weui-cell ' hover-class=' weui-cell _ active ' div class=' weui-cell _ BD ' div实时搜索文本/div/div/navigator navigator URL=' weui-cell ' hover-class=' weui-cell _ active ' div class=' weui-cell _ BD ' div实时搜索文本/div/div/navigator navigator URL=' weui-cell ' hover-class=' weui-cell _ active ' div class=' weui-cell _ BD ' div实时搜索文本/div/div/navigator/div/模板脚本导出默认值{ data(){ return { inputshout d : false，inputVal: '' } }，方法： { showInput(){ this。 inputshoud=true}，HideInput(){ this。InputVal=这个。input show=false }，clearInput(){ this。输入值=' '；}，InputTypeing(e){ console。日志(e)；这个。InputVal=e . MP。细节。value } }/脚本样式范围。search bar-result { margin-top : 0；font-size : 14px}.搜索栏-结果：之前{显示：无；}.weui-cell { padd : 12px 15px 12px 35px；}/样式效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。