分类
公众号「0加1」

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


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

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的程序

// 本程序用于创建表情包图片列表
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大多数常用功能都可以通过在线版实现。

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

本文永久更新地址(欢迎来读留言,写评论):

https://www.v2fy.com/p/2021-05-01-huawei-chinesebqb-1619851616000

发表评论

电子邮件地址不会被公开。 必填项已用*标注


The maximum upload file size: 2 MB.
You can upload: image, audio, video, document, spreadsheet, interactive, text, archive, code, other.
Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded.