1个月连载30个设计模式真实案例,挑
852 2023-04-03 03:29:13
我们前面学了这么多的小程序基础知识,一直没有用一个实际的案例来把前面的知识点串起来,今天我们就来开发一款简单的《历史上的今天》,来把我们前面的知识点完整的串起来。
网络数据获取我们用来官方提供的wx.request方法。下面红色框里就是我们的网络数据获取的代码
是不是感觉就这几段代码,很简单,事实上,石头哥写这段代码费老劲了。。。不是说代码难写。主要是因为我这里用到的是一个三方提供的api,刚开始是想着用豆瓣电影的api,可是。。。豆瓣之前的免费api好像停了,再去找一些api吧,基本上都收费了。这个api也是找了好久,才找到了百度提供的一个“历史上的今天百科” api,接口很简单如下图:我们只需要用这个api,简单的做下get请求,就能请求下来一大堆数据。而这一大堆数据也正是我们所需要的列表数据。上面第一步已经获取到了我们所需要的数据,但是那么一大坨,我们该怎么使用呢,所以,使用之前我们要对数据做一个简单的解析。这样我们才可以显示到我们的桌面上。话不多说,我们直接写代码来获取数据。核心代码就是我们下图红色框,框起来的这部分。
再来看下我们请求到的数据。通过下图可以看到,小程序使用wx.request在请求数据的同时,已经把数据给我们解析好了。但是这里有个问题,我们请求的数据一下子把整个12月历史上的今天,都返回了。我们只想取到今天的数据,也就是12月14日的数据。该怎么取呢。因为这里对象里的属性值不是我们传统的name,age。。。。这样的字母样式的,而是用一个数字,比如1201来作为对象里的一个属性。这样我们取值的时候就不能用传统的 object.name 这样的方式了。当然直接用res.data.12会报错的。如下图所以呢我们就换种方式,比如我们先通过 res.data['12']先把所有12月的数据都取到。然后再通过 res.data['12']['1214']来取12月14日的数据。如下图这样我们就成功的取到了历史上的12月14日的16条数据,我们接下来要做的就是把这16条数据,展示到页面上。其实列表的展示,我之前写过好多文章讲解的,大家可以去翻下我之前的文章,也可以看下我之前录的讲解视频《10小时零基础快速入门小程序开发》
下面把index.js的完整代码贴给大家。
Page({ data: { dataList: [], yueRi: '' }, onLoad() { let month = this.getMonth() let monthDay = this.getTime() let yueRi = this.getFullTime() let that = this wx.request({ url: `https://baike.baidu.com/cms/home/eventsOnHistory/${month}.json`, success(res) { console.log("请求成功", res.data['12']['1214']) that.setData({ dataList: res.data[month][monthDay], yueRi }) }, fail(res) { console.log("请求失败", res) } }) }, //跳转到详情页 goDetail(event) { let link = event.currentTarget.dataset.link console.log(link) wx.navigateTo({ url: '/pages/detail/detail?link=' + link, }) }, //获取月日 getTime() { let date = new Date() let month = date.getMonth() + 1 if (month < 10) { month = '0' + month } let day = date.getDate() if (day < 10) { day = '0' + day } let monthDay = '' + month + day console.log(monthDay) return monthDay }, //获取月份呢 getMonth() { let date = new Date() let month = date.getMonth() + 1 if (month < 10) { month = '0' + month } return month }, //获取标准的月日 getFullTime() { let date = new Date() let month = date.getMonth() + 1 if (month < 10) { month = '0' + month } let day = date.getDate() if (day < 10) { day = '0' + day } let monthDay = month + '月' + day + '日' console.log(monthDay) return monthDay },})
我这里也有把这个案例录制一套视频出来,感兴趣的同学可以去看下study.163.com/course/cour…