先讲一下如何将本项目起来。 第一种方式:如果不进行授权,则无法使用书架
和个人书架
页,使用方式如下:
## 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上确实有相关的项目可供使用,但是大部分都是基于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。