微信小程序开发日记——高仿知乎日报（上） - iyifei_H5之家

本人对知乎日报是情有独钟，看我的博客和github就知道了，写了几个不同技术类型的知乎日报APP

要做微信小程序首先要对html，css，js有一定的基础，还有对微信小程序的API也要非常熟悉

我将该教程分为以下三篇

三篇分别讲不同的组件和功能块

这篇要讲

API分析

以下是使用到的具体API，更加详细参数和返回结构可参照网上网友分享的知乎日报-API-分析，在此就不做再次分析了。

启动界面图片

{size}

参数说明

size 图片尺寸，格式：宽*高。例如: 768*1024

获取刚进入应用时的显示封面，可以根据传递的尺寸参数来获取适配用户屏幕的封面。

获取最新日报

返回的数据用于日报的首页列表，首页的结构有上下部分，上部分是图片滑动模块，用于展示热门日报，下部分是首页日报列表，以上接口返回的数据有热门日报和首页日报

获取日报详细

{id}

参数说明

id 日报id

在点击日报列表也的日报项时，需要跳转到日报详情页展示日报的具体信息，这个接口用来获取日报的展示封面和具体内容。

历史日报

{date}

参数说明

date 年月日格式时间yyyyMMdd,例如：20150903、20161202

这个接口也是用与首页列表的日报展示，但是不同的是此接口需要传一个日期参数，如20150804格式。获取最新日报接口只能获取当天的日报列表，如果需要获取前天或者更久之前的日报，则需要这个接口单独获取。

日报额外信息

{id}

参数说明

id 日报id

在日报详情页面中，不仅要展示日报的内容，好需要额外获取此日报的评论数目和推荐人数等额外信息。

日报长评

{id}/long-comments

参数说明

id 日报id

日报的评论页面展示长评用到的接口（没有找到分页参数，分页没有做）

日报短评

{id}/short-comments

参数说明

id 日报id

日报的评论页面展示段评用到的接口（没有找到分页参数，分页没有做）

主题日报栏目列表

主页的侧边栏显示有主题日报的列表，需要通过这个接口获取主题日报栏目列表

主题日报具体内容列表

{themeId}

参数说明

themeId 主题日报栏目id

在主页侧栏点击主题日报进入主题日报的内容页，需要展示此主题日报下的日报列表。

启动页

作为一个仿制知乎日报的伪APP，高大上的启动封面是必须的，哈哈。启动页面很简单，请求一个应用启动封面接口，获取封面路径和版权信息。当进入页面，在onLoad事件中获取屏幕的宽和高来请求适合尺寸的图片，在onReady中请求加载图片，在请求成果之后，延迟2s进入首页，防止页面一闪而过。

onLoad: function( options ) { var _this = this; wx.getSystemInfo( { success: function( res ) { _this.setData( { screenHeight: res.windowHeight, screenWidth: res.windowWidth, }); } }); }, onReady: function() { var _this = this; var size = this.data.screenWidth + '*' + this.data.screenHeight; requests.getSplashCover( size, ( data ) => { _this.setData( { splash: data }); }, null, () => { toIndexPage.call(_this); }); } /** * 跳转到首页 */ function toIndexPage() { setTimeout( function() { wx.redirectTo( { url: '../index/index' }); }, 2000 ); }

轮播图

首页顶部需要用到轮播图来展示热门日报，小程序中的Swipe组件可以实现。

<swiper class="index-swiper" indicator-dots="true" interval="10000"> <block wx:for="{{sliderData}}"> <swiper-item data-id="{{item.id}}" bindtap="toDetailPage"> <image mode="aspectFill" src="{{item.image}}" style="width:100%" /> <view class="mask"></view> <view class="desc"><text>{{item.title}}</text></view> </swiper-item> </block> </swiper>

所有的内容都必须要在swiper-item标签中，因为我们的图片不止有一张，而是有多个热门日报信息，需要用循环来展示数据。这里需要指定的是image里的属性mode设置为aspectFill是为了适应组件的宽度，这需要牺牲他的高度，即有可能裁剪，但这是最好的展示效果。toDetailPage是点击事件，触发跳转到日报详情页。在跳转到日报详情页需要附带日报的id过去，我们在循环列表的时候把当前日报的id存到标签的data中，用data-id标识，这有点类似与html5中的data-*API。当在这个标签上发生点击事件的时候，我们可以通过Event.currentTarget.dataset.id来获取data-id的值。

日报列表

列表的布局大同小异，不过这里的列表涉及到分页，我们可以毫不犹豫地使用scroll-view组件，它的scrolltolower是非常好用的，当组件滚动到底部就会触发这个事件。上次的小豆瓣图书也是使用了这个组件分页。不过这次的分页动画跟上次不一样，而是用一个附带旋转动画的刷新图标，使用官方的动画api来实现旋转。