如何运行
先讲一下如何将本项目起来. 第一种方式: 如果不进行授权, 则无法使用书架和个人书架页, 使用方式如下:
- ## 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 的代理, 方便使用. 后端项目为: https://github.com/k-water/reader-api
此项目并没有什么逻辑, 只是对参数做了下简单的处理, 通过 curl 发送请求拿到数据.
界面设计
数据源解决了, 下一步就是页面如何设计, UI 怎么写等问题. 对于一个不擅于设计的前端 er 来说, 这方面还是稍微有一些阻滞的. 一开始, 通过墨刀 https://modao.cc 画出了初始的原型图, 在画原型图的过程中, 脑中思考的是页面的布局和要实现的功能, 对于 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.
来源: https://juejin.im/post/5c7f9d85f265da2dab17f5e8