mpvue项目中使用第三方UI组件库的方法


Posted in Javascript onSeptember 30, 2018

说明

整理了一份简单的源码,放在github,有需要参考的同学自取~

简介

微信小程序上线已有一年多时间啦,自美团的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克隆到本地;

mpvue项目中使用第三方UI组件库的方法

2. 将iview-weapp中的dist文件夹(此处我重命名为iView,以便区分)复制到mpvue项目的输出目录中(默认是dist,编译后的vue代码在此);

mpvue项目中使用第三方UI组件库的方法

iView目录中,全都是组件

mpvue项目中使用第三方UI组件库的方法

3. 打开mpvue项目中的router/routes.js,在需要使用组件的地方,写入相应的配置

mpvue项目中使用第三方UI组件库的方法

4. 在vue页面中使用组件

mpvue项目中使用第三方UI组件库的方法

5. 效果如下

mpvue项目中使用第三方UI组件库的方法

具体示例:

使用:search这部分是利用小程序input组件实现,在下面的示例中主要使用了focus和bindinput两个属性,由于mpvue从底层支持 Vue.js 语法和构建工具体系,因此可以用vue的v-model进行双向数据绑定,示例如下:

<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组件库的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈javascript 面向对象编程
Oct 28 Javascript
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
element-ui中el-upload多文件一次性上传的实现
Dec 02 Javascript
原生JavaScript实现购物车
Jan 10 Javascript
mpvue将vue项目转换为小程序
Sep 30 #Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 #Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 #Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 #Javascript
使用angularjs.foreach时return的问题解决
Sep 30 #Javascript
angular将html代码输出为内容的实例
Sep 30 #Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 #Javascript
You might like
一个用php实现的获取URL信息的类
2007/01/02 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
js实现简单模态框实例
2018/11/16 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
Python栈类实例分析
2015/06/15 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
Python处理中文标点符号大集合
2018/05/14 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
大学生军训广播稿
2014/01/24 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
法制宣传标语
2014/06/23 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL