Vue2.0 仿滴滴出行项目

ShevaKuilin 发布于2019-08-21 11:44 / 3564人阅读

摘要：仿滴滴出行项目最近，各大社区出现很多小伙伴的项目，趁着这股热潮我也用撸了一个滴滴出行的项目。可是，后来在手机上发现，输入的时候居然调不出软键盘，写项目的时候没考虑到设备问题，简直是大大的失误。也就是说可以在组件内部进行请求，不需要提交。

Vue2.0 仿滴滴出行项目

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

效果预览

在线预览：demo

项目地址：github

主要技术栈

vue2.0(数据绑定)

vue-router(SPA)

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

es6、html5、css3

组件库

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

字体库

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

css动画库

animate.css

高德地图 API

实现的功能

验证弹窗

定位

地址输入提示

城市选择切换

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

核心功能组件实现

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

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

["AMap.Geolocation", "AMap.Autocomplete","AMap.Geocoder"]

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

问题与思考

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

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上进行更新，欢迎有兴趣的小伙伴一起学习，也欢迎各位大牛指出项目的缺点与不足。

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

idc机房托管私有云滴滴出行 vue2.0 cdn java仿淘宝项目出行云计算

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87048.html

Flutter 仿滴滴出行App，android系统开发书籍

摘要：目前本项目仅部分开源已开源内容汉字转拼音库城市列表，索引悬停效果也许是目前最好用的工具类也许是目前最好用的屏幕工具类国际化常用工具类库成都市详细使用请参考仓库说明。成都市存储实体对象示例。成都市北京市详细使用请参考仓库说明。地图：采用高德地图，仅简单完成了部分功能，基础地图，地址检索，逆地理编码。界面：仿...

番茄西红柿 2021-11-25 09:43 评论0 收藏2637
精华阅读第 9 期 |滴滴出行 iOS 客户端架构演进之路

摘要：架构都是演变出来的，没有最好的架构，只有最合适的架构最近，滴滴出行平台产品中心技术负责人李贤辉接受了的采访，阐述了滴滴的客户端架构模式与演变过程。李贤辉也是移动开发精英俱乐部中的一员，所以本期重点推荐了这篇文章。「架构都是演变出来的，没有最好的架构，只有最合适的架构！」最近，滴滴出行平台产品中心 iOS 技术负责人李贤辉接受了 infoQ 的采访，阐述了滴滴的 iOS 客户端架构模式...

Eirunye 2019-06-24 17:49 评论0 收藏0
精华阅读第 9 期 |滴滴出行 iOS 客户端架构演进之路

摘要：架构都是演变出来的，没有最好的架构，只有最合适的架构最近，滴滴出行平台产品中心技术负责人李贤辉接受了的采访，阐述了滴滴的客户端架构模式与演变过程。李贤辉也是移动开发精英俱乐部中的一员，所以本期重点推荐了这篇文章。「架构都是演变出来的，没有最好的架构，只有最合适的架构！」最近，滴滴出行平台产品中心 iOS 技术负责人李贤辉接受了 infoQ 的采访，阐述了滴滴的 iOS 客户端架构模式...

MobService 2019-06-25 15:10 评论0 收藏0
江义旺：滴滴出行安卓端 finalize time out 的解决方案

摘要：此前滴滴出行安卓端曾长期受此的影响，每天有一些用户会因此遇到，经过深度分析，最终找到有效解决方案。方法内尽量减少耗时以及线程同步时间。减少高优先级线程的创建和使用，降低高优先级线程的使用率。出品 | 滴滴技术作者 | 江义旺showImg(https://user-gold-cdn.xitu.io/2019/5/15/16ab95686cf247c1);前言：随着安卓 APP 规模越来越大，...

Betta 2019-05-23 17:33 评论0 收藏0
Vue2.0仿今日头条

摘要：基于仿照今日头条的移动端项目源码地址预览地址前言先占个坑位。项目中还有许多可以完善的地方，不足之处希望小伙伴们可以，我会在这里更新。目前还没有全面地测试该项目，有问题提问，大家一起学习。 toutiao 基于Vue2.0仿照今日头条的移动端项目源码地址：toutiao_Vue2.0 预览地址：toutiao_Vue2.0 前言先占个坑位。之前打算做个东西熟悉vue的使用，由于...

pepperwang 2019-08-20 18:26 评论0 收藏0