八月末关注了专栏 · 2019-08-20

code秘密花园

基础知识、算法、原理、项目、面试。公众号code秘密花园

关注 5211

八月末收藏了文章 · 2018-11-20

纯css实现Material Design中的水滴动画按钮

前言

大家平时应该经常见到这种特效，很炫酷不是吗

button

这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已有的项目中，可能只是想加一个这样的按钮，来增强用户体验，这些js库就显得有些过于庞大了，同时由于是js实现，很多时候还要注意加载问题。

那么，有没有办法用css来实现这一特效呢？

思路

其实就是一个动画，一个正圆从小变大，用css3中的动画很容易实现

示例代码

@keyframes ripple{
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 0;
    }
}

通常用js来实现的方式很简单，就是给点击元素添加一个class，然后再动画结束后移除该class

示例代码

var btn = document.getElementById('btn');
btn.addeventlistener('click',function(){
  addClass(btn,'animate')
},false)
btn.addeventlistener('transitionend',function(){//监听css3动画结束
  removeClass(btn,'animate')
},false)

那么如何通过css来实现动画的触发呢？

CSS实现

css中与鼠标交互的伪类主要有

hover鼠标经过
:active鼠标按下
:focus鼠标聚焦
:checked鼠标选中

很多情况下，我们页面中的效果都是通过hover来实现的，鼠标放上去触发一个效果，离开还原，但是如果放上去马上离开，那么动画也会马上结束。

我们先试一下。

结构

这是我们写好的页面结构和样式

<style>
.btn{ 
  display: block; 
  width: 300px; 
  outline: 0; 
  overflow: hidden;  
  position: relative; 
  transition: .3s; 
  cursor: pointer; 
  user-select: none; 
  height: 100px; 
  text-align: center; 
  line-height: 100px; 
  font-size: 50px; 
  background: tomato; 
  color: #fff;  
  border-radius: 10px;
}
</style>
<a class="btn">button</a>

很简单，就是一个普通的按钮样式

button2

下面我们在按钮中添加我们需要的正圆。

我们用伪元素来实现

