Tancky's  Blog

微信小程序踩坑心得(一)电商倒计时效果实现

标签: xcx


2017年1月9号,张小龙微信团队正式发布了微信小程序,直到现在已经过去了大半年时间了。用户广度和深度方面看起来和预期还是有点差距,但是这并不妨碍作为一个前端开发者的我对他浓厚的极其浓厚的兴趣。我曾经也很想自己开发一款app,如今小程序帮我做到了。最近着手了一个家具商城的小程序项目,特地分享一下自己的踩坑心得,小程序的前景怎么样我不知道,我只知道动手就干!!!。

写在前面

小程序跟各主流前端开发框架的理念一样(Vue,React,Angular),核心都是以数据驱动视图,抛弃了以前传统的前端开发,JQuery在手,天下我有的局面。在小程序中并不能直接的操作dom元素,所以用惯了JQ,zepto等js库的童鞋剁手吧。

下面先来看一下倒计时的实现效果吧

倒计时效果

码代码前先把思路理清楚!!!码代码前先把思路理清楚!!!码代码前先把思路理清楚!!!

重要的事情说三遍!!!

1.从后端接口获取结束时间时的时间戳,我在项目中得到的是字段end_time

2.通过JS调用原生的date方法获取当前的时间戳,

3.用end_time 减去当前的时间戳,获得所有剩余的时间戳

4.封装一个函数用来将时间戳转化为时间点,以天/时/分/秒返回。

5.!!核心的一段代码,调用setimeout/setimeInterval()方法,每隔1秒循环递归调用方法,并改写数据that.setData({}),最终实现倒计时。

在多嘴一句,私以为写代码之前都要养成一个良好的习惯,就是先理清楚业务逻辑,最好可以以脑图的方式展现出来,这样不仅可以锻炼自己的逻辑思维能力,还可以提高自己的软实力,从而提高开发效率。

1.首先通过wx.request()API方法从后端请求数据接口

请求接口数据

2.将endTime变量存入data中,以便全局调用

请求接口数据

3.封装格式化日期函数,并返回拼接的日期字符串

请求接口数据

4.倒计时逻辑

倒计时逻辑

5.最后在生命周期onload函数中调用请求数据this.getlist()方法,并在请求成功返回后,调用coundDown函数实现倒计时!

倒计时逻辑

以上

写在结尾

这是我进行开发的第二个项目,也是第一个电商类型的小程序项目,其中有很多的坑需要一步步的踩,由于项目周期非常的紧迫,所以只有抽出空来记录下自己的学习经验。在前端工程化愈演愈烈的今天,学习新技术是必不可少的,只有紧跟时代才不会被时代所淘汰。前端框架虽多,但其实万变不离其宗,只要深入理解了其中的设计思想,剩下的就仅仅是看api了。前端之路任重而道远,且行且珍惜。

热评文章