前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用Web前端技术打造Github最有毒的8.8K老哥Star的表情包博物馆

用Web前端技术打造Github最有毒的8.8K老哥Star的表情包博物馆

作者头像
zhaoolee
发布2021-05-06 16:47:04
5970
发布2021-05-06 16:47:04
举报
文章被收录于专栏:木子昭的博客木子昭的博客

github.com/zhaoolee/ChineseBQB

随着Web前端技术迅猛发展,Gmail, Word, Excel, PowerPoint等工具都可以通过浏览器使用。Web前端不只和浏览器打交道,Node.js的发展让前端的舞台进一步扩展,前端不仅可以使用Node.js打包复杂的js, css, html 构建优化前端工程, 还能配合Github,做出喜闻乐见的表情包开源项目。

github.com/zhaoolee/ChineseBQ

本文提到的开源代码仓库

https://github.com/zhaoolee/ChineseBQB

如何用前端打造一个受欢迎的开源项目?

好的工具要走群众路线,在中国,人人聊微信,人人要斗图,那就做个表情包博物馆,方便人们斗图吧~

搜索表情包,长按表情包图片,发给朋友(微信和QQ好友皆可)

搜索表情包,长按表情包图片,发给朋友

将表情包图片链接,发到不支持表情包的朋友圈

将表情包图片链接,发到不支持表情包的朋友圈

以上工具所有的表情包和工具源码均开源在 https://github.com/zhaoolee/ChineseBQB

开发ChineseBQB过程中的技术选型思考与实现

  • 表情包工具采用H5构建,通过固定的网址打开 https://www.v2fy.com/asset/0i/ChineseBQB/,这样可以保证在任何App内打开,也能交给搜索引擎抓取,逐步进行SEO,获得自然流量
  • 表情包工具适配PC端和移动端,给任何尺寸屏幕的用户最好的体验

PC端

移动端

  • 表情包工具支持关键词查询,并通过url参数分享搜索结果页

分享搜索结果

这是奥特曼表情包的分享页面(未来最好的兼容性,参数已encode): https://www.v2fy.com/asset/0i/ChineseBQB/?key_val=%E5%A5%A5%E7%89%B9%E6%9B%BC

  • 为提升表情包搜索准确性,zhaoolee对所有表情包进行了人工标注,并将标注数据导出为json文件

生成json的程序

代码语言:javascript
复制
// 本程序用于创建表情包图片列表
const fse = require('fs-extra');
const fs = require('fs');
const path = require('path');

function get_bqb_dir(){
  let file_list = fs.readdirSync(path.join(__dirname, "./"));
  let md_dir_list = [];
  file_list.map((file_name_value, file_name_index)=>{
      if(file_name_value.endsWith("BQB")){
          md_dir_list.push(file_name_value);
      }
  });
  return md_dir_list 
}

function get_json_data(bqb_dir_list, prefix){
  let json_data = [];
  // 遍历表情包文件夹
  for(let i = 0, bqb_dir_list_length = bqb_dir_list.length; i< bqb_dir_list_length;i++){
    let absolute_bqb_path = path.join(__dirname, bqb_dir_list[i]);
    // 获取文件夹内所有表情包图片
    let file_list = fs.readdirSync(absolute_bqb_path);
    for(let n = 0, file_list_length = file_list.length; n < file_list_length; n++){
      let tmp_img_url = prefix + path.join(bqb_dir_list[i] ,file_list[n]);
      // 忽略一切隐藏文件
      if(file_list[n].startsWith(".") === false){
        let tmp_img_info = {
          name: file_list[n],
          category: bqb_dir_list[i],
          url: tmp_img_url
        }
        json_data.push(tmp_img_info);
      }
    }
  }
  return json_data;
}
function main() {
  // 创建Json文件,ChineseBQB_github.json ChineseBQB_v2fy.json
  // 创建最终写入的数据结构 chinesebqb_github_json  chinesebqb_v2fy_json
  // 获取所有以BQB为后缀的文件夹路径
  let bqb_dir = get_bqb_dir()
  console.log("bqb_dir::", bqb_dir);
  // 将图片地址添加到 chinesebqb_github_json_data  chinesebqb_v2fy_json_data  
  let chinesebqb_github_json_data = get_json_data(bqb_dir, "https://raw.githubusercontent.com/zhaoolee/ChineseBQB/master/");
  let chinesebqb_github_json = {
    status: 1000,
    info: "ChineseBQB的Github数据源",
    data: chinesebqb_github_json_data
  };
  
  let chinesebqb_v2fy_json_data = get_json_data(bqb_dir, "https://v2fy.com/asset/0i/ChineseBQB/")
  let chinesebqb_v2fy_json = {
    status: 1000,
    info: "ChineseBQB的V2方圆数据源",
    data: chinesebqb_v2fy_json_data
  };

  // 创建Json文件,ChineseBQB_github.json ChineseBQB_v2fy.json
  fse.writeJsonSync('./chinesebqb_github.json', chinesebqb_github_json);
  fse.writeJsonSync('./chinesebqb_v2fy.json', chinesebqb_v2fy_json);
}
main();

生成的标注好的json文件 https://raw.githubusercontent.com/zhaoolee/ChineseBQB/master/chinesebqb_github.json

导出json文件

对编程感兴趣的小伙伴,可以将json文件作为开放数据源,开发微信小程序,制作爬虫Demo,甚至作为机器学习的数据源

  • 如何低成本维护项目?

表情包工具背后的数据源需要长期维护,最好的方式是让程序自动读取特定文件夹中的表情包数据

自动读取特定格式文件夹内表情包数据,并统计数量

文件夹内表情包数据

按照特定命名规则标注表情包

生成的json数据,可作为表情包工具的前端数据库,查询速度极快,无需网络交互~

生成的json数据

数量统计与文件夹同名的超链接

数量统计与文件夹同名的超链接

自动生成的网页

自动生成的网页

一个好玩的前端项目,需要好玩的想法,也需要合理的技术选型,表情包工具的搜索速度非常快,因为索引数据已经提前加载到前端,浏览器本地的查询要比网络请求快的多。

小结

现代产生的巨量数据,催生了数据云的出现,数据云的出现,可以让80%的软件直接上云,比如Word, Excel, PowerPoint大多数常用功能都可以通过在线版实现。

大量在线版工具的涌现,对前端技术提出了更高的要求,对于一名程序员,如果想成为独立开发者,打造充满个性且实用的软件或工具, 对前端领域的深入思考会变得不可或缺。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 本文提到的开源代码仓库
  • 如何用前端打造一个受欢迎的开源项目?
  • 搜索表情包,长按表情包图片,发给朋友(微信和QQ好友皆可)
  • 将表情包图片链接,发到不支持表情包的朋友圈
  • 开发ChineseBQB过程中的技术选型思考与实现
  • 小结
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档