- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

用Web前端技术打造Github最有毒的8.8K老哥Star的表情包博物馆丨【WEB前端大作战】

zhaoolee 发表于 2021/05/01 14:43:45 2021/05/01

【摘要】随着Web前端技术迅猛发展，Gmail, Word, Excel, PowerPoint等工具都可以通过浏览器使用。Web前端不只和浏览器打交道，Node.js的发展让前端的舞台进一步扩展，前端不仅可以使用Node.js打包复杂的js, css, html 构建优化前端工程，还能配合Github，做出喜闻乐见的表情包开源项目。本文提到的开源代码仓库https://github.com/z...

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

本文提到的开源代码仓库

https://github.com/zhaoolee/ChineseBQB

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

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

搜索表情包，长按表情包图片，发给朋友（微信和QQ好友皆可）

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

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

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

表情包工具采用H5构建，通过固定的网址打开 https://www.v2fy.com/asset/0i/ChineseBQB/，这样可以保证在任何App内打开，也能交给搜索引擎抓取，逐步进行SEO，获得自然流量
表情包工具适配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();