功能四: 滴滴等待进度
<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小程序官方文档, @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事件去呈现不同的转态。这样是可以实现的,但是只能点击一个,不能多选。痛苦啊!! 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得到用户最终反馈的直接来源,因此我们也不容错过这么重要的一点,但是打理的细节也是十分的坑啊。
<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就可以了,比如滴滴的按钮吧,其实都一样,还有页面底部的横条都可以封装起来,用的时候直接导入就行了。
功能可能没有一一列举出来,由于时间有限,只讲述了一些我们日常能使用到的功能。想了解更多功能可以点击这里查看我github,本小程序我也会不断更新,喜欢的话可以加入我。同样也希望你能够留下您宝贵的意见和建议。 寄语作为一个程序猿挺不容易的,做一个前端程序猿更加不容易。技术日新月异。每天要去摄取更多的技术来源,心有千言,难于罄书。但我们都是热于分享的人,能够把自己遇到的问题以及如何解决的方式写出来,总是希望这样可以帮助到更多同样遇到这类问题的你,我,他。或于这就是社区的力量,这就是优秀程序员的品质吧。小程序的学习依旧要铆足劲的去学习,后面还有wepy,Mpvue等新技术在等着我们,我已经踏上了那片领地的征程,日后也会发布遇到的问题、bug和我的作品。希望对你有所帮助,我们的口号是热于分享,热于创作。Let's start a new journey!!! |
滴滴一下,小程序专车来了(下)
发布:2018-06-07 14:48浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08