八月末

八月末 查看完整档案

上海编辑井冈山大学  |  机电 编辑上海易也网络科技有限公司  |  前端 编辑 segmentfault.com/u/bayuemo 编辑
编辑

my heart will go on

个人动态

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

code秘密花园

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

关注 5211

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

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

前言

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

button

这是谷歌Material Design中最常见的特效了,市面上也有很多现成的js库,用来模拟这一特效。但是往往要引入一大堆jscss,其实在已有的项目中,可能只是想加一个这样的按钮,来增强用户体验,这些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;
}

这个应该很好理解吧。

那么,重点来了,现在把动画ripple1ripple2里面的动画过程都改成一样,也是可以分别触发的,也就是说,只要动画名称不一样,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

查看原文

查看原文

八月末 评论了文章 · 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 计划的资助。目前项目正在开发中,欢迎大家体验反馈。

在书云

查看原文

八月末 评论了文章 · 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 计划的资助。目前项目正在开发中,欢迎大家体验反馈。

在书云

查看原文

八月末 评论了文章 · 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 计划的资助。目前项目正在开发中,欢迎大家体验反馈。

在书云

查看原文

八月末 评论了文章 · 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 计划的资助。目前项目正在开发中,欢迎大家体验反馈。

在书云

查看原文

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

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

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

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

如果您也想进行知识整理 + 搭建功能完善/设计简约/快速启动的个人博客,请直接戳theme-bmw

放在开头

由于完全是博主利用业余时间编写和整理的,所以有些地方难免有失偏颇,还请多多海涵。如果您发现错误,欢迎致信 2181111110@qq.com 或 yuanxin.me@gmail.com ,我一定会在第一时间检查和修复!!!

如果本教程和示例代码对您的工作、学习或者爬坑有帮助,请动动您的小手,给个 Star,让更多的朋友了解并且参与进来,蟹蟹 ٩('ω')و

最后,欢迎转载和引用,但请指明出处(github 仓库或者博客文章地址均可)。这套教程和代码确实花费了博主很多精力和时间!

项目背景

上半年在做 web 项目的时候,在webpack上踩了很多坑。由于使用的是 webpack4,所以网上现成的教程并不多,而且大多数不成体系。还有很多教程,把很多知识点杂糅在一起进行讲解,对于新手来说真的很不友好。

所以我花费了 3 个多月整理了这份教程,一共分成 16 节,每节都有讲解,并且准备了配套代码。应该说很贴心了吧哈哈哈。当然,自己回查也很方便!

本来想着做成掘金小册,或者录个视频赚赚钱。奈何深感水平不够,只有一腔热情,所以直接开放了教程和源码。

项目地址

课程目录

  1. webpack4 系列教程: 前言: https://godbmw.com/passages/2018-07-29-webpack-demos-introduction/
  2. webpack4 系列教程(一): 打包 JS : https://godbmw.com/passages/2018-07-30-webpack-pack-js/
  3. webpack4 系列教程(二): 编译 ES6 : https://godbmw.com/passages/2018-07-31-webpack-compile-es6/
  4. webpack4 系列教程(三): 多页面解决方案--提取公共代码 : https://godbmw.com/passages/2018-08-06-webpack-mutiple-pages/
  5. webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载 : https://godbmw.com/passages/2018-08-08-webpack-spa-split-lazy/
  6. webpack4 系列教程(五): 处理 CSS : https://godbmw.com/passages/2018-08-17-webpack-css/
  7. webpack4 系列教程(六): 处理 SCSS : https://godbmw.com/passages/2018-08-18-webpack-scss/
  8. webpack4 系列教程(七): SCSS 提取和懒加载 : https://godbmw.com/passages/2018-08-28-webpack-scss-lazy/
  9. webpack4 系列教程(八): JS Tree Shaking : https://godbmw.com/passages/2018-09-01-js-tree-shaking/
  10. webpack4 系列教程(九): CSS Tree Shaking : https://godbmw.com/passages/2018-09-02-css-tree-shaking/
  11. webpack4 系列教程(十): 图片处理汇总 : https://godbmw.com/passages/2018-09-11-webpack-image/
  12. webpack4 系列教程(十一):字体文件处理 : https://godbmw.com/passages/2018-10-09-webpack-chracter-file/
  13. webpack4 系列教程(十二):处理第三方 JavaScript 库 : https://godbmw.com/passages/2018-10-09-webpack-js-pacakge/
  14. webpack4 系列教程(十三):自动生成 HTML 文件 : https://godbmw.com/passages/2018-10-17-automatic-html/
  15. webpack4 系列教程(十四):Clean Plugin and Watch Mode : https://godbmw.com/passages/2018-10-18-webpack-clean-and-watch-mode/
  16. webpack4 系列教程(十五):开发模式与 webpack-dev-server :https://godbmw.com/passages/2018-10-19-webpack-dev-server/
  17. webpack4 系列教程(十六):开发模式和生产模式·实战 : https://godbmw.com/passages/2018-10-19-webpack-dev-and-prod/

