微信打车小程序源码开发

功能四: 滴滴等待进度

怎样去做这个页面呢，或于你以后也需要计时器(不是倒计时)或者进度条，可以参考这里。
圆形进度条有很多实现的方法，但我觉得canvas还是挺方便的。两个canvas搞定

 <canvas class="progress_bg"   canvas-id="canvasProgressbg">  </canvas> //画底色
 <canvas class="progress_canvas"  canvas-id="canvasProgress">  </canvas> //画进度条，传递一个step参数，用定时器去绘制

第三坑：绘制canvas没有问题，文档也给的十分的详细，但是里面那个计时器怎么制作呢？我只需要分秒，而却又不是倒计时，并且还要跟外面保持一致。前端这么心酸的吗？啊，硬着头皮去写吧。搜索了下资源发现网上这方面的资料真的少。没有办法，bug还是要解决的。你是否也遇到过这样的问题，或于以后呢！记得回来找我...

parseTime: function(time){  // 这里参考了每个小程序项目中自带的utils下的util.js，大牛写的就是简洁明了
  var time = time.toString();
    return time[1]?time:'0'+time;  //自动归零补零
},
countInterval: function () {
 var curr = 0;
 this.setData({
     time: this.parseTime(timer.getMinutes())+":"+this.parseTime(timer.getSeconds()), //格式化下时间，取分秒
          });
      timer.setMinutes(curr/60); //秒针60了自动加1
        timer.setSeconds(curr%60); //60后归零
        curr++;
}

对于同步，那肯定很简单呀，放在一个定时器里就够了。

功能五: 滴滴取消行程

有打车就应该有取消对吧，一看取消行程页面就有点端倪。这些样式需要自己去写吗？要学会说no，这里就以这个为例子，讲下我在小程序开始中如何使用weui快速去搭建一个页面效果。

这里给一些我觉得还行的资料：在小程序中可以直接使用的例子 weui小程序官方文档，
要注明的一点，引用weui要在相应的文件夹里或全局的wxss引用它的css,可能多个页面都需要用到，这里在全局引用

@import 'styles/weui.wxss';

在app.wxss中引用这段代码就可以开始你的weui之旅了，比较啰嗦的贴了这么长的一段代码。暗示你要用weui去快速开发你的小程序了!

 <view class="weui-cells weui-cells_after-title">  //使用weui可以直接复制套上去用就好了
           <checkbox-group   bindchange="bindReasonChange">
               <label class="weui-cell weui-check__label"  wx:for="{{reasons}}" wx:key="value">
                   <checkbox class="weui-check"  value="{{item.value}}"checked="{{item.checked}}"/>
                   <view class="weui-cell__bd name" >{{item.name}}</view>
                   <view wx:if="{{item.checked}}" class="checked "> //点击是显示红色的√
                       <image src="../../assets/images/checked.png"></image> 
                   </view>
                   <view wx:if="{{!item.checked}}" class="checked "> //不点击是显示空圆
                       <image src="../../assets/images/nochecked.png"></image>
                   </view>
               </label>
           </checkbox-group>
           <view class="weui-cell weui-cell_link {{show==true?hidden:''}}">
               <view class="weui-cell__bd moreReasons"  style="display: {{show==true?'none':''}};"bindtap='moreReasons'>
                   <text>点击查看更多原因</text>
               </view>
               
           </view>
       </view>

采坑经历：点击转态如何解决呢？一开始我是这样想的，用一个icon通过改变它的checked事件去呈现不同的转态。这样是可以实现的，但是只能点击一个，不能多选。痛苦啊！！
一上午辗转反侧，较劲脑汁。反复的去看文档，终于豁然开朗起来，可以用多重循环去判断checked。哎，js还是超级重要啊。话不多说

bindReasonChange(e){
 let reasons = this.data.reasons;
 let strVal = e.detail.value;
 for(var i = 0, lenI = reasons.length; i < lenI; ++i){
   reasons[i].checked = false;
   for(var j = 0, lenJ = strVal.length; j < lenJ; ++j){
     if(reasons[i].value==strVal[j]){
       reasons[i].checked =true;
       break;
     }
   }
 }

以后我们的页面或多或少可能需要点击选择功能，其实原理都差不多，这点你得到了吗，以后再做这方面的功能时就能用上了。总感觉还有什么没写完一样：好吧！！

在做点击加载更多的，我是这样打理的。wx:for一个数组然后去截取他的下边显示。点击加载更多时全部for这个数组。然后在用定时器设置wx.showLoading()显示加载更多效果，就有了那种既视感

功能五: 滴滴司机评分

享受了一下滴滴带来的快捷与方便，感叹技术的改变生活啊。同样评分也是app得到用户最终反馈的直接来源，因此我们也不容错过这么重要的一点，但是打理的细节也是十分的坑啊。

如何去写一个评分呢，点击小星星去改变它的转态，还要根据第几颗星来判断前面的也要点亮。真的挺头痛的，网上不乏小程序评分功能实现，但大多数都写的不是复杂就是很深奥，对于一个小生来讲，简直就是天书呀。就跟老大说的一样，很多东西都是靠细节去成长的，想想觉得很容易实现，不就一个status改变一下图片吗？但是打理起来真的见功夫。费尽心思去寻找一种简单粗暴的又可以达到这种效果的方式。

 <view class="evaluation-stars" bindtap="myStarChoose">
    <block wx:for="{{starMap}}"wx:key="{{index}}">
        <text wx:if="{{star>=index+1}}"  class="stars-solid" data-star="{{index+1}}">★</text>
        <text wx:if="{{star<index+1}}"  class="stars-empty" data-star="{{index+1}}">☆</text>
    </block>
</view>
<text class="zan-c-gray-dark">{{starMap[star-1]}}</text>

不用图片，用字体去解决这个问题就方便多了，只要改变颜色就达到了评分效果。而且代码量非常的少，不知道这样会不会被打死。

 myStarChoose(e) {
      let star = parseInt(e.target.dataset.star) || 0;
      this.setData({
          star //名字一样可以省略
      });
  },

最后一点

把这个放在最后来讲，肯定是特别重要的知识点，对于开发的你来说这个比上面功能的描述更有帮助，或于你已经知道并且处理的更好，这里只为了帮助那些跟我一样入门不久的小生尽量少走点歪路吧。

1、 数据请求的封装是搭建一个良好程序的前提。在小程序中我们无时无刻不需要去请求数据。到处充斥做异步请求，让我们处理起来很头疼。这一点更需要发时间去打理的，随著es6慢慢的普及我们也应该把这些好的东西用到我们的代码中promise,把异步编程同步。把我的封装的贴出来，大家以后可以直接拷过去使用了

let util = {
   request(opt){
       // 生成对象 结构
       let options = Object.assign({},,opt); //es6的赋值
       let {url,data,} = options //es6的结构从options结构出我们需要的url，data
       return new Promise((resolve,reject)=>{
           wx.request({
               url,
               data,
               success(res){
                   resolve(res.data)
               },
               fail(err){
                   reject(err)
               }
           })
       })
   }
}
export default util  //向外输出模板，在外面可以直接使用util.request({})去网上请求我们的数据的数据了。
              

2、还有一些就是包的管理，比如把我们页面中可能一样的东西抽出来创建一个template文件夹，把一些一样的wxss也可以抽出来新建一个styles，在需要使用到的地方就@import就可以了，比如滴滴的按钮吧，其实都一样，还有页面底部的横条都可以封装起来，用的时候直接导入就行了。