漫画小程序
本篇面向没有接触过小程序的读者，是非常非常非常基础的东西。 不过还是需要会一点点前端
呜哇呜哇⚠️
环境搭建
正所谓工欲善其事必先利其器，程序员开发之前会选择一个好用的IDE，不过微信将一大波选择困难症的程序员nen死了。不使用微信开发者工具，你还想写小程序？ 乖乖打开小程序开发文档并前往 开发者工具下载页面选择自己的操作系统进行下载。 PS:如果不打算发布小程序的话，前面的注册啊balabala的可以忽略
项目效果
额，因为没有漫画，所以采用别人家的漫画接口来那图片。最终的效果大概这样
最终效果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中的一些对应关系
- view => div
- text => span
- 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/获取数据(咳咳，程序员的事情怎么能叫…) 从人家的api中找到 如下接口http://comics.apiaz.cn/api/v1/readlist/ 打开Postman进行测试
Postman测试单本漫画情况 可以看到数据和我们预料的相差无几，各种需要的东西能看到。 所以接下来需要做的事情就是把他读出来了。 要完成这个需求需要进行几步操作
- 请求数据
- 处理数据
- 更新页面
找到
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 },同理，详情页也是同样的操作 接口为：http://comics.apiaz.cn/api/v1/readdetail/漫画编号/章节号
详情页Postman接口