基于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)

2. 获取所有的标签

- [https://api.raindrop.io/rest/v1/tags/{collectionId}](https://api.raindrop.io/rest/v1/tags/{collectionId})

3. 获取指定收藏集下的文章信息

- [https://api.raindrop.io/rest/v1/raindrops/{collectionId}](https://api.raindrop.io/rest/v1/raindrops/{collectionId})

4. 通过关键词查询文章等几个主要接口。

- [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：右上角设置切换封面，点击有惊喜哦！

• 可通过书签或者关键词检索

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

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

---

全文完