一小时的小程序开发实用介绍，今天的历史案例讲解
数据采集
小程序开发
浏览：1153 次
我们已经学到了很多关于小程序的基本知识，但我们从来没有用实际案例来链接前面的知识点。今天，我们将开发一个简单的“历史上的今天”，将之前的知识点完全联系起来。
老规矩，先看效果图
我们可以看到，我们已经实现了以下功能
1.列表页
2.列表跳转到详细信息页面
3.视频回放
4.网络请求
5.将数据从列表传递到明细
好吧，让我们看看代码实现。
1、 网络数据采集
我们使用wx。官方提供的获取网络数据的请求方法。
下面的红色框是我们的网络数据采集代码
你认为写这些代码很简单吗？事实上，石哥花了很多时间编写这段代码。。。
这并不是说代码很难写。这主要是因为我使用了第三方提供的API。起初，我想使用豆瓣电影的API，但。。。
豆瓣的免费api似乎已经停止了。去寻找更多的api。他们基本上是收费的。花了很长时间才找到百度提供的“历史上的今天百科全书”API。界面非常简单，如下所示：
我们只需要使用这个api简单地发出一个get请求，然后我们就可以请求大量数据。
这大量数据正是我们需要的列表数据。
2、 主页列表数据分析
在上面的第一步中，我们已经获得了所需的数据，但我们如何使用如此大量的数据？因此，我们需要在使用数据之前对其进行简单分析。这样，我们可以在桌面上显示它。话不多说，我们直接编写代码来获取数据。
核心代码是下图中的红色方框。
让我们看看我们要求的数据。如下图所示，小程序在使用wx请求数据时为我们解析了数据。要求
但这里有一个问题。我们要求的数据已经返回了整个12月的历史。我们只想得到今天的数据，也就是12月14日的数据，我怎么能得到。
因为对象中的属性值不是我们的传统名称，年龄….这个字母样式使用数字，例如1201，作为对象中的一个属性。这样，我们就不能在取值Name时使用传统对象。
当然，使用res.data。12将直接报告错误。如下所示
所以让我们改变方法。例如，我们首先通过res.data['12']获取12月的所有数据。
然后使用res.data['12']['1214']获取12月14日的数据
就这样，我们在历史上的12月14日成功获得了16条数据。接下来我们需要做的是在页面上显示这16条数据。
3、 主页数据显示
事实上，我已经写了很多关于这个列表的文章。你可以转到我以前的文章或观看我录制的视频
我会把钥匙码直接寄给你。
1，index.wxml
2，index.js
3，索引.wxss
这样，我们的主页显示就会实现。接下来，让我们看看我们的详细信息页面
4、 详细信息页
可以看出，我们的详细信息页面非常简单，只是一个网络视图，但功能丰富。
当然，这一切都要归功于强大的组件webview。至于如何实现这个视频功能，我在视频中已经说过。偷偷摸摸
让我们继续讨论我们的详细信息页面。首先，我们需要单击主页列表跳转到详细信息页面。主页上的代码应该张贴在这里
上图中的bindtap用于实现单击事件，数据链接用于在单击时传递值。
查看上图中click事件的实现，我们可以看到我们在单击时获得一个链接值，然后将该值传递到详细信息页面。这个值是我们的网络视图用来显示网页的链接。
此时，我们的详细信息页面实际上相当于一个浏览器。如果您向其发送不同的URL，我们可以显示不同的内容。
事实上，我们已经基本实现了我们在这里的功能。
索引的完整代码。js发布给您。
第页({
数据：{
数据列表：[]，
月日：“”
},
加载（）{
let month=this.getMonth（）
let monthDay=this.getTime（）
让yueRi=this.getFullTime（）
让它=这个
wx.请求({
网址：`https://baike.baidu.com/cms/home/eventsOnHistory/${月}.json `，
成功（res）{
安慰日志（“请求成功”，res.data['12']['1214']）
that.setData（设置数据）({
dataList:res.data[month][monthDay]，
月日
})
},
失败（res）{
安慰日志（“请求失败”，res）
}
})
},
//跳转到详细信息页面
goDetail（事件）{
let link=event.currentTarget.dataset.link
console.log（链接）
wx.导航到({
url:'/pages/detail/detail？link='+链接，
})
},
//获取月日
获取时间（）{
let date=新日期（）
让月份=日期。获取月（）+1
如果（月<10）{
月=“0”+月
}
let day=date.getDate（）
如果（天<10）{
天=“0”+天
}
让monthDay=“”+月+日
c
