快速制作一个有创意的捐赠页面

2016-03-20 13:40:04 +08:00
 irainy

Slack 和 GitHub 都添加了一个 Reaction 功能,可以对别人的发言或 Issue 通过 emoji 进行互动。这是一个非常有趣的小功能,于是我也想把它用在我的页面上!

先来看看效果(代码):

  1. 页面托管当然用 GitHub Pages ;

  2. 首先我需要 Emoji ,解决方案有很多 EmojiOne 、 Twemoji 啦,我选择了 Twemoji ,并用国内的 CDN

  3. 然后我需要服务器记录,当然这个小功能不需要自己搭建服务器,于是我选择 LeanCloud

  4. 因为没有用户登录限制,暂时只在本地对每天投票次数进行限定;

  5. 对我来说 CSS 布局才是最痛苦的,我选择妹子 UI稍微减轻一点痛苦。


LeanCloud 的文档写得很不错,按照JavaScript 数据存储开发指南很快就可以实现数据存储的功能:

  1. 首先,在 LeanCloud 创建一个应用,然后在数据后台创建一个新的 Class ;
  2. 把他们的 Js 库添加到页面,拿到 APP ID 和 APP Key 之后初始化;
  3. 页面加载之后初始化查询得到数量,用户点击之后更新数量。

最后,来试一下吧:rainy.im/donate/

2143 次点击
所在节点    分享创造
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/264910

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX