最近时常感叹道:时间总是那么的快,转瞬即逝。对于像我这种刚入门的小生来讲,技术每天都在更新,框架也层出不穷,有时候还没弄懂这个知识大牛们又推出了更好的技术。当然学习好的技术也是十分重要的。但是在学习之后怎样才能够得到自己想要的呢,一个好的建议便是静下心来写点自己的东西,哪怕你完成不了也应该尽力去写,老大曾讲过要去实践要去独立思考,你才能掌握很多你看似懂了却又很难处理的知识点。学习小程序的我已经过去了半个月了,前不久滴滴事件颇为轰动,于是便萌发了这篇文章,打开滴滴的小程序。界面做了很大的变化,对于比较怀旧的我来说,还是挺喜欢以前的界面,于是决定打算自己手写一个怀旧版滴滴小程序,接下来我会列举我所遇到的坑和如何解决的方法,希望能够帮到同样在奋斗的你... 前言工欲善其事必先利其器,对于一个前端来说有一个好的工具能够让我们事半功倍。要想做好一个小程序我们首先也应该先选择我们的兵器。
数据接口 效果图
说了一大堆,等于没说,还是回到正题,先来一波效果图。
功能实现详解接下来我会对滴滴微信小程序主要功能,以及对应的数据接口和采用的组件/API技术,描述的详细。让我们离小程序更近一点,传递知识,分享收获 功能一:滴滴首页
<template name="sprinner"> <block wx:if="{{isLoading}}"> <view class="spinner"> <view class="bounce1"></view> <view class="bounce2"></view> <view class="bounce3"></view> </view> </block> </template> 在需要用到加载效果的地方就可以直接使用, <import src="/templates/sprinner.wxml" /> <template is="sprinner" data='{{isLoading}}'> </template> //通过去设置isLoading的布尔值来判断是否需要显示
<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}"> <block wx:for="{{navData}}" wx:for-index="id" wx:for-item="navItem" wx:key="index"> <view class="nav-item {{currentTab == id ?'active':''}}" data-name="{{navItem.name}}" data-current="{{id}}" bindtap="switchNav">{{navItem.name}}</view> </block> </scroll-view> 怎样去改变这个navScrollLeft的值呢?一开始想的是去设置一下nav的导航的left,然后超出则隐藏。坑啊,根本就实现不了。无法判断左滑出还是又滑出,后来又想到设置一个阈值。累真的难写。好像放弃啊,还是坚持下吧,于是想到分开来取写他们的js switchNav(e){ var cur = e.currentTarget.dataset.current; var singleNavWidth = this.data.windowWindth/4; //获取屏幕宽度存放放四个nav, this.setData({ navScrollLeft: (cur - 1) * singleNavWidth, //点击去减少每一个nav的值 currentTab: cur, }) switchTab(e){ var cur = event.detail.current; var singleNavWidth =55; //设置每一个nav的宽度 this.setData({ currentTab: cur, navScrollLeft: (cur - 1) * singleNavWidth //同样动态的去改变这个值 }); }, 第一次打理这种顶部导航效果的小程序,而却还带一点特效的。以后的你如果碰到了就可以回来借鉴借鉴,避免跟我一样,在这里浪费大量的时间和精力了。我们可是要完成有效时间创建更大价值的程序猿呀... 功能二: 起始位置的选择为了做这个效果,反反复复的看了n遍文档,真的是比较坑爹。微信小程序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,可以根据你的经纬度去解析位置地址 location: { latitude: latitude, longitude: longitude, }, success: function (res) { conslog.log(res) } 第一个坑:如何去获取经纬度呢,移动markes?,天呐这要写多少,对于大牛们来说可能分分分钟,对于刚入门的小生来说难度还是挺大大。沉思良久,突然发现 this.mapCtx.getCenterLocation,移动地图事件获取地图中心的经纬度。那么我们可以去固定一个 controls在地图中心,去移动地图来解析他的坐标位置,将数据绑定在下面显示出来,于是就实现了。emmm代码如下 bindregionchange: function(e){ //移动地图事件 var that = this this.mapCtx.getCenterLocation({ //getCenterLocation可以获取地图中点的经纬度 success: function (res) { app.globalData.strLatitude=res.latitude //存放到全局去,供后面计算价格使用 app.globalData.strLongitude= res.longitude qqmapsdk.reverseGeocoder({ location: { latitude: res.latitude, //通过移动地图可以得到相应中心点的经纬度 longitude: res.longitude, }, success: function (res) { that.setData({ address: res.result.address, //得到的经纬度逆地址解析得到我们的位置信息 bluraddress: res.result.formatted_addresses.recommend }) }, }); 第二个坑: 目的地调用api一样可以实现搜索提示功能,但我需要历史记录也存在,并且点击某一项我需要跳转到首页显示出来,没有历史的页面体验感极差。是否?这里我是这样实现的 qqmapsdk.getSuggestion({ //调用api实现关键词搜索提示 keyword: value, //传递input的值,这里要传value不是'value',刚开始犯困。提示一下 region: '南昌', success: function(res){ let data = res.data that.setData({ address: data, value }) <view wx:if="{{!value==''}}" class="destination" wx:for="{{address}}" data-destination="{{item.title}}" data-end="{{item.address}}" bindtap="toIndex" wx:key="{{item.id}}"> <view wx:if="{{value==''}}" class="destination" wx:for="{{ entity}}" data-destination="{{item.title}}" data-end="{{item.address}}" bindtap="toIndex" wx:key="{{item.id}}"> 通过wx:if去判断输入框。下面for不同的数组,填了第一小坑坑。接下来就会去思考,当我们点击搜索的怎么把它加入到我们的历史中呢?点击获取那个值的id然后push到历史数组中去,是不是很nice,实现了滴滴起始位置的选择,当然我们这这是冰山一角,强大的背后还需要去探索。 功能三: 滴滴费用计算古人云:细节决定成败,一个良好的微信小程序往往就是一些细节打动人心,居然是模仿,虽做不到百分百,至少还是很希望一模一样。
<repeat wx:if="{{callCart}}"> <repeat wx:else> 计算价钱一样用到了腾讯地图api获取两点之间的距离,刚才把起始点都存放在globalData里,这样的好处是,可以随时得到里面的数据 let {endLatitude,endLongitude} = app.globalData //使用ES6的语法去结构数据 qqmapsdk.calculateDistance({ mode: 'driving', to:[ { latitude: endLatitude, longitude:endLongitude }], success: (res)=> { var num1 = 8+1.9*(res.result.elements[0].distance/1000) var play1 = num1.toFixed(1) //取一位小数点 app.globalData.play= play1 //同样存放在全局里,后面订单结束支付要用上 this.setData({ play1:play1, }) }, 对于点击显示的转态这里就不详细描述,本文只针对一些不容易处理的问题。后面司机服务页面路线规划也是通过调用api,计算两点的经纬度去标点,连线。这里也就省略下,详细的可以参考我的代码。 |