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

言尽于此，完结

无论是一个初级的 coder，高级的程序员，还是顶级的系统架构师，应该都有深刻的领会到设计模式的重要性。

• 第一，设计模式能让专业人之间交流方便，如下：

程序员A：这里我用了XXX设计模式

程序员B：那我大致了解你程序的设计思路了

• 第二，易维护

项目经理：今天客户有这样一个需求…

程序员：明白了，这里我使用了XXX设计模式，所以改起来很快

• 第三，设计模式是编程经验的总结

程序员A：B，你怎么想到要这样去构建你的代码

程序员B：在我学习了XXX设计模式之后，好像自然而然就感觉这样写能避免一些问题

• 第四，学习设计模式并不是必须的

程序员A：B，你这段代码使用的是XXX设计模式对吗？

程序员B：不好意思，我没有学习过设计模式，但是我的经验告诉我是这样写的

从设计思想解读开源框架，一步一步到Spring、Spring5、SpringMVC、MyBatis等源码解读，我都已收集整理全套，篇幅有限，这块只是详细的解说了23种设计模式，整理的文件如下图一览无余！

搜集费时费力，能看到此处的都是真爱！

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

好了，话不多说，我们来直接看代码实现。

一，网络数据的获取

=======================================================================

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

• 我这里直接把关键代码贴出来给大家。

  1，index.wxml

  

  2,index.js

  

  3,index.wxss

  

  这样我们的首页展示就实现了，接下来看我们的详情页

四，详情页

===================================================================

可以看出我们的详情页很简单，就一个webview，但是功能确很丰富。

当然这一切都拜webview这个强大的组件所赐。至于如何实现这个视频功能的，我视频里有说的。偷笑。。。。。

《10小时零基础快速入门小程序开发》

还是接着讲我们的这个详情页，首先我们要实现的是首页列表点击，跳转到详情页。这里还要贴出首页的代码了

上图的bindtap用来实现点击事件，data-link用来在点击的时候传递值。

看上图的点击事件的实现，可以看出，我们是在点击的时候拿到一个link值，然后把这个值传递到详情页，而这个值，就是我们webview用来展示网页的链接。

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

其实到这里我们就基本上实现了我们的功能了。

下面把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

  },



# 写在最后


还有一份JAVA核心知识点整理（PDF）：**JVM，JAVA集合，JAVA多线程并发，JAVA基础，Spring原理，微服务，Netty与RPC**，网络，日志，Zookeeper，Kafka，RabbitMQ，Hbase，**MongoDB，Cassandra，设计模式，负载均衡，数据库，一致性哈希，JAVA算法，数据结构，加密算法，分布式缓存**，Hadoop，Spark，Storm，YARN，机器学习，云计算...

![image](https://img-blog.csdnimg.cn/img_convert/98dbfe006c7f53992631be631e10f710.webp?x-oss-process=image/format,png)

> **本文已被[CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】](https://bbs.csdn.net/topics/618154847)收录**

**[需要这份系统化的资料的朋友，可以点击这里获取](https://bbs.csdn.net/topics/618154847)**

一致性哈希，JAVA算法，数据结构，加密算法，分布式缓存**，Hadoop，Spark，Storm，YARN，机器学习，云计算...

[外链图片转存中...(img-IHAEpO4k-1715766344153)]

> **本文已被[CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】](https://bbs.csdn.net/topics/618154847)收录**

**[需要这份系统化的资料的朋友，可以点击这里获取](https://bbs.csdn.net/topics/618154847)**