说说我眼中的Vue和React

前序

我最早接触的是reactjs,时间是在2016年,当时主要从官网学习,并且写了一些笔记。坦白讲,当时学习了一段时间,只是对里面的概念有点印象而已。也搞不懂怎么去具体的使用在项目里面,里面的思想也仅仅停留在字面上。学了一段时间以后就放下了,就这样过了1年的时间。17年的6月,换了一份工作,直接上来就使用vue全家桶开发一个管理系统,时间一个月的时间,当时有人带,结合官方的文档进行开发。但是这个过程仍然觉得有点痛苦,就这样一个月的时间,总算是熬过来了。就这样让我第一次完整的接触了Vue,给我印象最深的是:中文的官网,简单的入门示例。通过这一个月的时间,让我终于对数据驱动视图,对从dom的繁琐操作释放出来是畅快感有了很真实的体验,感谢当初带我入门的磊哥。

继续阅读“说说我眼中的Vue和React”

vue实现类似添加购物车抛物线效果(类似饿了么,京东到家)

使用vue的transition来实现添加购物车的特效,效果如下:

为什么使用嵌套了的div来表示小球?

首先这是模拟了一个抛物线的效果,先普及一个基本知识,抛物线运动:分为水平的匀速运动和竖直向的自由落体(加速)。这里实现的思路是一个小球需要做2种运动,那么可以让这个小球做竖直向的加速运动,把这个小球放到一个盒子里面,让这个盒子做水平向的匀速运动。这样就完成模拟了一个抛物线运动,具体方法是在css里面分别设置transition,通过贝塞尔transition来模拟加速运动。

图示如下:

为什么使用了一个balls数组,而且存放5个元素

首先由于添加的过程,点击添加按钮可能比较连续,这样要模拟多个小球进入购物车的情况,所以需要预先准备几个box元素。为什么是5个?小球可以重复使用,根据网上的经验这里使用了5个,当然完全可以设置为7个8个。

 

具体代码见:https://github.com/rt-zhangxuefei/vue-add2cart-animation

vue单页hash模式在微信公众号分享链接,微信支付问题

在微信公众号中,如果使用vue开发单页应用,对接了微信授权等,那么分享(朋友圈等)需要满足常规以下条件

1. url必须为当前域名

2. 需要重定向到授权链接再跳转回来(带上用户信息)

 

遇到的问题是微信分享的时候,url会给你改变(例如http://a.com/#/index 变成http://a.com/?fromsingle#/index),我的处理办法是:

在main.js里面:

然后再window.location.href=拼成微信的授权链接

 

调起微信支付需要配置授权链接,单页应用hash模式下,Android和IPhone微信处理方式不一样,Android要正常点,IPhone常常会提示url未授权。因为两者默认的当前url地址不一样,比如我们支付页面的地址为a.com/wx/#/pay,我们也在微信授权配置这个地址,Android可以正常支付。在IPhone下,如果你是从其他页面进入的这个支付页面,比如从a.com/wx/#/index进入的,那么此时IPhone会把第一次进入的地址提交到微信进行支付,由于这个地址没有配置授权,所以提示未授权。

 

怎么处理这个问题呢?怎么只配置一个授权地址就满足所有页面的支付呢?

1. 前端地址使用a.com/wx/?#/path (就是这个问号?的作用)

2. 微信授权地址配置为a.com/wx/

 

当然有可能你要问如果没有wx这个路径呢?nginx配置location就行了

webpack引入webview注入的js对象问题

在webpack里面引入第三方的js有这几种情况

1.在index.html里面引入script标签的方式

2.混合模式下需要引入webview里面注入的js对象

针对这两种情况都可以使用webpack的配置:

externals:{
  Avatar:'Avatar',// script标签方式
  nativeAPI:'window.App5' // webview里面注入的,这里window一定要加上
}

 

vue中的动画及钩子初步探究

transition组件里面发生过渡或动画效果的条件:

  • 条件渲染 (使用 v-if
  • 条件展示 (使用 v-show
  • 动态组件
  • 组件根节点

满足以上任何一个条件即可

在被transition包裹的组件中,通常会使用v-if或v-show。在这个基础上来理解类的作用

v-enter:进入初始的状态,设置初始的样式

v-enter-to:进入以后(一般就是显示出来了)

v-enter-active:描述整个进入过程,所以过渡和动画设置在这个类中

v-leave:离开的初始状态

v-leave-to:已离开

v-leave-active:离开过程

一定是站在组件的角度来考虑当前组件是离开还是进入

 

动画钩子(一些事件)

动画或过度的每个阶段触发的事件,作用和类名差不多,下面看一个例子,效果如下:

继续阅读“vue中的动画及钩子初步探究”

基于vue的地址级联组件(包含最新全国省市区2016-07-31基础数据)

最近有用到地址级联,使用vue开发很容易写成一个组件,分享出来(已经包含了全国省市区基础数据),目前生产json数据是最新的http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201703/t20170310_1471429.html

如果后面我没有及时更新,程序里面有个genData.js的node程序,用来生产json格式,只需要在上面的网站复制最新的数据到data.txt里面,启动node程序会自动生成。

github地址:https://github.com/rt-zhangxuefei/vue-address-cascader 点击阅读查看演示效果哦

继续阅读“基于vue的地址级联组件(包含最新全国省市区2016-07-31基础数据)”

vue2-slider(基于vue2.x的移动端焦点图组件)

焦点图或者说轮播图是非常常用的一个组件,自己也用过像swiper这样的插件,其实在H5里面使用的功能都是非常基本的,所以还是打算自己写一个最小化功能的焦点图组件。使用了vue2.0框架,功能包含:自动轮播,滑动,无限循环,点击跳转页面。源码地址:https://github.com/rt-zhangxuefei/vue2-slider

这也是我自己第一次发布到github上

其中遇到了父级添加了touchstart并且需要阻止默认时间,此时子元素里面的a标签不会触发。查阅很多,最终的处理方式是模拟去出发a标签的click事件,因为href是click点击触发跳转

自己动手开发UI组件库(VanUI)

为了初步统一H5项目里面的UI样式,也为了提升团队的开发效率,自己向优秀的UI开源项目学习,结合实际情况,模仿开发了这套UI样式库。这个项目本身来讲没什么太深的技术,但是对于我个人来说确实一个新的起点,使用了很多开源框架和组件,随着不断学习深入,也应该朝着独立开发UI组件的方向继续前行。通过对WeUI(微信团队开源的样式库)的学习模仿修改,形成了现在的VanUI。确实学习WeUI对我帮助很大,基于npm来构建项目,使用less来高效开发css,通过合理目录划分来方便团队协同开发。总之收益匪浅,VanUI遵循MIT协议。 继续阅读“自己动手开发UI组件库(VanUI)”