.btn:after{
    content: '';
    position: absolute;
    width: 100%;
    padding-top: 100%;
    background: transparent;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

我们把上面的overflow: hidden去掉，把这个圆缩小一点看看效果

button2

然后，我们写个缩放的动画

@keyframes ripple{
    from {
        transform:translate(-50%,-50%) scale(0);
        /**由于我们默认写了变换属性，所以这里要补上translate(-50%,-50%)，不然就会被替换了**/
        background: rgba(0,0,0,.25);
    }
    to {
        transform:translate(-50%,-50%) scale(1);
        background: transparent;
    }
}

hover小交互体验

鼠标经过试试？

.btn:hover:after{
  animation: ripple 1s;
}

buttonhover

效果还是不错的，就是如果鼠标离开的太快，那么刚刚扩大的圆马上就缩回去了，有点违和

但是这不是我们想要的效果呀。我们希望的是点击一次触发一次，而不是这样放上去就完了，再也不会触发了。

active尝试

平时工作中，active用到的也比较多，通常是用在点击的效果上，那么拿来试试？

.btn:active:after{
  animation: ripple 1s;
}

buttonavtive

效果也是差强人意，有点类似鼠标按住的意思，你必须一直按住鼠标，才能完整的触发，比如说上面的例子，动画的运行实现是1s，那么你必须点在那个按钮上持续1s才能看到完整的动画效果，否则，就像上面鼠标离开一样，动画马上就缩回去了

focus体验

如果需要让任意一个元素获焦，你可以给太指定一个tabindex属性

<a class="btn" tabindex="1">button</a>

.btn:focus:after{
  animation: ripple 1s;
}

buttonfocus

foucs也可以触发，只是触发以后只有等失去焦点之后才能再次触发，实际的操作表现就是，点过一次以后，再点一下外面的空白

难道就没有办法了吗？

当然还是有的，放在最后的肯定就是解决方式，haha

checked

checked并不能直接触发，这是表单元素选中后触发的，为此，我们需要改造一下页面结构

<label class="btn">
  <input type="checkbox"><span>button</span>
</label>

我们这里换成了lable并计入了input[type=checkbox]标签，主要是为了在点击按钮的时候触发input选中。

加一点样式

.btn>span:after{
  /**换一下选择器**/
}
.btn>input[type=checkbox]{
  display: none
}
.btn>input[type=checkbox]:checked+span:after{
  animation: ripple 1s;
}

这样也能触发动画，但问题是，当再次点击的时候就成了非选中状态了，怎么触发动画呢？

其实可以用:not来实现

.btn>input[type=checkbox]:not(:checked)+span:after{
  animation: ripple 1s;
}

乍一看好像挺聪明的，仔细一想，正反两个都写了动画，不就跟:checked没关系了？还不如直接

.btn>input[type=checkbox]+span:after{
  animation: ripple 1s;
}

无限轮回中...

这个问题困扰了我好久，不过皇天不负有心人，后来试着在两种状态下触发不同的动画是可以分别触发的，如下

.btn>input[type=checkbox]:checked+span:after{
  animation: ripple1 1s;
}
.btn>input[type=checkbox]:not(:checked)+span:after{
  animation: ripple2 1s;
}

这个应该很好理解吧。

那么，重点来了，现在把动画ripple1和ripple2里面的动画过程都改成一样，也是可以分别触发的，也就是说，只要动画名称不一样，css都会当成不同的动画来处理

这样就简单了，我们只需要默认一个状态，选中一个状态，然后分别触发名称不同的动画就行了~

.btn>input[type=checkbox]+span:after{
  animation: ripple-in 1s;
}
.btn>input[type=checkbox]:checked+span:after{
  animation: ripple-out 1s;
}
@keyframes ripple-in{
    from {
        transform:translate(-50%,-50%) scale(0);
        background: rgba(0,0,0,.25);
    }
    to {
        transform:translate(-50%,-50%) scale(1);
        background: transparent;
    }
}
@keyframes ripple-out{/*仅仅名称不同*/
    from {
        transform:translate(-50%,-50%) scale(0);
        background: rgba(0,0,0,.25);
    }
    to {
        transform:translate(-50%,-50%) scale(1);
        background: transparent;
    }
}

效果就如文章一开始所示，完美

完整demo如下

https://codepen.io/xboxyan/pe...

一些不足

由于上述动画样式在默认情况下就会被触发，所以页面加载进来就会看到按钮上的水滴动画运动一次，不过也不是特别明显，还可以接受。

其次，实际效果肯定是希望鼠标点击哪里，就以该点为中心扩散，我们css肯定是做不到这点的，只能从中心扩散，这也只能妥协了。这里提供一个思路，可以使用css的变量，每次点击的时候吧相应的值存在style里面，这样css中也能用上。

希望能用css今后挖掘出更多有趣的效果^ ^

喜欢的可以关注我的博客 https://blog.codelabo.cn

查看原文

这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已有的项目中，可能只是想加一个这样的按钮，来增强用户体验，这些js库就显得有些过于庞大了，同时由于是js实现，很多时候还要注意加载...

八月末评论了文章 · 2018-11-17

Mpvue中使用Vant Weapp组件库

一、介绍

mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑，在这里分享给大家，让mpvue开发者可以使用vant组件库进行开发，避免踩不必要的坑。

此教程是在dov-yih一同协助下完成。经过测试，Vant Weapp下所有组件都能够在mpvue中使用

二、使用方法

目前vant已经支持了npm的方式，但是由于node_modules目录下的代码是不会被编进dist目录下的，所以暂时只能用git方式使用。

克隆vant仓库

将dist目录下的所有文件复制到你项目的/static/vant/目录下。

git clone https://github.com/youzan/vant-weapp.git

// 当然你也可以克隆本仓库代码，本仓库会与`vant`仓库保持同步。直接将`vant`目录复制到`/static`目录下
git clone https://github.com/Rychou/mpvue-vant.git

引入

在需要引入的页面目录下的main.json文件中

{
  "usingComponents": {
    "van-button": "/static/vant/button/index",
  }
}

使用

<van-button>测试</van-button>

三、注意事项

具体组件 api 文档参考Vant Weapp

1. 使用方式

mpvue 和原生小程序的方式有所不同。可以参考mpvue文档

1.1 数据绑定

原生小程序使用方式为

value="{{value}}"

mpvue 使用方式

v-bind:value="value"
//或者
:value="value"

1.2 事件监听

原生小程序使用方式

bind:click="onClick"

mpvue 使用方式

@click="onClick"

1.3 vue 中组件引入

vant中像notify这种操作反馈类的组件都有两个引入，一是组件的引入，这个在main.json中引入；另一个是方法的引入，需要在vue文件中import引入，值得注意的是，这里的引入不能使用绝对路径，可以用类似于这样的相对路径。

import Notify from '@/../static/notify/notify' //@是mpvue的一个别名，指向src目录

1.4 获取 event

值得注意的是，mpvue中获取event值与原生小程序有所不同。举例：

onChange(event){ // 获取表单组件filed的值
  console.log(event.mp.detail) // 注意加入mp
}

2. BUG 及报错处理方法

2.1 监听名

mpvue 里面无法使用@click-icon这样的监听名,因此如果 API 文档里面有出现这样的监听名，那么需要手动修改源代码。

可以改成驼峰式的监听名。

eg: 我在field组件中就遇到这个问题，我的做法是：

// static/vant/field/index.js

this.$emit('click-icon');

// 修改为:

this.$emit('clickIcon');

2.2 报错

一般的报错报错都可以通过一下流程处理。

是否打开了微信开发者工具中的ES6转ES5功能。
仔细检查代码和比对文档，看看是否有使用不当的地方。
重新编译npm run dev或删掉dist目录重新npm run dev
重启或更新微信开发者工具。

若以上流程都走完了，还是无法解决报错，可以通过提交issues的方式，我来帮你解决。

2.2.1 引入组件报错

VM54:1 thirdScriptError sdk uncaught third Error module "static/vant/notify/index.js" is not defined

解决办法是：打开小程序开发者工具中的ES6 转 ES5功能. issues/#5

3. 其他组件库

目前比较好的组件库有三个，Wux Weapp,iview weapp,Vant Weapp。

这三者都是用原生小程序写的组件库，因此理论上来说，在 mpvue 中都是可以无缝使用的。不同组件库的组件都不一样，有的更丰富，有的逻辑更完善，有的文档更清晰。因此用什么组件，还需要自己取舍。

比如：三者中，唯有Wux Weapp有日历组件，而且它里面还有一些更高级的组件可以使用。

使用方法上，几乎没有差异。值得注意的是，大家复制源代码到自己项目上时，应该复制/dist/目录下的文件。因为这里是经过编译后的。

如果大家使用过程中遇到什么 BUG，可以通过提issues的方式让我知道，大家一起踩坑吧！

分享两个小程序

一、猫叫助手

基于 vant 和 wux 组件库,以及小程序云开发开发的一个小程序。以及总结了mpvue中使用云开发的注意事项，mpvue-cloud

收录各种猫叫声，帮助与猫咪交流，分享一些养猫的小知识等。

猫叫助手

二、在书云

这是我近期使用Taro开发框架开发的一款小程序，主要功能是提供可靠的书架管理功能，只需要扫一扫书籍背后的条形码即可添加书籍入库，你可以方便的在线上管理你的书架，查看书籍的基本信息，亦可以添加书评。

该项目获得了微信小程序 U 计划的资助。目前项目正在开发中，欢迎大家体验反馈。

在书云

查看原文

mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑，在这里分享给大家，让mpvue开发者可以使用vant组件库进行开发，避免踩不必要的坑。

八月末评论了文章 · 2018-11-16

Mpvue中使用Vant Weapp组件库

一、介绍

mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑，在这里分享给大家，让mpvue开发者可以使用vant组件库进行开发，避免踩不必要的坑。

此教程是在dov-yih一同协助下完成。经过测试，Vant Weapp下所有组件都能够在mpvue中使用

二、使用方法

目前vant已经支持了npm的方式，但是由于node_modules目录下的代码是不会被编进dist目录下的，所以暂时只能用git方式使用。

克隆vant仓库

将dist目录下的所有文件复制到你项目的/static/vant/目录下。

git clone https://github.com/youzan/vant-weapp.git

// 当然你也可以克隆本仓库代码，本仓库会与`vant`仓库保持同步。直接将`vant`目录复制到`/static`目录下
git clone https://github.com/Rychou/mpvue-vant.git

引入

在需要引入的页面目录下的main.json文件中

{
  "usingComponents": {
    "van-button": "/static/vant/button/index",
  }
}

使用

<van-button>测试</van-button>

三、注意事项

具体组件 api 文档参考Vant Weapp

1. 使用方式

mpvue 和原生小程序的方式有所不同。可以参考mpvue文档

1.1 数据绑定

原生小程序使用方式为

value="{{value}}"

mpvue 使用方式

v-bind:value="value"
//或者
:value="value"

1.2 事件监听

原生小程序使用方式

bind:click="onClick"

mpvue 使用方式

@click="onClick"

1.3 vue 中组件引入

vant中像notify这种操作反馈类的组件都有两个引入，一是组件的引入，这个在main.json中引入；另一个是方法的引入，需要在vue文件中import引入，值得注意的是，这里的引入不能使用绝对路径，可以用类似于这样的相对路径。

import Notify from '@/../static/notify/notify' //@是mpvue的一个别名，指向src目录

1.4 获取 event

值得注意的是，mpvue中获取event值与原生小程序有所不同。举例：

onChange(event){ // 获取表单组件filed的值
  console.log(event.mp.detail) // 注意加入mp
}

2. BUG 及报错处理方法

2.1 监听名

mpvue 里面无法使用@click-icon这样的监听名,因此如果 API 文档里面有出现这样的监听名，那么需要手动修改源代码。

可以改成驼峰式的监听名。

eg: 我在field组件中就遇到这个问题，我的做法是：

// static/vant/field/index.js

this.$emit('click-icon');

// 修改为:

this.$emit('clickIcon');

2.2 报错

一般的报错报错都可以通过一下流程处理。

是否打开了微信开发者工具中的ES6转ES5功能。
仔细检查代码和比对文档，看看是否有使用不当的地方。
重新编译npm run dev或删掉dist目录重新npm run dev
重启或更新微信开发者工具。

若以上流程都走完了，还是无法解决报错，可以通过提交issues的方式，我来帮你解决。

2.2.1 引入组件报错

VM54:1 thirdScriptError sdk uncaught third Error module "static/vant/notify/index.js" is not defined

解决办法是：打开小程序开发者工具中的ES6 转 ES5功能. issues/#5

3. 其他组件库

目前比较好的组件库有三个，Wux Weapp,iview weapp,Vant Weapp。

这三者都是用原生小程序写的组件库，因此理论上来说，在 mpvue 中都是可以无缝使用的。不同组件库的组件都不一样，有的更丰富，有的逻辑更完善，有的文档更清晰。因此用什么组件，还需要自己取舍。

比如：三者中，唯有Wux Weapp有日历组件，而且它里面还有一些更高级的组件可以使用。

使用方法上，几乎没有差异。值得注意的是，大家复制源代码到自己项目上时，应该复制/dist/目录下的文件。因为这里是经过编译后的。

如果大家使用过程中遇到什么 BUG，可以通过提issues的方式让我知道，大家一起踩坑吧！

分享两个小程序

一、猫叫助手

基于 vant 和 wux 组件库,以及小程序云开发开发的一个小程序。以及总结了mpvue中使用云开发的注意事项，mpvue-cloud

收录各种猫叫声，帮助与猫咪交流，分享一些养猫的小知识等。

猫叫助手

二、在书云

这是我近期使用Taro开发框架开发的一款小程序，主要功能是提供可靠的书架管理功能，只需要扫一扫书籍背后的条形码即可添加书籍入库，你可以方便的在线上管理你的书架，查看书籍的基本信息，亦可以添加书评。

该项目获得了微信小程序 U 计划的资助。目前项目正在开发中，欢迎大家体验反馈。

在书云

查看原文

mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑，在这里分享给大家，让mpvue开发者可以使用vant组件库进行开发，避免踩不必要的坑。

八月末评论了文章 · 2018-11-16

Mpvue中使用Vant Weapp组件库

一、介绍

mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑，在这里分享给大家，让mpvue开发者可以使用vant组件库进行开发，避免踩不必要的坑。

此教程是在dov-yih一同协助下完成。经过测试，Vant Weapp下所有组件都能够在mpvue中使用

二、使用方法

目前vant已经支持了npm的方式，但是由于node_modules目录下的代码是不会被编进dist目录下的，所以暂时只能用git方式使用。

克隆vant仓库

将dist目录下的所有文件复制到你项目的/static/vant/目录下。

git clone https://github.com/youzan/vant-weapp.git

// 当然你也可以克隆本仓库代码，本仓库会与`vant`仓库保持同步。直接将`vant`目录复制到`/static`目录下
git clone https://github.com/Rychou/mpvue-vant.git

引入

在需要引入的页面目录下的main.json文件中

{
  "usingComponents": {
    "van-button": "/static/vant/button/index",
  }
}

使用

<van-button>测试</van-button>

三、注意事项

具体组件 api 文档参考Vant Weapp

1. 使用方式

mpvue 和原生小程序的方式有所不同。可以参考mpvue文档

1.1 数据绑定

原生小程序使用方式为

value="{{value}}"

mpvue 使用方式

v-bind:value="value"
//或者
:value="value"

1.2 事件监听

原生小程序使用方式

bind:click="onClick"

mpvue 使用方式

@click="onClick"

1.3 vue 中组件引入

vant中像notify这种操作反馈类的组件都有两个引入，一是组件的引入，这个在main.json中引入；另一个是方法的引入，需要在vue文件中import引入，值得注意的是，这里的引入不能使用绝对路径，可以用类似于这样的相对路径。

import Notify from '@/../static/notify/notify' //@是mpvue的一个别名，指向src目录

1.4 获取 event

值得注意的是，mpvue中获取event值与原生小程序有所不同。举例：

onChange(event){ // 获取表单组件filed的值
  console.log(event.mp.detail) // 注意加入mp
}

2. BUG 及报错处理方法

2.1 监听名

mpvue 里面无法使用@click-icon这样的监听名,因此如果 API 文档里面有出现这样的监听名，那么需要手动修改源代码。

可以改成驼峰式的监听名。

eg: 我在field组件中就遇到这个问题，我的做法是：

// static/vant/field/index.js

this.$emit('click-icon');

// 修改为:

this.$emit('clickIcon');

2.2 报错

一般的报错报错都可以通过一下流程处理。

是否打开了微信开发者工具中的ES6转ES5功能。
仔细检查代码和比对文档，看看是否有使用不当的地方。
重新编译npm run dev或删掉dist目录重新npm run dev
重启或更新微信开发者工具。

若以上流程都走完了，还是无法解决报错，可以通过提交issues的方式，我来帮你解决。

2.2.1 引入组件报错

VM54:1 thirdScriptError sdk uncaught third Error module "static/vant/notify/index.js" is not defined

解决办法是：打开小程序开发者工具中的ES6 转 ES5功能. issues/#5

3. 其他组件库

目前比较好的组件库有三个，Wux Weapp,iview weapp,Vant Weapp。

这三者都是用原生小程序写的组件库，因此理论上来说，在 mpvue 中都是可以无缝使用的。不同组件库的组件都不一样，有的更丰富，有的逻辑更完善，有的文档更清晰。因此用什么组件，还需要自己取舍。

比如：三者中，唯有Wux Weapp有日历组件，而且它里面还有一些更高级的组件可以使用。

使用方法上，几乎没有差异。值得注意的是，大家复制源代码到自己项目上时，应该复制/dist/目录下的文件。因为这里是经过编译后的。

如果大家使用过程中遇到什么 BUG，可以通过提issues的方式让我知道，大家一起踩坑吧！

分享两个小程序

一、猫叫助手

基于 vant 和 wux 组件库,以及小程序云开发开发的一个小程序。以及总结了mpvue中使用云开发的注意事项，mpvue-cloud

收录各种猫叫声，帮助与猫咪交流，分享一些养猫的小知识等。

猫叫助手

二、在书云

这是我近期使用Taro开发框架开发的一款小程序，主要功能是提供可靠的书架管理功能，只需要扫一扫书籍背后的条形码即可添加书籍入库，你可以方便的在线上管理你的书架，查看书籍的基本信息，亦可以添加书评。

该项目获得了微信小程序 U 计划的资助。目前项目正在开发中，欢迎大家体验反馈。

在书云

查看原文

mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑，在这里分享给大家，让mpvue开发者可以使用vant组件库进行开发，避免踩不必要的坑。

八月末评论了文章 · 2018-11-16

Mpvue中使用Vant Weapp组件库

一、介绍

mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑，在这里分享给大家，让mpvue开发者可以使用vant组件库进行开发，避免踩不必要的坑。

此教程是在dov-yih一同协助下完成。经过测试，Vant Weapp下所有组件都能够在mpvue中使用

二、使用方法

目前vant已经支持了npm的方式，但是由于node_modules目录下的代码是不会被编进dist目录下的，所以暂时只能用git方式使用。

克隆vant仓库

将dist目录下的所有文件复制到你项目的/static/vant/目录下。

git clone https://github.com/youzan/vant-weapp.git

// 当然你也可以克隆本仓库代码，本仓库会与`vant`仓库保持同步。直接将`vant`目录复制到`/static`目录下
git clone https://github.com/Rychou/mpvue-vant.git

引入

在需要引入的页面目录下的main.json文件中

{
  "usingComponents": {
    "van-button": "/static/vant/button/index",
  }
}

使用

<van-button>测试</van-button>

三、注意事项

具体组件 api 文档参考Vant Weapp

1. 使用方式

mpvue 和原生小程序的方式有所不同。可以参考mpvue文档

1.1 数据绑定

原生小程序使用方式为

value="{{value}}"

mpvue 使用方式

v-bind:value="value"
//或者
:value="value"

1.2 事件监听

原生小程序使用方式

bind:click="onClick"

mpvue 使用方式

@click="onClick"

1.3 vue 中组件引入

vant中像notify这种操作反馈类的组件都有两个引入，一是组件的引入，这个在main.json中引入；另一个是方法的引入，需要在vue文件中import引入，值得注意的是，这里的引入不能使用绝对路径，可以用类似于这样的相对路径。

import Notify from '@/../static/notify/notify' //@是mpvue的一个别名，指向src目录

1.4 获取 event

值得注意的是，mpvue中获取event值与原生小程序有所不同。举例：

onChange(event){ // 获取表单组件filed的值
  console.log(event.mp.detail) // 注意加入mp
}

2. BUG 及报错处理方法

2.1 监听名

mpvue 里面无法使用@click-icon这样的监听名,因此如果 API 文档里面有出现这样的监听名，那么需要手动修改源代码。

可以改成驼峰式的监听名。

eg: 我在field组件中就遇到这个问题，我的做法是：

// static/vant/field/index.js

this.$emit('click-icon');

// 修改为:

this.$emit('clickIcon');

2.2 报错

一般的报错报错都可以通过一下流程处理。

是否打开了微信开发者工具中的ES6转ES5功能。
仔细检查代码和比对文档，看看是否有使用不当的地方。
重新编译npm run dev或删掉dist目录重新npm run dev
重启或更新微信开发者工具。

若以上流程都走完了，还是无法解决报错，可以通过提交issues的方式，我来帮你解决。

2.2.1 引入组件报错

VM54:1 thirdScriptError sdk uncaught third Error module "static/vant/notify/index.js" is not defined

解决办法是：打开小程序开发者工具中的ES6 转 ES5功能. issues/#5

3. 其他组件库

目前比较好的组件库有三个，Wux Weapp,iview weapp,Vant Weapp。

这三者都是用原生小程序写的组件库，因此理论上来说，在 mpvue 中都是可以无缝使用的。不同组件库的组件都不一样，有的更丰富，有的逻辑更完善，有的文档更清晰。因此用什么组件，还需要自己取舍。

比如：三者中，唯有Wux Weapp有日历组件，而且它里面还有一些更高级的组件可以使用。

使用方法上，几乎没有差异。值得注意的是，大家复制源代码到自己项目上时，应该复制/dist/目录下的文件。因为这里是经过编译后的。

如果大家使用过程中遇到什么 BUG，可以通过提issues的方式让我知道，大家一起踩坑吧！

分享两个小程序

一、猫叫助手

基于 vant 和 wux 组件库,以及小程序云开发开发的一个小程序。以及总结了mpvue中使用云开发的注意事项，mpvue-cloud

收录各种猫叫声，帮助与猫咪交流，分享一些养猫的小知识等。

猫叫助手

二、在书云

这是我近期使用Taro开发框架开发的一款小程序，主要功能是提供可靠的书架管理功能，只需要扫一扫书籍背后的条形码即可添加书籍入库，你可以方便的在线上管理你的书架，查看书籍的基本信息，亦可以添加书评。

该项目获得了微信小程序 U 计划的资助。目前项目正在开发中，欢迎大家体验反馈。

在书云

查看原文

mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑，在这里分享给大家，让mpvue开发者可以使用vant组件库进行开发，避免踩不必要的坑。

八月末收藏了文章 · 2018-10-22

webpack-demos：全网最贴心webpack系列教程和配套代码

欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前端）、知识整理（每周零碎），欢迎长期关注！

八月末赞了文章 · 2018-10-22

webpack-demos：全网最贴心webpack系列教程和配套代码

欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前端）、知识整理（每周零碎），欢迎长期关注！

赞 89 收藏 69 评论 7

八月末赞了头条 · 2018-07-17

点击阅读全文

赞 31 收藏 152 评论 12

八月末回答了问题 · 2018-07-11

小程序wepy框架数据初始化会有缓存的问题？

同问，最近也发现这个问题，不在onload重新初始化数据。有别的解决方法嘛？

关注 2 回答 1

社区属性

高分内容

个人动态

前言

思路

CSS实现

结构

hover小交互体验

active尝试

focus体验

checked

一些不足

一、介绍

二、使用方法

克隆vant仓库

引入

使用

三、注意事项

1. 使用方式

1.1 数据绑定

1.2 事件监听

1.3 vue 中组件引入

1.4 获取 event

2. BUG 及报错处理方法

2.1 监听名

2.2 报错

2.2.1 引入组件报错

3. 其他组件库

分享两个小程序

一、猫叫助手

二、在书云

一、介绍

二、使用方法

克隆vant仓库

引入

使用

三、注意事项

1. 使用方式

1.1 数据绑定

1.2 事件监听

1.3 vue 中组件引入

1.4 获取 event

2. BUG 及报错处理方法

2.1 监听名

2.2 报错

2.2.1 引入组件报错

3. 其他组件库

分享两个小程序

一、猫叫助手

二、在书云

一、介绍

二、使用方法

克隆vant仓库

引入

使用

三、注意事项

1. 使用方式

1.1 数据绑定

1.2 事件监听

1.3 vue 中组件引入

1.4 获取 event

2. BUG 及报错处理方法

2.1 监听名

2.2 报错

2.2.1 引入组件报错

3. 其他组件库

分享两个小程序

一、猫叫助手

二、在书云

一、介绍

二、使用方法

克隆vant仓库

引入

使用

三、注意事项

1. 使用方式

1.1 数据绑定

1.2 事件监听

1.3 vue 中组件引入

1.4 获取 event

擅长技能
编辑

开源项目 & 著作
编辑