微信小程序入坑: 写一个简化版知乎日报

最近开始入坑微信小程序，发现想要练手也不容易，找免费的基于HTTPS的API就要花点时间。在看了网上一些介绍后，决定采用知乎日报的API，写一个简单版的知乎日报作为入坑练习。本文尝试使用微信小程序写一个小demo，实现知乎日报的3个主要页面以及部分功能。3个页面分别为“首页”、“详情页”和“评论页”。

• index: 首页，展示热闻轮播和热闻列表。点击某条热闻时跳转到详情页面。
• detail: 详情页，展示某条热闻的内容，可从该页面跳转至相应的评论页面。
• discussion: 评论页，展示某条热闻对应的长评和短评。

备注：项目地址为https://github.com/hongchh/simplified-zhihu-daily/tree/master/wxmp

一、项目结构和成果展示

入坑练习比较简单，暂时按照微信小程序开发者工具所创建的模板项目结构来。项目的文件结构和相关描述如下。

├─pages: 各个页面的代码
│    ├─detail: 详情页面
│    │    ├─detail.js: 详情页面逻辑层代码
│    │    ├─detail.wxml: 详情页面结构
│    │    └─detail.wxss: 详情页面样式表
│    ├─discussion: 评论页面
│    │    ├─discussion.js: 评论页面逻辑层代码
│    │    ├─discussion.wxml: 评论页面结构
│    │    └─discussion.wxss: 评论页面样式表
│    └─index: 首页
│         ├─index.js: 首页逻辑层代码
│         ├─index.wxml: 首页页面结构
│         └─index.wxss: 首页样式表
├─utils: 工具函数
│    └─util.js: 工具函数
├─app.js: 应用逻辑
├─app.json: 应用公共配置
└─app.wxss: 应用公共样式

为了方便大家对这个入坑练习demo有个初步的了解，这里先放出最终的成果截图展示。

二、开发首页

首页分为两个部分，顶部有一个轮播，接着是一个热闻列表。轮播可以使用小程序提供的<swiper>组件来实现，比较简单。点击轮播项的时候需要跳转到相应的热闻详情页面，此处给最外层的<swiper>容器添加一个事件处理器，通过事件委托处理子元素的点击事件。子元素通过data-id来标记，当点击事件冒泡到外层父元素上时便可知道用户点击的是哪一条热闻。

<swiper indicator-dots autoplay bindtap="goToStoryDetail">
  <swiper-item wx:for="{
    { topStories }}" wx:key="{
    { item.id }}" data-id="{
    { item.id }}">
    <view class="top-stories-item" style="background-image: url({
    { item.image }})" data-id="{
    { item.id }}">
      <view class="top-stories-item-text" data-id="{
    { item.id }}">
        <text data-id="{
    { item.id }}">{
  { item.title }}</