说说我眼中的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就行了

vue页面滑动切换效果(slide效果切换)

最近碰到一个需求,单页应用里面页面切换的效果需要做成跟轮播图滑动slide一样,让这个页面在切换时感觉是一个页面。反复琢磨的vue里面的transition,最终将实现的核心代码贴出来。这里实现的是上下切换,左右的效果类似。

核心代码如下(App.vue):

注:这里使用了vue-touch组件来监听swipe事件

最重要的就是transition的样式:

 

 

页面生成图片dom-to-image,html2canvas(dom转图片)

  • 在传统的H5页面,将dom生成对应的图片

使用到两个第三方库:Android下(dom-to-image),IPhone(html2canvas)

使用方法也很简单,先进行dom-to-image转换,失败的情况进行html2canvas转换,转换的base64结果(这是其中一种形式的结果,还可以转换blob等,大家可以查阅官方文档)

  • 在vue里面怎么做?

我尝试在vue的各个事件钩子里面去获取dom然后进行生成图片的操作,但是都有dom丢失和样式不全的情况。即便是在updated里面进行截图。因为我的需求是,进入页面以后就进行生成图片,这样才能保证用户在微信里面打开网页时,可以长按当前页面弹出保存图片的窗口。(原理就是,会生成一张图片覆盖在当前页面,给用户的感觉还是一个页面,长按时实际就是长按在图片上了)

 

最终的办法:setTimeout,等待页面完全渲染结束,再从dom生成png替换

 

  • 如果是在一般浏览器里面打开,要提供下载图片的功能,也很容易:创建一个a标签,download属性,然后click下就行了
  • 跨域问题解决

我处理的办法是把远程图片的url转成base64编码,具体我是通过node做了一个中间层,核心代码(基于axios)如下:

目前H5页面调起app的方式小结

最近遇到需要在H5网页调起app的需求,查阅资料以后,得到如下方式(intent,scheme,iframe,applink),由于我们只考虑Android的,所以这里木有写iphone的。我实践以后发现,只需要两种方式就可以覆盖大部分浏览器。

  • a标签href到scheme
  • window.location.href

 

1.实现的逻辑是这样:

2.测试的浏览器如下

 

认识几个新的长度单位(vh,vw,vmin,vmax)

vh,vw,vmin,vmax这些单位都是viewport下的单位,首先搂一眼兼容性

兼容还不错,忽略operamini,可以放心使用了

vh:1vh相对于viewport的高度的1%,100vh=100%viewport高度,用这个有个很方便的地方,有时我们需要在移动端设置一个div高度(height:100%),着需要额外设置html,body为100%,才能实现效果。 比较繁琐,借用这个单位一步到位(height:100vh)that’s enough!

同理可以使用vw表示viewport宽度的1%

vmin和vmax取viewport宽度和高度中的最小值得1%

小伙伴们,试试吧!

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基础数据)”