纵有疾风起
人生不言弃

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

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

老规矩,先看效果图

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

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

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

一,网络数据的获取

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

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

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

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

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

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

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

二,首页列表数据的解析

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

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

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

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

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

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

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

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

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

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

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

三,首页数据的展示

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

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

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

    2,index.js

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

    3,index.wxss

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

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

四,详情页

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

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

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

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

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

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

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

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

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

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

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

下面把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  },})

好了,今天就到这里了,后面会分享给大家更多的关于小程序实战入门的案例,敬请期待。

我这里也有把这个案例录制一套视频出来,感兴趣的同学可以去看下
https://study.163.com/course/courseMain.htm?courseId=120946083

文章转载于:https://www.jianshu.com/p/17c632dfdf5c

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 1小时实战入门小程序开发,历史上的今天案例讲解

分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活