频道栏目
首页 > 资讯 > 微信小程序 > 正文

基于Taro的小说阅读小程序-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟

19-03-07        来源:[db:作者]  
收藏   我要投稿

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

## 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。

            赞赏
相关TAG标签
上一篇:微信小程序获取用户的 OpenId (附前端代码)-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
下一篇:从前端程序员的视角看小程序的稳定性保障-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站