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的setAttribute兼容性问题解决方法
Nov 11 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 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实现的简单排列组合算法应用示例
2017/06/20 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
js opener的使用详解
2014/01/11 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
在python中bool函数的取值方法
2018/11/01 Python
Python 移动光标位置的方法
2019/01/20 Python
python实现支付宝转账接口
2019/05/07 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
办公室主任主任岗位责任制
2014/02/11 职场文书
公司请假条范文
2014/04/11 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
产品设计开发计划书
2014/05/07 职场文书
简易离婚协议书范本
2014/10/24 职场文书
三好学生事迹材料
2014/12/24 职场文书
食堂卫生管理制度
2015/08/04 职场文书
关于车尾的标语大全
2015/08/11 职场文书
初中政治教学工作总结
2015/08/13 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android