微信开发实战之知乎日报

发布日期： 2017-05-22 阅读量： 作者： 网络

前言

看了那么多的小程序入门，想必各位看官也差不多对小程序已经有了一定的了解。这篇文章就不再主讲入门，现在我们要通过一个知乎日报的小程序去实践一下，加深对微信小程序api的理解。

好了，下面我们开始吧。

实战开始

首先先看看我们今天要做的知乎日报的成果。
如下图。不过由于篇幅问题，今天只讲首页的完成，里面包含了与后端的交互，页面的布局，数据的渲染，事件响应等，基本上囊括了如何制作一个单页所有开发。

微信开发实战之知乎日报

知乎日报小程序首页

1. 资源准备

知乎日报-简要版 API：

new s-at.zhihu.com/api/4/news/latest 今日热文 news.at.zhihu.com/api/4/news/ before / 更多往日热文

上面这两个地址是我们今天要做的首页的API，我们将发起request请求，拿回数据做渲染。

2.首页JS

下面我们将开始编写代码，请保持首页目录结构跟我下图一致。

微信开发实战之知乎日报

首页三个文件

好，首先我们先写JS文件,代码如下，而且我都加了详细的注释。

// index.js

//index.js
//获取应用实例
var app = getApp()
var utils = require('../../utils/util.js');
//初始化数据
Page({
  data: {
    list: [],
    duration: 2000,
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    loading: false,
    plain: false
  },
  //onLoad方法，程序启动自执行，请求知乎日报今日热闻接口
  onLoad: function () {
    var that = this;
    wx.request({
      url: 'http://news-at.zhihu.com/api/4/news/latest',
      headers: { // http头数据
        'Content-Type': 'application/json'
      },
      success: function (res) { //请求成功后的回调
         that.setData({   // 设置返回值
           banner: res.data.top_stories,  //banner图片数据
           list: [{ header: '今日热闻' }].concat(res.data.stories)  //热闻数据list
         })
      }
    })
    this.index = 1;   //方便下拉点击更多时的计数下标，暂可忽略
  },
  //下拉滚动条，点击更多的响应
  loadMore: function (e) {
    if (this.data.list.length === 0) return
    var date = this.getNextDate()
    var that = this
    that.setData({ loading: true });
    wx.request({  // 再次发起请求，请求上一天的热闻
      url: 'http://news.at.zhihu.com/api/4/news/before/' + (Number(utils.formatDate(date)) + 1),  //此此API需要带日期
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {  // 成功回调
         that.setData({
           loading: false,
           list: that.data.list.concat([{ header: utils.formatDate(date, '-') }]).concat(res.data.stories)
         })
      }
    })
  },
  //事件处理函数
  bindViewTap: function(e) {
    wx.navigateTo({
      url: '../detail/detail?id=' + e.target.dataset.id
    })
  },
  //转换时间函数
  getNextDate: function (){
    var now = new Date()
    now.setDate(now.getDate() - this.index++)
    return now
  },

})

# 微信 # 开发实战 # 知乎日报

上一篇: phpcms提示该信息不存在怎么办

下一篇: phpcms全站伪静态设置

微信开发实战之知乎日报

随便看看