让qml-bootstrap也可以通过名称引用最新的Font Awesome 5字体

这两天在尝试给qml-bootstrap用上最新的FontAwesome5字体时，发现需要同时更新用来定义图标名称与Unicode对应关系的js文件。

为了能够省避免手动录入的尴尬局面，跌跌撞撞地实现了这个半自动化的过程。

1. 浏览器打开https://fontawesome.com/cheatsheet?from=io，查看并复制对应的html元素；

2. 利用在线工具，将html 元素内容转化为json， 

（后来才发现，可以从FontAwesome的github中，对应的js文件，例如regular.js中得到图标的名称与Unicode，可以省去前两步，直接从第三步开始。但是因为格式略有不同，实现过程也会有所区别。）

3. 利用在线工具，将json的内容简化，只保留需要的图标名称和Unicode

4. 将简化后的json，保存到本地。这里对regular，solid，brands，保存了三个json文件，在我的项目中，是fa_regular.json，fa_solid.json，fa_brands.json

5. 编写一段简单的程序，目的是将简化后的json，读取、拼接、保存成所需要的fontawesome.js文件。

因为最近在鼓捣小程序，所以就顺手用小程序的开发工具完成了这一步

• 将三个json文件保存到小程序项目的本地文件系统的/usr文件夹内，文件系统的路径，可以打开开发工具右上角的“详情”来查看。

 

• 这样，就可以通过“wx.env.USER_DATA_PATH”来访问这个路径

• 利用小程序自带的api，完成读取json，写入js文件的过程，代码如下

tapTest: function(){
    var FS = wx.getFileSystemManager();
    FS.readFile({
      // json文件路径
      filePath: wx.env.USER_DATA_PATH + '/fa_solid.json',
      success: function (res) {
        // 将arraybuffer转为字符串，再转为json
        var array = new Uint8Array(res.data)
        var json = JSON.parse(String.fromCharCode.apply(null, array))
        console.log(json[0])
        // 定义内容的首尾部分
        var ds = 'var icons_solid = { \n'
        var de = '}\n'
        var d = ''
        var t = ''
        // 从json中读取名称与Unicode，并拼接成需要的字符串
        for (var i = 0; i < json.length; i++){
          d += '\tfa_' + json[i][0] + '\t:' + '\"\\u' + json[i][1] + '\",\n'
        }
        // 得到 fa_solid对应的js文件内容
        t += ds + d + de;

        FS.readFile({
          filePath: wx.env.USER_DATA_PATH + '/fa_regular.json',
          success: function (res) {
            array = new Uint8Array(res.data)
            json = JSON.parse(String.fromCharCode.apply(null, array))
            console.log(json[0])
            ds = 'var icons_regular = { \n'
            de = '}\n'
            d = ''
            for (var i = 0; i < json.length; i++) {
              d += '\tfa_' + json[i][0] + '\t:' + '\"\\u' + json[i][1] + '\",\n'
            }
            // 得到 fa_solid + fa_regular对应的js文件内容
            t += ds + d + de;

            FS.readFile({
              filePath: wx.env.USER_DATA_PATH + '/fa_brands.json',
              success: function (res) {
                array = new Uint8Array(res.data)
                json = JSON.parse(String.fromCharCode.apply(null, array))
                console.log(json[0])
                ds = 'var icons_brands = { \n'
                de = '}\n'
                d = ''
                for (var i = 0; i < json.length; i++) {
                  d += '\tfa_' + json[i][0] + '\t:' + '\"\\u' + json[i][1] + '\",\n'
                }
                // 得到 fa_solid + fa_regular + fa_brands对应的js文件内容
                t += ds + d + de;
                // 将最终内容写入fontawesome.js文件
                FS.writeFile({
                  filePath: wx.env.USER_DATA_PATH + '/fontawesome.js',
                  data: t,
                  fail: function (res) {
                    console.log(res.errMsg);
                  }
                })

              },
            })
          },
        })
      },
    })   
  },

---

整个过程就是这样，希望能带给大家一些参考与启发。