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

野性酷女 2021-07-26 11:56 222阅读 0赞

# 基于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 组件。

## 效果展示 ##

*  首页：展示所有的期刊数据

![9bec6b53b4aaf221c9e5b7bcfb5746ef.png][]

*  主要操作

![c6d7d1c6a5e8291f123e620ef4608b97.png][]

*  PS：右上角设置切换封面，点击有惊喜哦！

![aa2f582ae93c805586736884c7d51c4d.png][]

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

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

![f8a31451441b7af955938061604da570.png][]  
感兴趣的朋友可以点此下方链接自行体验下：  
[前端知识小报][Link 1]

![6fcf45073bc42f5bf832922718dc8049.png][]

--------------------

全文完

[uni-app]: https://uniapp.dcloud.io/
[raindrop.io]: http://raindrop.io
[9bec6b53b4aaf221c9e5b7bcfb5746ef.png]: /images/20210726/dfe249e9e5ed4b95bc8f9552aab88fbc.png
[c6d7d1c6a5e8291f123e620ef4608b97.png]: /images/20210726/3e11559702a142da9ebde1dd35f40140.png
[aa2f582ae93c805586736884c7d51c4d.png]: /images/20210726/c4683c40f3bd4b9c939299eb5f67ef46.png
[f8a31451441b7af955938061604da570.png]: /images/20210726/87b7d4ca2c274ebcad9b0df1834f1c67.png
[Link 1]: https://www.wolai.com/gFEBQ2LjDjFErwLo4W6jxN#wdFgkBsv8RqnFz3HRjiTe7
[6fcf45073bc42f5bf832922718dc8049.png]: /images/20210726/1289ad0f8d2240378d238a3cce038267.png