Loading...
墨滴

浪淘沙

2021/05/24  阅读:30  主题:前端之巅同款

基于uni-app&raindrop.io纯前端实现知识共享APP

基于uni-app&raindrop.io纯前端实现知识共享APP

写在前面

作为一名开发人员,少不了通过G众号、CSDN、知乎、掘金等平台学习和提升自己。平时在逛论坛、刷博客的过程中,难免遇到一些实用的干货资源,通常我们回将这些有帮助的内容收藏在各平台的收藏集中。不管以后会不会回头查阅,但是必须放到收藏集吃灰。久而久之,收集的知识散乱、难以分类和合并管理,资源的整合困难,也不利于知识体系的梳理。

后来了解到一款浏览器插件 pinbox 具备跨端收集整理知识的能力,因此我将此前收集的公众号文章,各大论坛等收藏的博客等都整理到pinbox 中,为了能更好的结构化管理,还开了pinbox 会员(一年好像是56,算得上良心价了)。为此我特意申请了一个微信G众号【前端知识营地】不定期的在上面分享我收藏的一些实用干货,具有启发性的图文教程和高效的办公工具等。截至目前大概推送了有二十多期文章。

但是由于G众号的特殊性,无法直接在G众号环境下发送和访问外链,因此每期文章都需要进行手动整理再版,比较的耗费心力。作为一名程序员自然是推崇解放双手,怎么能做如此粗陋之事。于是乎,我又捡起了之前被我淘汰的 raindrop.io** (淘汰的原因主要是在国内无法实用移动端)再次将其捡起是因为raindrop.io 是因为raindrop.io 开放了一系列的api 供开发者调用,也就是可以只有DIY** 你的收藏集,换句话说,国内无法使用raindrop.io 移动端,那就自己动手实现一个。结合我之前推送知识小报的经历,于是乎觉得基于raindrop.io API实现一个前端知识小报知识共享应用。

关于 pinbox 和 raindrp.io 可以查看我此前的文章了解更多高效工具推荐:技术人员必备的3个知识收藏工具(浏览器插件)

技术分析

首先一点,由于我收藏的内容都是放在raindrop.io 平台上,同时raindrop.io 又有开放的API可以调用,因此本项目无需后端实现和服务器数据库等,是一个纯前端开发的项目。我采用的是uni-app平台,我主要是想实现移动端访问,采用uni-app做移动端个人认为是一个比较好的选择,支持多端兼容,可实现一码多端(H5\小程序\IOS APP \安卓APP)。对uni-app 不了解的朋友或者感兴趣的朋友,可以点击下方链接,前往uni-app 官网查看更加详细的信息。uni-app

前期准备

熟悉raindrop.io 提供的API。(见下方链接)raindrop.io

  1. 主要是获取所有的收藏集
- [https://api.raindrop.io/rest/v1/collections/childrens](https://api.raindrop.io/rest/v1/collections/childrens)

- [https://api.raindrop.io/rest/v1/collections](https://api.raindrop.io/rest/v1/collections)
  1. 获取所有的标签
- [https://api.raindrop.io/rest/v1/tags/{collectionId}](https://api.raindrop.io/rest/v1/tags/{collectionId})
  1. 获取指定收藏集下的文章信息
- [https://api.raindrop.io/rest/v1/raindrops/{collectionId}](https://api.raindrop.io/rest/v1/raindrops/{collectionId})
  1. 通过关键词查询文章等几个主要接口。
- [https://api.raindrop.io/rest/v1/raindrops/{collectionId}](https://api.raindrop.io/rest/v1/raindrops/{collectionId})

!!!需要注意的是接口调用需要加token 验证Authorization: Bearer ae261404-11r4-47c0-bce3-e18a423da828

说干就干

难度写CSS了,最开始主要考虑以下两种样式方案

  • 基于tailwind css (原子级样式库,自由灵活)

  • 基于uView 组件库(组件级,所见即所得,拿来即用)

最近为了能少敲几行代码( 不会偷懒的程序员不是好程序员 ),选择了uView。

uView UI,是uni-app生态最优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水

其实最后也只用到了几个通用的uView 组件。

效果展示

  • 首页:展示所有的期刊数据
  • 主要操作
  • PS:右上角设置切换封面,点击有惊喜哦!
  • 可通过书签或者关键词检索

书签目前还在整理中,尚不够完善。

感兴趣的朋友可以点此下方链接自行体验下: 前端知识小报


全文完

浪淘沙

2021/05/24  阅读:30  主题:前端之巅同款

作者介绍

浪淘沙