可免费阅读各种漫画的微信小程序，内附好用的图片懒加载组件

一个基于漫画台App原生应用的漫画阅读的微信小程序。所有漫画可免费观看（前提是得有资源?）。

项目地址：github源码

API接口文档：API

前言?

在学习一门新的语言或者框架时，做好的方法应该是做一个完整的项目吧。在写项目的过程，我们可以熟练的掌握新框架或者语言的API和特性。所以学习微信小程序也是一样的。

写这个漫画类的小程序是因为个人平常也在追更一些漫画，而现在各大漫画平台基本都是收费的，所以就想写一个可以免费看各种漫画的小程序。当然，资源肯定到抓的其他漫画平台的。由于很久之前就一直在使用这个漫画台App和腾讯动漫，而且这2个漫画平台的资源比较多，各种热门的漫画基本都有。对比之下，漫画台的界面更清爽，最重要的是接口更好获取(手动滑稽?)，所以选择了漫画台??。

该项目现在一共完成了22个页面，涉及了登录，评论，回复，点赞，还有最核心的漫画的阅读，漫画的搜索等等，对比原生的漫画台App应用的功能大部分都已经实现了，剩下的也只是一些无关紧要的功能了。常用的微信小程序有关的API也基本有使用到，也算是一个不大不小的学习项目吧。

此外，由于漫画类小程序不属于个人上线的范围，而且这可能会造成侵权，所以该小程序没有上线的。如果想漫画，请前往各手机应用商城搜索漫画台进行下载使用，或者前往漫画台官网阅读

最后，该项目的所有API接口通过Charles工具抓取，图标来自漫画台APP安卓包。该项目旨在通过编码来学习和熟悉微信小程序的开发，不作为商业目的，纯属个人瞎搞，正常的漫画阅读请使用官方的APP

项目说明?

微信小程序图片懒加载封装

该小程序是漫画图片类型，因此会使用到大量的图片，那么图片的懒加载是必不可少的需求。由于微信小程序官方的image组件的lazy-load属性过于鸡肋，所以为了更好的体验，需要重新封装一个懒加载组件。这个懒加载组件的原理是使用wx.createIntersectionObserver() 创建并返回一个 IntersectionObserver 对象实例，这个IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。具体实现见下方

<!-- lazy-load.wxml -->
<view class="lazy-load-wrapper border-radius"><imageclass="lazy-load border-radius"style="width: 100%; height: {{ height }}rpx"data-src="{{ src }}"mode="{{ mode }}"src="{{ url }}"bindload="imageLoad"bindtap="handleTap"binderror="handleError"></image>
</view>
复制代码

/* lazy-load.wxss  */
.lazy-load-wrapper {width: 100%;overflow: hidden;background-color: #f8f8f8;
}.lazy-load {vertical-align: top;
}
复制代码

// lazy-load.js
Component({externalClasses: ['border-radius'], // 用于在组件外部控制图片的圆角的classdata: {url: '',},properties: {// 图片显示模式mode: {type: String,value: 'widthFix',},// 图片的真实urlsrc: {type: String,value: '',observer: function(newVal) {if (newVal && this.alreadyShow) {this.setData({url: newVal,});}},},// 图片的占位高度，单位rpxheight: {type: Number,value: 200,},// 节点布局区域的下边界的距离bottom: {type: Number,value: 300,},},ready: function() {this.alreadyShow = false; // 用于标记图片是否已经出现在屏幕中// observer的元素必须有高度 不然不会触发回调this.createIntersectionObserver().relativeToViewport({ bottom: this.properties.bottom }).observe('.lazy-load', (rect) => {// 如果图片进入可见区域，但还是第一次出现if (!this.alreadyShow) {this.alreadyShow = true;this.setData({url: rect.dataset.src,});}});},methods: {imageLoad: function(e) {// 触发lazy-load的load事件this.triggerEvent('load', e);},handleTap: function(e) {// 触发bindlazytap自定义事件this.triggerEvent('lazytap', e);},// 图片加载失败后，显示一张默认的图片handleError: function(e) {this.setData({url: './pic_cache.png',});this.triggerEvent('error', e);},},
});
复制代码

有关图片懒加载的效果见下方的效果图，该小程序中使用到的图片懒加载到处都是。

启动

git clone https://github.com/cixiu/manhuatai-miniapp.git通过微信开发者工具打开client文件夹记得在project.config.json中换上自己的appid如果数据请求出错了，记得检查是否开启https的校验
复制代码

小程序功能✨

漫画推荐
漫画详情
漫画阅读(所有漫画都可免费阅读)
漫画收藏与评论
漫画评论的点赞和发布
漫画和作者的搜索
漫画每日更新
热门帖子(支持评论和点赞)
收藏列表和阅读历史
登录(只限手机号登录与APP应用数据同步)
个人资料的修改
还有一些小功能暂未开放

部分效果图?

首页

漫画详情页

漫画阅读

漫画搜索

漫画评论和点赞

更新页

漫画台热门帖子

书架

我的

遇到的一些问题?

background-image 属性不能使用本地资源
Pages 里的 onLoad 生命周期钩子函数可能会比 app.js 中的 onLaunch 生命周期钩子函数里的异步请求要早执行，可能会导致 Pages 里使用 globalData 数据报错
text 组件的 line-height 无效，需要在 text 组件外层的 view 组件中设置 line-height
自定义组件 slot 插槽渲染的位置不正确#bug

Typescript

2018.11.14开始，微信开发者工具开始支持使用typescript了。不过，现在小程序发布的ts声明文件并不齐全。等微信小程序的有关api的.d.ts文件更新完整后，该项目会使用typescript进行改写。