Vue2.0 仿滴滴出行项目

Vue2.0 仿滴滴出行项目

最近，各大社区出现不少小伙伴的vue项目，趁着这股热潮我也用vue撸了一个滴滴出行的项目。

效果预览

在线预览：demo

项目地址：github

• 主要技术栈

  • vue2.0(数据绑定)

  • vue-router(SPA)

  • vuex(管理组件状态，实现组件通讯）

  • es六、html五、css3

• 组件库

  mint-ui(有一些组件特别好用，方便快速开发)

• 字体库

  vue-awasome(完美支持font-awasome，此外还能够自定义组件)

• css动画库

animate.css

• 高德地图 API

实现的功能

• 登陆/用户本地存储、退出(localStarage本地存储)

• 验证弹窗

• 定位

• 地址输入提示

• 城市选择切换

• 实现出租车下单、呼叫、以及接单(此到处理上利用了假数据)

核心功能组件实现

就我目前实现的功能来看，核心组件有定位组件、地址选择组件、地图组件和打车下单组件

• 定位、选址和地图组件的实现主要是结合了高德地图的开放api来获取数据。高德地图JavaScript API在核心功能以外提供了丰富的控件、服务插件以及工具插件，好比工具条、比例尺、路线规划、高级信息窗体等等，经过AMap.pluging( )能够将对应的功能加载进来，更加详细的用法的能够参考开发平台的api。目前项目中引入了以下三个插件

  <code>['AMap.Geolocation', 'AMap.Autocomplete','AMap.Geocoder']</code>

• 其中打车下单组件目前只是实现了界面，数据方面还未所有实现。楼主将在接下来的版本继续完善。

问题与思考

接下来谈下我在写这个项目当中遇到一些的问题， 给你们分享下。

1 验证码弹窗，输入呼出手机软键盘的问题。

因为我在写验证码弹窗的时候，参考了滴滴自己验证码的弹窗结构，用了4个span来做为验证码输入框。而后，我想了一下大概的思路，能够利用vue的数据绑定和键盘监听事件轻松的搞定验证码输入。但是，后来在手机上发现，输入的时候竟然调不出软键盘，写项目的时候没考虑到设备问题，简直是大大的失误。接着我往输入框中添加了一个input标签，而且设为不可见，而后触发软键盘。本来觉得完美解决，能够发现输入没有出现数字，我仔细一想，vue不是数据绑定吗？怎么没效果，捣鼓半天数据问题，结果，发现居然又是我考虑不周，老想着vue能够数据绑定，没想键盘监听在手机上无效，崩溃，再次败给了本身。忽然想起一句话：代码写很差不是不会写，而是缺少思考。

2 第二个问题是关于打车通知司机进度条的动画效果

这个动画实际上就两部分，一个是圆环进度条，第二个是倒计时那个圆形绕着圆环进度条运动。
关于实现圆环进度条我推荐这篇文章纯svg实现进度条,文章有个具体的实现方案，相关的属性的详细介绍须要自行百度。关于绕圆环运动的写法和思路百度上介绍了不少种，什么运动计算还把相应的js都写出来，后来仔细想一想仍是用css的rotate简单的处理了，不是我不喜欢思考，只是我认为能用简单代码实现的功能就不去搞让人难懂的代码了。

3 第三个问题是关于数据请求是否都须要提交action

一开始我并无注意这个问题，由于官方文档上边建议将异步的方法操做都放到action里边，因此我基本上造成了每一次异步请求都提交一个action的惯性思惟， 前几天在看"滴滴 webapp 5.0 Vue 2.0 重构经验分享"(有兴趣写滴滴的朋友推荐先看下这篇文章)发现文中有拿输入补全suggest组件举例说明(由于我写的项目中也要用到地址搜索补全组件,因此特别看了一下)：请求不会修改store里的数据,能够组件内部消化。也就是说能够在组件内部进行请求，不须要提交action。

其实我对vuex中为何把异步操做封装在action，把同步操做放在mutations的缘由很好奇，因而，在知乎上搜了一下其中的缘由(文中尤雨溪给这个问题做出了回答)

结语

此项目我将一直在GitHub上进行更新，欢迎有兴趣的小伙伴一块儿学习，也欢迎各位大牛指出项目的缺点与不足。

最后插播一个小广告：大四应届生，求职中，但愿各位大佬给个机会。这是个人简历