用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

北京bk10开奖历史记录:基于Taro的小说阅读小程序

北京快三最新开奖结果 www.6z8dk.cn Rolan 2019-3-7 00:12

先讲一下如何将本项目起来。 第一种方式:如果不进行授权,则无法使用书架和个人书架页,使用方式如下:## clone git clone https://github.com/k-water/taro-reader ## install deps npm install ## compile npm ru ...

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

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

分享至 : QQ空间
收藏
原作者: water_ 来自: 掘金
  • 法制日报:别让世界杯激情冲淡守法意识 2019-03-20
  • 这些难免只有马克思主义真理才能自救,其余的都瞎扯淡,至于他们需要从哪里讨说法,也在马克思主义真理里面了 2019-03-20
  • 董卿海霞李思思康辉撒贝宁 央视名嘴童年照谁更萌 2019-03-19
  • 800万尾鱼苗放流天津蓟州于桥水库 2019-03-18
  • 高考生免费游景区是一种人文关怀 2019-03-18
  • 中华人民共和国英雄烈士保护法 2019-03-17
  • 这艘中国船刚干了件勾起美国加拿大敏感矛盾的事,但国内却没啥人知道… 2019-03-16
  • 马德里18家医院出现技术故障 预约资料丢失 2019-03-15
  • 咱主张不由市场发挥全部作用,是因为市场受需求引导,而需求又分正义需求和邪恶需求。 2019-03-14
  • 笑博士没有经历计划经济时代!其对计划经济的批评,是从市场派抄袭来的。实践证明,社会主义与计划经济是兼容的。正是由于中国中途放弃计划经济,盲目迷信市场经济,使得中 2019-03-13
  • 叙利亚礼俗(礼仪漫谈) 2019-03-13
  • 2018网络中国节·端午 2019-03-12
  • 世界杯VAR再度立功 助瑞典1 2019-03-12
  • 没考上?没关系。其它学校也能培养建设国家的人才,清华只是名气大点。 2019-03-11
  • 您访问的页面找不回来了 2019-03-11
  • 632| 510| 567| 482| 991| 492| 854| 569| 712| 838|