基于Taro的小说阅读小程序

先讲一下如何将本项目起来。 第一种方式：如果不进行授权，则无法使用 书架 和 个人书架 页，使用方式如下：

## clone
git clone https://github.com/k-water/taro-reader

## install deps
npm install

## compile
npm run dev
复制代码

然后将 dist 文件夹导入微信开发者 工具 即可预览。

第二种方式：如果进行授权，涉及到微信小程序登录，需要多一些数据，在 /src/cloudFunctions/userLogin 中创建一个 config.js 文件，内容如下：

const config = {
  appid: 'your appid',
  secret: 'your secret',
}

module.exports = config
复制代码

然后将云函数上传并部署，记得安装依赖，接下来的操作同第一种方式。

前言

Taro是一个遵循React语法规范的多端开发的框架。自从其开源以来，就一直关注，从一开始0.x版本，到后来的1.0版本。时至今日，Taro已经发展成为一个成熟的框架，社区也逐渐完善。有一点值得点赞的是，Taro的维护人员处理问题很快，开发者很快能得到响应，专注认真的开源态度，我觉得是Taro发展好的原因之一。

数据源

此项目是一个阅读类的小程序，基于Taro开发。大概的初衷就是想试用一下Taro，熟悉Taro的开发流程等。抛开Taro，既然是阅读类的小程序，那么数据源要从何获取？一开始思考的就是这个问题，有过几个想法：

• 写一个爬虫试试
• 浏览github看有没有合适的API
• 有没有第三方免费的API

经过自己的搜索，加上个人时间上的限制，最终选择了第三个方案。github上确实有相关的项目可供使用，但是大部分都是基于Python，对 Python 不太熟悉，有一定的学习成本，故舍之。而爬取整站的书源对于我一个写页面的来说，也有点不太实际。最后在网上看到了 追书神器 的API，进行一番搜索和思考后，觉得这个东西可以作为数据源，毕竟我主要是想尝试Taro，所以数据源方面能简单解决最好了。网上关于追书神器API的说明也有很多，自己通过搜索整理后，总结成了以下几个部分：

• 主题书单
• 分类
• 精选书籍
• 书籍排行榜
• 书籍详情
• 书籍点评
• 搜索

大大小小API大概有20+个，实现的功能基本与之相关。由于接口是 HTTP 的，所以通过自己的服务器做了一层 HTTPS 的代理，方便使用。后端项目为： reader-api

此项目并没有什么逻辑，只是对参数做了下简单的处理，通过 curl 发送请求拿到数据。

界面设计

数据源解决了，下一步就是页面如何设计，UI怎么写等问题。对于一个不擅于设计的前端er来说，这方面还是稍微有一些阻滞的。一开始，通过墨刀画出了初始的原型图，在画原型图的过程中，脑中思考的是页面的布局和要实现的功能，对于UI方面，则到了实际代码开发中才实现。初始界面设计如图所示：

在实际开发中，页面UI和布局参考了微信读书，实现上可能没有那么精细，但也可以接受。

项目开发

有了以上准备，就可以进入写代码的阶段了。在初始化项目前思考，需不需要状态管理，要初始化什么样的项目。由于本项目页面与页面之间的数据共用的可能性不大，一些页面跳转的参数可以放在路由参数上，所以没有使用redux。

目录结构

├─ config
├─ dist
└─ src
      ├─ app.js
      ├─ app.scss
      ├─ cloudFunctions   ##  云函数
      ├─ components       ##  公用组件
      ├─ index.html
      ├─ pages            ##  主页面
      │    ├─ book
      │    ├─ class
      │    ├─ index
      │    └─ person
      ├─ static           ##  静态资源
      │    ├─ icon
      │    └─ image
      ├─ subpages         ## 子包
      └─ utils.js         ## 工具函数
├─ package.json
├─ project.config.json
├─ .editorconfig
├─ .eslintrc
├─ .gitignore
├─ LICENSE
├─ README.md

复制代码

从目录结构看出，主页面有四个，即

• 书城
• 分类
• 书架
• 个人中心

因为 书架 和 个人中心 这两个页面涉及到用户的信息存储，所以这里结合了小程序云开发，通过调用云函数的方法进行数据通信，方便开发。 根据实际情况，其他的页面即通过分包的方式进行加载，减少小程序首屏的加载时间。

实现的功能

根据已有的API，实现的功能有：

• 主题书单
• 排行榜
• 精选书籍
• 书籍详情
• 书籍点评
• 点评详情
• 书籍搜索
• 阅读功能
  • 阅读模式切换
  • 保存阅读进度
• 书架功能

这样说可能有点抽象，看一张GIF展示图：

由于个人开发者不能上传阅读类的小程序，再者这个小程序本就是来练手的，所以更多功能请下载使用。

开发总结

总体来说，Taro的开发体验是很不错的。由于个人之前写习惯了React，所以基本看一下文档就上手了。根据文档来开发，效率还是不错的。对于Taro不支持的小程序API或者语法，可以通过直接书写原生小程序代码实现。并不影响代码编译和功能开发。在代码校验方面，Taro重新定义Eslint规则，遇到不合理的代码规范，会有详细的中文提示，这位开发者节省了不少功夫。 由于社区的活跃和维护者处理issue神速，整体没什么阻滞，没遇到什么坑，也许可能是我还没有用到那么多特性吧(～￣▽￣)～ 。接下来有机会还会继续实践，持续关注ing。