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系列(15) 函数(Functions)
Apr 12 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
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数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
PHP扩展开发入门教程
2015/02/26 PHP
php简单实现快速排序的方法
2015/04/04 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
javascript 多级checkbox选择效果
2009/08/20 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
详解react-refetch的使用小例子
2019/02/15 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
在Python的Django框架中编写编译函数
2015/07/20 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
django 模版关闭转义方式
2020/05/14 Python
Pytorch转tflite方式
2020/05/25 Python
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
银行办理业务介绍信
2014/01/18 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
职业生涯规划书范文
2014/03/10 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
刘公岛导游词
2015/02/05 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
辩护词格式
2015/05/22 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python