代码目录

  1. demo01: 打包JS
  2. demo02: 编译ES6
  3. demo03: 多页面解决方案--提取公共代码
  4. demo04: 单页面解决方案--代码分割和懒加载
  5. demo05: 处理CSS
  6. demo06: 处理Scss
  7. demo07: 提取Scss (CSS等等)
  8. demo08: JS Tree Shaking
  9. demo09: CSS Tree Shaking
  10. demo10: 图片处理--识别, 压缩, Base64编码, 合成雪碧图
  11. demo11: 字体文件处理
  12. demo12: 处理第三方JS
  13. demo13: 生成Html文件
  14. demo14: Watch Mode && Clean Plugin
  15. demo15: 开发模式--webpack-dev-server
  16. demo16: ⭐ 生产模式和开发模式分离 ⭐

关于作者

查看原文

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

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

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

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

如果您也想进行知识整理 + 搭建功能完善/设计简约/快速启动的个人博客,请直接戳theme-bmw

放在开头

由于完全是博主利用业余时间编写和整理的,所以有些地方难免有失偏颇,还请多多海涵。如果您发现错误,欢迎致信 2181111110@qq.com 或 yuanxin.me@gmail.com ,我一定会在第一时间检查和修复!!!

如果本教程和示例代码对您的工作、学习或者爬坑有帮助,请动动您的小手,给个 Star,让更多的朋友了解并且参与进来,蟹蟹 ٩('ω')و

最后,欢迎转载和引用,但请指明出处(github 仓库或者博客文章地址均可)。这套教程和代码确实花费了博主很多精力和时间!

项目背景

上半年在做 web 项目的时候,在webpack上踩了很多坑。由于使用的是 webpack4,所以网上现成的教程并不多,而且大多数不成体系。还有很多教程,把很多知识点杂糅在一起进行讲解,对于新手来说真的很不友好。

所以我花费了 3 个多月整理了这份教程,一共分成 16 节,每节都有讲解,并且准备了配套代码。应该说很贴心了吧哈哈哈。当然,自己回查也很方便!

本来想着做成掘金小册,或者录个视频赚赚钱。奈何深感水平不够,只有一腔热情,所以直接开放了教程和源码。

项目地址

课程目录

  1. webpack4 系列教程: 前言: https://godbmw.com/passages/2018-07-29-webpack-demos-introduction/
  2. webpack4 系列教程(一): 打包 JS : https://godbmw.com/passages/2018-07-30-webpack-pack-js/
  3. webpack4 系列教程(二): 编译 ES6 : https://godbmw.com/passages/2018-07-31-webpack-compile-es6/
  4. webpack4 系列教程(三): 多页面解决方案--提取公共代码 : https://godbmw.com/passages/2018-08-06-webpack-mutiple-pages/
  5. webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载 : https://godbmw.com/passages/2018-08-08-webpack-spa-split-lazy/
  6. webpack4 系列教程(五): 处理 CSS : https://godbmw.com/passages/2018-08-17-webpack-css/
  7. webpack4 系列教程(六): 处理 SCSS : https://godbmw.com/passages/2018-08-18-webpack-scss/
  8. webpack4 系列教程(七): SCSS 提取和懒加载 : https://godbmw.com/passages/2018-08-28-webpack-scss-lazy/
  9. webpack4 系列教程(八): JS Tree Shaking : https://godbmw.com/passages/2018-09-01-js-tree-shaking/
  10. webpack4 系列教程(九): CSS Tree Shaking : https://godbmw.com/passages/2018-09-02-css-tree-shaking/
  11. webpack4 系列教程(十): 图片处理汇总 : https://godbmw.com/passages/2018-09-11-webpack-image/
  12. webpack4 系列教程(十一):字体文件处理 : https://godbmw.com/passages/2018-10-09-webpack-chracter-file/
  13. webpack4 系列教程(十二):处理第三方 JavaScript 库 : https://godbmw.com/passages/2018-10-09-webpack-js-pacakge/
  14. webpack4 系列教程(十三):自动生成 HTML 文件 : https://godbmw.com/passages/2018-10-17-automatic-html/
  15. webpack4 系列教程(十四):Clean Plugin and Watch Mode : https://godbmw.com/passages/2018-10-18-webpack-clean-and-watch-mode/
  16. webpack4 系列教程(十五):开发模式与 webpack-dev-server :https://godbmw.com/passages/2018-10-19-webpack-dev-server/
  17. webpack4 系列教程(十六):开发模式和生产模式·实战 : https://godbmw.com/passages/2018-10-19-webpack-dev-and-prod/

代码目录

  1. demo01: 打包JS
  2. demo02: 编译ES6
  3. demo03: 多页面解决方案--提取公共代码
  4. demo04: 单页面解决方案--代码分割和懒加载
  5. demo05: 处理CSS
  6. demo06: 处理Scss
  7. demo07: 提取Scss (CSS等等)
  8. demo08: JS Tree Shaking
  9. demo09: CSS Tree Shaking
  10. demo10: 图片处理--识别, 压缩, Base64编码, 合成雪碧图
  11. demo11: 字体文件处理
  12. demo12: 处理第三方JS
  13. demo13: 生成Html文件
  14. demo14: Watch Mode && Clean Plugin
  15. demo15: 开发模式--webpack-dev-server
  16. demo16: ⭐ 生产模式和开发模式分离 ⭐

关于作者

查看原文

赞 89 收藏 69 评论 7

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

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

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

关注 2 回答 1

认证与成就

  • 获得 6 次点赞
  • 获得 12 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 11 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-09-03
个人主页被 499 人浏览