漫画小程序

本篇面向没有接触过小程序的读者，是非常非常非常基础的东西。

呜哇呜哇⚠️

环境搭建

正所谓工欲善其事必先利其器，程序员开发之前会选择一个好用的IDE，不过微信将一大波选择困难症的程序员nen死了。不使用微信开发者工具，你还想写小程序？

项目效果

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

最终效果1

最终效果2

最终效果3

分析一下布局:

开始编码

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

新建文件夹

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

新建项目

进去之后会发现熟悉的Hello World界面

Hello World

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

删除后

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

 1{
 2  "pages":[
 3    "pages/alllist/alllist",
 4    "pages/readlist/readlist",
 5    "pages/readdetail/readdetail"
 6  ],
 7  "window":{
 8    "navigationBarBackgroundColor":"#069"
 9  }
10}

然后使用ctrl+s(Command+S)下面就是见证奇迹的时候了，

项目树状图

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

1. view => div

2. text => span

3. for循环

1    <view wx:for="{{list}}">
2        {{item}}
3     </view> 
4

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

页面内容

 1<!--pages/readlist/readlist.wxml-->
 2
 3<view class='container'>
 4  <view class='book-head'>
 5    <view class='book-profile'>
 6      <view class='book-cover'>
 7        <image src='{{book.cover}}'></image>
 8      </view>
 9      <view class='book-info'>
10        <view class='book-title'>{{book.title}}</view>
11        <text>作者：{{book.author}}</text>
12        <text>状态：{{book.serial}}</text>
13        <text>更新：{{book.up_time}}</text>
14      </view>
15    </view>
16    <view class='book-des'>
17    {{book.description}}
18    </view>
19  </view>
20</view>
21
22<view class='book-body'>
23  <view class='readtitle'>章节列表</view>
24  <view class='readlist'>
25    <navigator url='/pages/readdetail/readdetail?raw_id={{book.raw_id}}&raw_key={{item.raw_key}}' hover-class='none' wx:for="{{readlist}}">{{item.title}}</navigator>
26
27  </view>
28</view>

页面布局

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

 1/* pages/readlist/readlist.wxss */
 2.book-head{
 3  box-sizing: border-box;
 4  margin: 0 -20rpx;
 5  padding: 20rpx;
 6  border-bottom: 1px solid #ddd;
 7}
 8.book-profile{
 9  overflow: hidden
10}
11.book-cover{
12  padding-right: 20rpx;
13  float: left;
14}
15.book-cover image{
16  width:300rpx;
17  height: 400rpx;
18}
19.book-info{
20  overflow: hidden;
21}
22.book-info text{
23  display: block;
24  line-height: 2;
25}
26.book-title{
27  padding-bottom: 5px;
28  font-size: 1.3em;
29}
30.book-des{
31  padding-top: 5px;
32  text-indent: 2em;
33  line-height: 1.6;
34}
35
36.readtitle{
37  padding: 8px 0;
38  font-weight: 600;
39  font-size: 1.1em;
40}
41.readlist{
42  overflow: hidden;
43  padding-bottom: 40rpx;
44}
45.readlist navigator{
46  float: left;
47  box-sizing: border-box;
48  margin-bottom: 3px;
49  padding-left: 5px;
50  width: 33.3%;
51  height: 1.5em;
52  overflow: hidden;
53  white-space: nowrap;
54  text-overflow: ellipsis;
55}

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

数据获取

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

我们从http://comics.apiaz.cn/获取数据(咳咳，程序员的事情怎么能叫…)

Postman测试单本漫画情况

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

1. 请求数据

2. 处理数据

3. 更新页面pages/readlist/readlist.js

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

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

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

发起HTTPS网络通信

天下文章一大抄嘛，把官网的拿来整吧整吧就是自己的咯

 1onLoad: function (options) {
 2    //请求数据
 3    //处理数据
 4    //更新页面
 5    //this.setData 用来更新页面数据的
 6    const raw_id = options.raw_id
 7    console.log(raw_id)
 8    this.loadBook(raw_id, this.codeBook)
 9    .then(this.codeBook.bind(this))
10  },
11  /**
12   * 请求漫画资源
13   */
14  loadBook(raw_id){
15    return new Promise((resolve)=>{
16      //开始请求数据
17      wx.request({
18        url: url+raw_id,
19        //异步
20        success:resolve
21        })
22      })
23  },
24  /**
25   * 处理漫画的数据内容并更新到页面
26   */
27  codeBook(res) { 
28    const data = res.data
29    this.setData({
30      book:data.book,
31      readlist:data.readlist
32    })
33    console.log(data)
34  },

同理，详情页也是同样的操作

详情页Postman接口

具体代码请见:https://github.com/zx490336534/wechat_Cartoon