漫画小程序

本篇面向没有接触过小程序的读者,是非常非常非常基础的东西。 不过还是需要会一点点前端

呜哇呜哇⚠️

环境搭建

正所谓工欲善其事必先利其器,程序员开发之前会选择一个好用的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中的一些对应关系

  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/获取数据(咳咳,程序员的事情怎么能叫…) 从人家的api中找到 如下接口http://comics.apiaz.cn/api/v1/readlist/ 打开Postman进行测试

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  },

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

详情页Postman接口

原文发布于微信公众号 - 测试游记(zx94_11)

原文发表时间:2019-02-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券