微信小程序开发入门及详细案例

来源：加速度jsudo

作者

访问量 6489

本文摘要

我们前面学了这么多的小程序基础知识，一直没有用一个实际的案例来把前面的知识点串起来，今天我们就来开发一款简单的《历史上的今天》，来把我们前面的知识点完整的串起来。老规矩，先看效果图

我们前面学了这么多的小程序基础知识，一直没有用一个实际的案例来把前面的知识点串起来，今天我们就来开发一款简单的《历史上的今天》，来把我们前面的知识点完整的串起来。

老规矩，先看效果图

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-2a9f959b77ec4ed22e78282402f41204.gif">

可以看到我们实现了如下功能

1，列表页
2，列表跳转详情页
3，视频播放（其实是假的，后面给大家讲这个视频播放）
4，网络请求
5，列表到详情数据携带
好了，话不多说，我们来直接看代码实现。

一，网络数据的获取

网络数据获取我们用来官方提供的wx.request方法。
下面红色框里就是我们的网络数据获取的代码

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-9d21b768b479816bc52fc4cfcad83bee.jpeg">

是不是感觉就这几段代码，很简单，事实上，石头哥写这段代码费老劲了。。。
不是说代码难写。主要是因为我这里用到的是一个三方提供的api，刚开始是想着用豆瓣电影的api，可是。。。
豆瓣之前的免费api好像停了，再去找一些api吧，基本上都收费了。这个api也是找了好久，才找到了百度提供的一个“历史上的今天百科” api，接口很简单如下图：

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-902f4dd5b81cc9dbda102569f7c507e7.png">

我们只需要用这个api，简单的做下get请求，就能请求下来一大堆数据。

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-2b3b58ca5d456ba516057d25c6ec76f3.jpeg">

而这一大堆数据也正是我们所需要的列表数据。

二，首页列表数据的解析

上面第一步已经获取到了我们所需要的数据，但是那么一大坨，我们该怎么使用呢，所以，使用之前我们要对数据做一个简单的解析。这样我们才可以显示到我们的桌面上。话不多说，我们直接写代码来获取数据。
核心代码就是我们下图红色框，框起来的这部分。

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-31a0bc3358641b0ec99e19fa683dd0e7.jpeg">

再来看下我们请求到的数据。通过下图可以看到，小程序使用wx.request在请求数据的同时，已经把数据给我们解析好了。

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-6c413cea8e61e099dac98330eeda4b7c.jpeg">

但是这里有个问题，我们请求的数据一下子把整个12月历史上的今天，都返回了。我们只想取到今天的数据，也就是12月14日的数据。该怎么取呢。
因为这里对象里的属性值不是我们传统的name，age。。。。这样的字母样式的，而是用一个数字，比如1201来作为对象里的一个属性。这样我们取值的时候就不能用传统的 object.name 这样的方式了。
当然直接用res.data.12会报错的。如下图

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-4fd413b60d08661ff43ea6d1557a3a10.jpeg">

所以呢我们就换种方式，比如我们先通过 res.data['12']先把所有12月的数据都取到。

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-146bd7ec4e770ae6913b0afb28f70f63.jpeg">

然后再通过 res.data['12']['1214']来取12月14日的数据。如下图

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-4f28282bd685e3d4e4945b348677c7f0.jpeg">

这样我们就成功的取到了历史上的12月14日的16条数据，我们接下来要做的就是把这16条数据，展示到页面上。

三，首页数据的展示

其实列表的展示，我之前写过好多文章讲解的，大家可以去翻下我之前的文章，也可以看下我之前录的讲解视频
《10小时零基础快速入门小程序开发》

我这里直接把关键代码贴出来给大家。
1，index.wxml

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-ddf0b31de2785eadddf787588241ea47.jpeg">

2,index.js

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-a4b0780f52fbe70ba255cd052ac7f971.jpeg">

3,index.wxss

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-00b36ebec4199e054441e854948f6acd.jpeg">

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

四，详情页

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-fce8242cbe73fbb14a0b7d898e293cb3.jpeg">

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

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-be49ac40edddc33a91d063e66ea3a0d4.jpeg">

当然这一切都拜webview这个强大的组件所赐。至于如何实现这个视频功能的，我视频里有说的。偷笑。。。。。
《10小时零基础快速入门小程序开发》
还是接着讲我们的这个详情页，首先我们要实现的是首页列表点击，跳转到详情页。这里还要贴出首页的代码了

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-690cb3ea32bc9df4c8e1b292eaf1da57.png">

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

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-2f20115d570bd679a09c172cd0b841d3.png">

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

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-45afc949f0e62090d6153a419f696a46.jpeg">

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

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

下面把index.js的完整代码贴给大家。

Page({
  data: {
    dataList: [],
    yueRi: ''
  },
  onLoad() {
    let month = tShopfas.getMonth()
    let monthDay = tShopfas.getTime()
    let yueRi = tShopfas.getFullTime()
    let that = tShopfas
    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/detaillink=' + link,
    })
  },
  //获取月日
  getTime() {
    let date = new Date()
    let month = date.getMonth() + 1
    if (month