类似于滴水出租车小程序系统开发案例

类似于DDT出租车小程序系统开发案例本文将详细介绍微信小程序的主要功能，以及相应的数据接口和所使用的组件/API技术。

功能一：滴滴首页

功能描述：创建顶部导航，点击相应的导航页面显示不同的内容，点击后，可以判断下一个导航是自动向前还是向后扫描，动画过度。输入起始位置以模拟等待时间。实施原则：

模拟等待时间加载效果，使用组件化概念创建模板文件夹

它可以直接用于需要使用加载效果的地方，

//通过设置isLoading的布尔值来确定是否需要显示头部导航并单击以确定滑出的方向并自动滑出，我们可以通过scroll-left='{{navScrollLeft}}来设置它。 '属性，单击导航，我们可以动态更改此值以实现此效果。 {{navItem.name}}

如何改变此navScrollLeft的值？我想要做的第一件事是设置导航导航的左侧，然后在超出导航时隐藏它。坑，它根本无法实现。无法判断左侧是否滑出或再次滑出，然后我想设置一个阈值。这真的很难写。似乎放弃，或坚持，所以我想分开他们写他们的js

switchNav（e）{var cur=e.currentTarget.dataset.current; var singleNavWidth=this.data.windowWindth/4; //获取屏幕宽度并放置四个导航，this.setData（{navScrollLeft:（cur - 1）* singleNavWidth，//单击以减小每个导航器的值currentTab: cur，}）switchTab（e）{var cur=event.detail.current; var singleNavWidth=55; //设置每个导航的宽度this.setData（{currentTab: cur，navScrollLeft:（cur - 1）* singleNavWidth //也动态更改此值}）; }，

我第一次处理了这个小程序的顶级导航效果，但带有一点特殊效果。如果你以后遇到过，你可以回来学习它。避免像我一样，在这里浪费了大量的时间和精力。我们必须完成在有效时间内创造更多价值的过程.

功能二: 起始位置的选择

为了达到这个效果，重复读取n次文件真的有点无聊。关于地图的这个方面，微信小程序api真的不是很详细。可能是我那种对地图处理自然感到困惑的人。这里将详细列出我遇到的问题，希望以后也可以帮助你处理地图，不要踩到坑。

这里用关键字搜索，反向地址解析，地址解析，切换城市列表，建议这样做才能了解腾讯地图api，这样比较方便

Var QQMapWX=require（'././libs/qqmap-wx-jssdk.js'）; //导入你需要使用的包，创建一个libs文件夹var qqmapsdk; qqmapsdk=new QQMapWX（{key:' DHNBZ -2ZLKK-T7IJJ-AXSQW-WX5L6-A6xxxx'//应用您自己的开发人员密钥}）; qqmapsdk.reverseGeocoder（{//反向地址解析api，您可以根据您的纬度和经度位置解析位置地址: {纬度:纬度，经度:经度，}，成功:函数（res）{conslog.log（res）}

第一个坑：如何获得经纬度，移动标记？写多少天，对于大奶牛来说，可能是几分钟，对于刚刚入门的新生，难度相当大。经过长时间的沉思，我突然发现了this.mapCtx.getCenterLocation，移动地图事件以获取地图中心的经度和纬度。然后我们可以在地图中心修复控件，移动地图以解析他的坐标位置，并将数据绑定到下面的显示，以便实现。 emmm代码如下

Bindregionchange: function（e）{//移动地图事件var=this this.mapCtx.getCenterLocation（{//getCenterLocation可以获取地图成功点:函数（res）{app.globalData的点的纬度和经度。 strLatitude=res.latitude //存储到全局，以便稍后使用app.globalData.strLongitude=res.longitude qqmapsdk.reverseGeocoder计算价格（{location: {latitude: res.latitude，//通过移动地图可以得到相应的中心点纬度和经度: res。经度，}，成功:函数（res）{that.setData（{地址: res.result.address，//获取纬度和经度逆地址分辨率来获取我们的位置信息bluraddress: res.result.formatted_addresses.recommend}）}，}）;

第二个坑：目的地可以调用api来实现搜索提示功能，但是我需要历史存在，并点击我需要跳转到主页的项目来显示，没有经验的页面的历史很较差的。是否？这是我实现它的方式

qqmapsdk.getSuggestion（{/调用api实现关键字搜索提示关键字:值，//传递输入值，这里传递值不是'值'，刚开始睡觉。提示区域:'南昌' ，成功:函数（Res）{let data=res.data that.setData（{address: data，value}）

如果要确定输入框，请使用wx:对于下面的不同阵列，填写第一个坑。然后我会考虑一下。当我们点击搜索时，我们如何将其添加到我们的历史记录中？单击以获取该值的id，然后将其推入历史数组。它是非常好的，并实现了下降的起始位置的选择。当然，这是冰山一角。需要探索其背后的强大功能。

功能三: 滴滴费用计算

古人云：细节决定成败，一个好的微信小程序往往是一些给人留下深刻印象的细节，实际模仿，虽然不是100％，但至少还是非常希望非常相同。

分析和分析，主页点击呼叫快递页面不跳转，而是显示不同的内容。是否可以使用wx:如果如上处理它？确实，您使用重复来托管要显示的内容，因此您无法获得画笔的提示。

计算价格与腾讯地图api相同，以获得两点之间的距离，只需将起点放在globalData中，优点是可以随时获取内部数据

设{endLatitude，endLongitude}=app.globalData //使用ES6的语法获取结构数据qqmapsdk.calculateDistance（{mode:'driving'，to: [{latitude: endLatitude，longitude: endLongitude}]，success:（ res）=＆gt; {var num1=8 + 1.9 *（res.result.elements [0] .distance/1000）var play1=num1.toFixed（1）//取小数点app.globalData.play=play1//还存储在全局，结束付款的订单结束使用this.setData（{play1: play1，}）}，

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。