微信打車小程序源碼開發(fā)

功能四: 滴滴等待進(jìn)度

怎樣去做這個(gè)頁面呢，或于你以后也需要計(jì)時(shí)器(不是倒計(jì)時(shí))或者進(jìn)度條，可以參考這里。
圓形進(jìn)度條有很多實(shí)現(xiàn)的方法，但我覺得canvas還是挺方便的。兩個(gè)canvas搞定

 <canvas class="progress_bg"   canvas-id="canvasProgressbg">  </canvas> //畫底色
 <canvas class="progress_canvas"  canvas-id="canvasProgress">  </canvas> //畫進(jìn)度條，傳遞一個(gè)step參數(shù)，用定時(shí)器去繪制

第三坑：繪制canvas沒有問題，文檔也給的十分的詳細(xì)，但是里面那個(gè)計(jì)時(shí)器怎么制作呢？我只需要分秒，而卻又不是倒計(jì)時(shí)，并且還要跟外面保持一致。前端這么心酸的嗎？啊，硬著頭皮去寫吧。搜索了下資源發(fā)現(xiàn)網(wǎng)上這方面的資料真的少。沒有辦法，bug還是要解決的。你是否也遇到過這樣的問題，或于以后呢！記得回來找我...

parseTime: function(time){  // 這里參考了每個(gè)小程序項(xiàng)目中自帶的utils下的util.js，大牛寫的就是簡(jiǎn)潔明了
  var time = time.toString();
    return time[1]?time:'0'+time;  //自動(dòng)歸零補(bǔ)零
},
countInterval: function () {
 var curr = 0;
 this.setData({
     time: this.parseTime(timer.getMinutes())+":"+this.parseTime(timer.getSeconds()), //格式化下時(shí)間，取分秒
          });
      timer.setMinutes(curr/60); //秒針60了自動(dòng)加1
        timer.setSeconds(curr%60); //60后歸零
        curr++;
}

對(duì)于同步，那肯定很簡(jiǎn)單呀，放在一個(gè)定時(shí)器里就夠了。

功能五: 滴滴取消行程

有打車就應(yīng)該有取消對(duì)吧，一看取消行程頁面就有點(diǎn)端倪。這些樣式需要自己去寫嗎？要學(xué)會(huì)說no，這里就以這個(gè)為例子，講下我在小程序開始中如何使用weui快速去搭建一個(gè)頁面效果。

這里給一些我覺得還行的資料：在小程序中可以直接使用的例子 weui小程序官方文檔，
要注明的一點(diǎn)，引用weui要在相應(yīng)的文件夾里或全局的wxss引用它的css,可能多個(gè)頁面都需要用到，這里在全局引用

@import 'styles/weui.wxss';

在app.wxss中引用這段代碼就可以開始你的weui之旅了，比較啰嗦的貼了這么長(zhǎng)的一段代碼。暗示你要用weui去快速開發(fā)你的小程序了!

 <view class="weui-cells weui-cells_after-title">  //使用weui可以直接復(fù)制套上去用就好了
           <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 "> //點(diǎn)擊是顯示紅色的√
                       <image src="../../assets/images/checked.png"></image> 
                   </view>
                   <view wx:if="{{!item.checked}}" class="checked "> //不點(diǎn)擊是顯示空?qǐng)A
                       <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>點(diǎn)擊查看更多原因</text>
               </view>
               
           </view>
       </view>

采坑經(jīng)歷：點(diǎn)擊轉(zhuǎn)態(tài)如何解決呢？一開始我是這樣想的，用一個(gè)icon通過改變它的checked事件去呈現(xiàn)不同的轉(zhuǎn)態(tài)。這樣是可以實(shí)現(xiàn)的，但是只能點(diǎn)擊一個(gè)，不能多選。痛苦?。?！
一上午輾轉(zhuǎn)反側(cè)，較勁腦汁。反復(fù)的去看文檔，終于豁然開朗起來，可以用多重循環(huán)去判斷checked。哎，js還是超級(jí)重要啊。話不多說

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;
     }
   }
 }

