1小时实战入门小程序开发,历史上的今天案例讲解

作者: 日期:2019-12-19

咱们前面学了这么多的小程序根底知识,一向没有用一个实践的事例来把前面的知识点串起来,今日咱们就来开发一款简略的《历史上的今日》,来把咱们前面的知识点完好的串起来。


能够看到咱们完成了如下功用



网络数据获取咱们用来官方供给的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小时零根底快速入门小程序开发》










能够看出咱们的详情页很简略,就一个webview,可是功用确很丰厚。

当然这一切都拜webview这个强壮的组件所赐。至于怎么完成这个视频功用的,我视频里有说的。偷笑。。。。。
《10小时零根底快速入门小程序开发》
仍是接着讲咱们的这个详情页,首要咱们要完成的是主页列表点击,跳转到详情页。这儿还要贴出主页的代码了

上图的bindtap用来完成点击事情,data-link用来在点击的时分传递值。

看上图的点击事情的完成,能够看出,咱们是在点击的时分拿到一个link值,然后把这个值传递到详情页,而这个值,便是咱们webview用来展现网页的链接。

这个时分咱们的详情页,其实就相当于一个浏览器了,你往里面传递不同的网址,咱们就能显现不同的内容。












下面把index.js的完好代码贴给咱们。

Page {
 let month = this.getMonth
 let monthDay = this.getTime
 let yueRi = this.getFullTime
 let that = this
 wx.request {
 console.log
 that.setData {
 console.log
 //跳转到详情页
 goDetail {
 let link = event.currentTarget.dataset.link
 console.log
 wx.navigateTo {
 let date = new Date
 let month = date.getMonth + 1
 if  {
 month = '0' + month
 let day = date.getDate
 if  {
 day = '0' + day
 let monthDay = '' + month + day
 console.log
 return monthDay
 //获取月份呢
 getMonth {
 let date = new Date
 let month = date.getMonth + 1
 if  {
 month = '0' + month
 return month
 //获取规范的月日
 getFullTime {
 let date = new Date
 let month = date.getMonth + 1
 if  {
 month = '0' + month
 let day = date.getDate
 if  {
 day = '0' + day
 let monthDay = month + '月' + day + '日'
 console.log
 return monthDay
})

我这儿也有把这个事例录制一套视频出来,感兴趣的同学能够去看下

首页
电话
短信
联系