滴滴一下，小程序?qū)＼噥?lái)了（下）
功能四: 滴滴等待進(jìn)度
<canvas class="progress_bg" canvas-id="canvasProgressbg"> </canvas> //畫底色 <canvas class="progress_canvas" canvas-id="canvasProgress"> </canvas> //畫進(jìn)度條，傳遞一個(gè)step參數(shù)，用定時(shí)器去繪制 第三坑：繪制canvas沒(méi)有問(wèn)題，文檔也給的十分的詳細(xì)，但是里面那個(gè)計(jì)時(shí)器怎么制作呢？我只需要分秒，而卻又不是倒計(jì)時(shí)，并且還要跟外面保持一致。前端這么心酸的嗎？啊，硬著頭皮去寫吧。搜索了下資源發(fā)現(xiàn)網(wǎng)上這方面的資料真的少。沒(méi)有辦法，bug還是要解決的。你是否也遇到過(guò)這樣的問(wèn)題，或于以后呢！記得回來(lái)找我...
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í)器里就夠了。點(diǎn)這里查看源碼 功能五: 滴滴取消行程有打車就應(yīng)該有取消對(duì)吧，一看取消行程頁(yè)面就有點(diǎn)端倪。這些樣式需要自己去寫嗎？要學(xué)會(huì)說(shuō)no，這里就以這個(gè)為例子，講下我在小程序開(kāi)始中如何使用weui快速去搭建一個(gè)頁(yè)面效果。
這里給一些我覺(jué)得還行的資料：在小程序中可以直接使用的例子 weui小程序官方文檔， @import 'styles/weui.wxss'; 在app.wxss中引用這段代碼就可以開(kāi)始你的weui之旅了，比較啰嗦的貼了這么長(zhǎng)的一段代碼。暗示你要用weui去快速開(kāi)發(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)如何解決呢？一開(kāi)始我是這樣想的，用一個(gè)icon通過(guò)改變它的checked事件去呈現(xiàn)不同的轉(zhuǎn)態(tài)。這樣是可以實(shí)現(xiàn)的，但是只能點(diǎn)擊一個(gè)，不能多選。痛苦?。?！
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;
}
}
}
以后我們的頁(yè)面或多或少可能需要點(diǎn)擊選擇功能，其實(shí)原理都差不多，這點(diǎn)你得到了嗎，以后再做這方面的功能時(shí)就能用上了?？偢杏X(jué)還有什么沒(méi)寫完一樣：好吧??！ 在做點(diǎn)擊加載更多的，我是這樣打理的。wx:for一個(gè)數(shù)組然后去截取他的下邊顯示。點(diǎn)擊加載更多時(shí)全部for這個(gè)數(shù)組。然后在用定時(shí)器設(shè)置wx.showLoading()顯示加載更多效果，就有了那種既視感 功能五: 滴滴司機(jī)評(píng)分享受了一下滴滴帶來(lái)的快捷與方便，感嘆技術(shù)的改變生活啊。同樣評(píng)分也是app得到用戶最終反饋的直接來(lái)源，因此我們也不容錯(cuò)過(guò)這么重要的一點(diǎn)，但是打理的細(xì)節(jié)也是十分的坑啊。
<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è)問(wèn)題就方便多了，只要改變顏色就達(dá)到了評(píng)分效果。而且代碼量非常的少，不知道這樣會(huì)不會(huì)被打死。
myStarChoose(e) {
let star = parseInt(e.target.dataset.star) || 0;
this.setData({
star //名字一樣可以省略
});
},
最后一點(diǎn)把這個(gè)放在最后來(lái)講，肯定是特別重要的知識(shí)點(diǎn)，對(duì)于開(kāi)發(fā)的你來(lái)說(shuō)這個(gè)比上面功能的描述更有幫助，或于你已經(jīng)知道并且處理的更好，這里只為了幫助那些跟我一樣入門不久的小生盡量少走點(diǎn)歪路吧。 1、 數(shù)據(jù)請(qǐng)求的封裝是搭建一個(gè)良好程序的前提。在小程序中我們無(wú)時(shí)無(wú)刻不需要去請(qǐng)求數(shù)據(jù)。到處充斥做異步請(qǐng)求，讓我們處理起來(lái)很頭疼。這一點(diǎn)更需要發(fā)時(shí)間去打理的，隨著es6慢慢的普及我們也應(yīng)該把這些好的東西用到我們的代碼中promise,把異步編程同步。推薦廖雪峰老師的文章，把我的封裝的貼出來(lái)，大家以后可以直接拷過(guò)去使用了
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、還有一些就是包的管理，比如把我們頁(yè)面中可能一樣的東西抽出來(lái)創(chuàng)建一個(gè)template文件夾，把一些一樣的wxss也可以抽出來(lái)新建一個(gè)styles，在需要使用到的地方就@import就可以了，比如滴滴的按鈕吧，其實(shí)都一樣，還有頁(yè)面底部的橫條都可以封裝起來(lái)，用的時(shí)候直接導(dǎo)入就行了。
功能可能沒(méi)有一一列舉出來(lái)，由于時(shí)間有限，只講述了一些我們?nèi)粘Ｄ苁褂玫降墓δ?。想了解更多功能可以點(diǎn)擊這里查看我github，本小程序我也會(huì)不斷更新，喜歡的話可以加入我。同樣也希望你能夠留下您寶貴的意見(jiàn)和建議。 寄語(yǔ)作為一個(gè)程序猿挺不容易的，做一個(gè)前端程序猿更加不容易。技術(shù)日新月異。每天要去攝取更多的技術(shù)來(lái)源，心有千言，難于罄書。但我們都是熱于分享的人，能夠把自己遇到的問(wèn)題以及如何解決的方式寫出來(lái)，總是希望這樣可以幫助到更多同樣遇到這類問(wèn)題的你，我，他?；蛴谶@就是社區(qū)的力量，這就是優(yōu)秀程序員的品質(zhì)吧。小程序的學(xué)習(xí)依舊要鉚足勁的去學(xué)習(xí)，后面還有wepy,Mpvue等新技術(shù)在等著我們，我已經(jīng)踏上了那片領(lǐng)地的征程，日后也會(huì)發(fā)布遇到的問(wèn)題、bug和我的作品。希望對(duì)你有所幫助，我們的口號(hào)是熱于分享，熱于創(chuàng)作。Let's start a new journey?。。?/p> |
