https://github.com/k-water/taro-reader
Novel reading
https://github.com/k-water/taro-reader
react reader taro taro-ui wxapp
Last synced: 5 days ago
JSON representation
Novel reading
- Host: GitHub
- URL: https://github.com/k-water/taro-reader
- Owner: k-water
- License: mit
- Created: 2018-11-27T07:56:09.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-08T04:06:12.000Z (over 6 years ago)
- Last Synced: 2025-04-15T00:16:48.714Z (6 months ago)
- Topics: react, reader, taro, taro-ui, wxapp
- Language: JavaScript
- Size: 257 KB
- Stars: 16
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 基于Taro的小说阅读小程序
### 如何运行
先讲一下如何将本项目起来。
第一种方式：如果不进行授权，则无法使用`书架`和`个人书架`页，使用方式如下：
``` bash
## clone
git clone https://github.com/k-water/taro-reader
## install deps
npm install
## compile
npm run dev:weapp
```
然后将`dist`文件夹导入微信开发者工具即可预览。
第二种方式：如果进行授权，涉及到微信小程序登录，需要多一些数据，在`/src/cloudFunctions/userLogin`中创建一个`config.js`文件，内容如下：
``` javascript
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](https://github.com/k-water/reader-api)
此项目并没有什么逻辑，只是对参数做了下简单的处理，通过`curl`发送请求拿到数据。
### 界面设计
数据源解决了，下一步就是页面如何设计，UI怎么写等问题。对于一个不擅于设计的前端er来说，这方面还是稍微有一些阻滞的。一开始，通过[墨刀](https://modao.cc)画出了初始的原型图，在画原型图的过程中，脑中思考的是页面的布局和要实现的功能，对于UI方面，则到了实际代码开发中才实现。初始界面设计如图所示：
在实际开发中，页面UI和布局参考了微信读书，实现上可能没有那么精细，但也可以接受。
### 项目开发
有了以上准备，就可以进入写代码的阶段了。在初始化项目前思考，需不需要状态管理，要初始化什么样的项目。由于本项目页面与页面之间的数据共用的可能性不大，一些页面跳转的参数可以放在路由参数上，所以没有使用redux。
#### 目录结构
``` bash
├─ 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。