以后我們的頁面或多或少可能需要點(diǎn)擊選擇功能，其實(shí)原理都差不多，這點(diǎn)你得到了嗎，以后再做這方面的功能時(shí)就能用上了。總感覺還有什么沒寫完一樣：好吧?。?/p>

在做點(diǎn)擊加載更多的，我是這樣打理的。wx:for一個(gè)數(shù)組然后去截取他的下邊顯示。點(diǎn)擊加載更多時(shí)全部for這個(gè)數(shù)組。然后在用定時(shí)器設(shè)置wx.showLoading()顯示加載更多效果，就有了那種既視感

功能五: 滴滴司機(jī)評(píng)分

享受了一下滴滴帶來的快捷與方便，感嘆技術(shù)的改變生活啊。同樣評(píng)分也是app得到用戶最終反饋的直接來源，因此我們也不容錯(cuò)過這么重要的一點(diǎn)，但是打理的細(xì)節(jié)也是十分的坑啊。

如何去寫一個(gè)評(píng)分呢，點(diǎn)擊小星星去改變它的轉(zhuǎn)態(tài)，還要根據(jù)第幾顆星來判斷前面的也要點(diǎn)亮。真的挺頭痛的，網(wǎng)上不乏小程序評(píng)分功能實(shí)現(xiàn)，但大多數(shù)都寫的不是復(fù)雜就是很深?yuàn)W，對(duì)于一個(gè)小生來講，簡(jiǎn)直就是天書呀。就跟老大說的一樣，很多東西都是靠細(xì)節(jié)去成長(zhǎng)的，想想覺得很容易實(shí)現(xiàn)，不就一個(gè)status改變一下圖片嗎？但是打理起來真的見功夫。費(fèi)盡心思去尋找一種簡(jiǎn)單粗暴的又可以達(dá)到這種效果的方式。

 <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>

不用圖片，用字體去解決這個(gè)問題就方便多了，只要改變顏色就達(dá)到了評(píng)分效果。而且代碼量非常的少，不知道這樣會(huì)不會(huì)被打死。

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

最后一點(diǎn)

把這個(gè)放在最后來講，肯定是特別重要的知識(shí)點(diǎn)，對(duì)于開發(fā)的你來說這個(gè)比上面功能的描述更有幫助，或于你已經(jīng)知道并且處理的更好，這里只為了幫助那些跟我一樣入門不久的小生盡量少走點(diǎn)歪路吧。

1、 數(shù)據(jù)請(qǐng)求的封裝是搭建一個(gè)良好程序的前提。在小程序中我們無時(shí)無刻不需要去請(qǐng)求數(shù)據(jù)。到處充斥做異步請(qǐng)求，讓我們處理起來很頭疼。這一點(diǎn)更需要發(fā)時(shí)間去打理的，隨著es6慢慢的普及我們也應(yīng)該把這些好的東西用到我們的代碼中promise,把異步編程同步。把我的封裝的貼出來，大家以后可以直接拷過去使用了

let util = {
   request(opt){
       // 生成對(duì)象 結(jié)構(gòu)
       let options = Object.assign({},,opt); //es6的賦值
       let {url,data,} = options //es6的結(jié)構(gòu)從options結(jié)構(gòu)出我們需要的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({})去網(wǎng)上請(qǐng)求我們的數(shù)據(jù)的數(shù)據(jù)了。
              

2、還有一些就是包的管理，比如把我們頁面中可能一樣的東西抽出來創(chuàng)建一個(gè)template文件夾，把一些一樣的wxss也可以抽出來新建一個(gè)styles，在需要使用到的地方就@import就可以了，比如滴滴的按鈕吧，其實(shí)都一樣，還有頁面底部的橫條都可以封裝起來，用的時(shí)候直接導(dǎo)入就行了。