阅读 627

基于Taro的小说阅读小程序

如何运行

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

## 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文件,内容如下:

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方面,则到了实际代码开发中才实现。初始界面设计如图所示:

showPage.gif

在实际开发中,页面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展示图:

show.gif

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

开发总结

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

关注下面的标签,发现更多相似文章
评论