环境搭建

正所谓工欲善其事必先利其器，程序员开发之前会选择一个好用的IDE，不过微信将一大波选择困难症的程序员nen死了。不使用微信开发者工具，你还想写小程序？
乖乖打开小程序开发文档并前往开发者工具下载页面选择自己的操作系统进行下载。
PS:如果不打算发布小程序的话，前面的注册啊balabala的可以忽略

项目效果

额，因为没有漫画，所以采用别人家的漫画接口来那图片。最终的效果大概这样

最终效果1

最终效果2

最终效果3

分析一下布局:
首先是漫画封面+漫画名称+作者+状态+更新时间
接下来是漫画简介
最下面是三章一列的章节列表
然后点击章节列表中的内容就能跳转至详情列表

开始编码

首先找一个新建一个文件夹

新建文件夹
打开微信开发者工具点击新建，如果没有注册就按照如下方式新建(测试号)

新建项目
进去之后会发现熟悉的Hello World界面

Hello World
我们不要Hello World的了，所以把无关文件删掉，删除到只剩下app.json,project.config.json就好了。

删除后
app.json是小程序的入口，类似于web框架的路由表
我们将它改为

{
  "pages":[
    "pages/alllist/alllist",
    "pages/readlist/readlist",
    "pages/readdetail/readdetail"
  ],
  "window":{
    "navigationBarBackgroundColor":"#069"
  }
}

然后使用ctrl+s(Command+S)下面就是见证奇迹的时候了，
项目文件自动就创建好了

项目树状图
打开pages/readlist/readlist.wxml开始编写第章节列表页
不过再次之前需要知道几个基础知识：
小程序和html中的一些对应关系

view => div
text => span
for循环

    <view wx:for="{{list}}">
        {{item}}
     </view>

{{xxx}}一般是后台动态传送的内容，本例中大部分数据都是后台获取的，所以会有大部分的{{}}

页面内容

<!--pages/readlist/readlist.wxml-->

<view class='container'>
  <view class='book-head'>
    <view class='book-profile'>
      <view class='book-cover'>
        <image src='{{book.cover}}'></image>
      </view>
      <view class='book-info'>
        <view class='book-title'>{{book.title}}</view>
        <text>作者：{{book.author}}</text>
        <text>状态：{{book.serial}}</text>
        <text>更新：{{book.up_time}}</text>
      </view>
    </view>
    <view class='book-des'>
    {{book.description}}
    </view>
  </view>
</view>

<view class='book-body'>
  <view class='readtitle'>章节列表</view>
  <view class='readlist'>
    <navigator url='/pages/readdetail/readdetail?raw_id={{book.raw_id}}&raw_key={{item.raw_key}}' hover-class='none' wx:for="{{readlist}}">{{item.title}}</navigator>
       
  </view>
</view>

页面布局

下面是css样式的代码
在 pages/readlist/readlist.wxss中

/* pages/readlist/readlist.wxss */
.book-head{
  box-sizing: border-box;
  margin: 0 -20rpx;
  padding: 20rpx;
  border-bottom: 1px solid #ddd;
}
.book-profile{
  overflow: hidden
}
.book-cover{
  padding-right: 20rpx;
  float: left;
}
.book-cover image{
  width:300rpx;
  height: 400rpx;
}
.book-info{
  overflow: hidden;
}
.book-info text{
  display: block;
  line-height: 2;
}
.book-title{
  padding-bottom: 5px;
  font-size: 1.3em;
}
.book-des{
  padding-top: 5px;
  text-indent: 2em;
  line-height: 1.6;
}

.readtitle{
  padding: 8px 0;
  font-weight: 600;
  font-size: 1.1em;
}
.readlist{
  overflow: hidden;
  padding-bottom: 40rpx;
}
.readlist navigator{
  float: left;
  box-sizing: border-box;
  margin-bottom: 3px;
  padding-left: 5px;
  width: 33.3%;
  height: 1.5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

以上部分需要一般会前端的都会编写就不过分解释了，毕竟我也一知半解😂

数据获取

下面是最关键的数据获取部分

我们从http://comics.apiaz.cn/获取数据(咳咳，程序员的事情怎么能叫...)
从人家的api中找到
如下接口http://comics.apiaz.cn/api/v1/readlist/
打开Postman进行测试

Postman测试单本漫画情况
可以看到数据和我们预料的相差无几，各种需要的东西能看到。
所以接下来需要做的事情就是把他读出来了。
要完成这个需求需要进行几步操作

请求数据
处理数据
更新页面
找到 pages/readlist/readlist.js
中的

/**
   * 生命周期函数--监听页面加载
   * 在页面白屏的时候，该事件会被触发
   */
  onLoad: function (options) {

这里就是页面加载的时候会触发的部分

要从网络上拿到数据那就需要访问这个接口了，查看开发文档可以找到对应的方式

发起HTTPS网络通信
天下文章一大抄嘛，把官网的拿来整吧整吧就是自己的咯

onLoad: function (options) {
    //请求数据
    //处理数据
    //更新页面
    //this.setData 用来更新页面数据的
    const raw_id = options.raw_id
    console.log(raw_id)
    this.loadBook(raw_id, this.codeBook)
    .then(this.codeBook.bind(this))
  },
  /**
   * 请求漫画资源
   */
  loadBook(raw_id){
    return new Promise((resolve)=>{
      //开始请求数据
      wx.request({
        url: url+raw_id,
        //异步
        success:resolve
        })
      })
  },
  /**
   * 处理漫画的数据内容并更新到页面
   */
  codeBook(res) { 
    const data = res.data
    this.setData({
      book:data.book,
      readlist:data.readlist
    })
    console.log(data)
  },

同理，详情页也是同样的操作
接口为：http://comics.apiaz.cn/api/v1/readdetail/漫画编号/章节号