Hanzi Writer 是一個開源 javascript 庫

作者： cfscc
發布時間：2022-11-20
674 次瀏覽
暫無評論
5036字數
分類：程序代碼

Loading...

Hanzi Writer 是一個開源 javascript 庫，主要用于繪制漢字筆畫順序動畫。運行環境可以是Android、iOS、網頁和小程序。小程序端使用Hanzi Writer小程序插件使用，使用npm安裝。

```
npm install hanzi-writer-miniprogram
```

具體用法[參見](https://hanziwriter.org/docs.html#wechat-miniprograms)。

如果只是安裝使用教程，就沒有寫的必要了，這里總結一下開發過程中遇到的問題。

## 1、筆畫數據加載問題

Hanzi Writer 需要加載筆畫渲染數據才能繪制字符，默認情況下，Hanzi Writer 將使用 ajax 從 jsdelivr CDN加載數據。顯然我們需要在小程序后臺配置域名白名單。但問題來了，該域名從2021年12月份備案就被撤銷了，因此小程序直接通過jsdelivr CDN加載筆畫數據基本無解。好在插件提供了 charDataLoader，用于自定義加載筆畫數據。

[![](http://www.matrixbk.com/usr/uploads/2022/11/2743620582.png)](https://img2022.cnblogs.com/blog/1038573/202205/1038573-20220505090136857-514622385.png)

2、charDataLoader 使用

作者提供了一個 [hanzi-writer-data](https://github.com/chanind/hanzi-writer-data) 倉庫，提供了9574個漢字筆畫數據的 JSON 文件。例如，漢字“阿”的json數據格式：

[![](http://www.matrixbk.com/usr/uploads/2022/11/2531432467.png)](https://img2022.cnblogs.com/blog/1038573/202205/1038573-20220505091550902-1558813081.png)

通過Ajax加載：

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

JavaScript

```
var writer = HanziWriter.create('target', '阿', {
  charDataLoader: function(char, onComplete) {
    $.getJSON("/my/server/" + char + ".json", function(charData) {
      onComplete(charData);
    });
  }
});
```

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

顯然如果使用Ajax的方式加載數據，我們需要自己搭建服務器，搞定域名、備案、web服務器、數據庫服務等。想想就比較復雜。好在小程序提供了云開發功能，我們只需要將倉庫中的數據導入到數據庫中，并寫一個云函數提供查詢接口，這樣會方便許多。

## 3、npm 模塊加載

除了charDataLoader，作者還提供了NPM 模塊直接加載數據的方式。

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

JavaScript

```
var ren = require('hanzi-writer-data/人');

var writer = HanziWriter.create('target', '人', {
  charDataLoader: function() {
    return ren;
  }
});
```

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

嘗試了一下，在小程序端行不通。首先是小程序npm構建問題，對于一個node_modules，小程序需要二次構建才可以直接使用。這里的json數據無法在小程序端構建。其次是commonJS模塊動態加載問題，這里的字符數據需要傳入參數進行動態加載，嘗試了一下并未成功。再者就是小程序包上限為2M的問題，這里的數據超過了30M，即便是通過分包，也超過了其上限20M。

## 4、通過node腳本生成導入文件

json文件足足有9000多，使用手動導入，不僅僅是時間問題，而且面子上也掛不住。這里使用node腳本，生成導入云數據庫的文件。當然使用其他腳本也是可以的。

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

JavaScript

```
const fs = require('fs/promises');
const fss = require('fs');
const dirPath = './test/';

async function read() {
    try {
        const files = await fs.readdir(dirPath);
        var ws = fss.createWriteStream('./output.json', 'utf-8');
        for (const file of files) {
            let filePath = dirPath + file;
            let content = await fs.readFile(filePath, {
                encoding: 'utf-8'
            });
            ws.write(JSON.stringify({
                name: file.split('.')[0],
                json: content
            }));
        }
        ws.end();
        console.log('寫入成功!')
    } catch (error) {
        console.log(error)
    }
}
read();
```

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

## 5、云函數接口

通過上述腳本導入了幾條測試數據，并通過云函數接口查詢返回，再將數據傳遞給charDataLoader，理論上就可以完成漢字在小程序端的渲染了。

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

JavaScript

```
import createHanziWriterContext from 'hanzi-writer-miniprogram';

Page({
  onLoad: function() {
    this.writerCtx = createHanziWriterContext({
      id: 'hz-writer',
      character: '你',
      page: this,
      charDataLoader: function(char, oncomplete) {
        this.getData(char, function(charData){
          onComplete(charData)
        })
      }
    });
    this.writerCtx.loopCharacterAnimation();
  }
});
```

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

然而還是一片空白。仔細尋找查閱發現，問題出現在小程序的基礎庫版本上。將基礎庫的版本更改至2.7.7，微信開發者工具終于可以顯示筆畫數據了。然而推送到手機端的時候，整個頁面都是空白。猜想應該是小程序使用的UI 組件庫 vant 和基礎庫的版本兼容問題。顯然更改基礎庫版本又是無解了。

## 6、問題修復

實際上類似的問題已經有開發者提出了，本質原因是從基礎庫 [2.9.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) 開始，官方停止維護了 wx.createCanvasContext接口。已經有PR解決上述問題，出于測試目的，目前需要安裝小程序插件的beta版本，即可解決上述問題。

Java

```
npm install hanzi-writer-miniprogram@beta
```

重新構建，編譯，可以看到，手機端可以正常繪制了。

[![](http://www.matrixbk.com/usr/uploads/2022/11/3385868397.jpg)](https://img2022.cnblogs.com/blog/1038573/202205/1038573-20220518102432299-319380934.jpg)

小程序體驗：

[![](http://www.matrixbk.com/usr/uploads/2022/11/294522910.jpg)](https://img2022.cnblogs.com/blog/1038573/202205/1038573-20220526142406321-510265782.jpg)

* [1、筆畫數據加載問題](https://www.cnblogs.com/engeng/p/16223653.html#tid-xQwrws)
* [3、npm 模塊加載](https://www.cnblogs.com/engeng/p/16223653.html#tid-HpQTCf)
* [4、通過node腳本生成導入文件](https://www.cnblogs.com/engeng/p/16223653.html#tid-bQDijE)
* [5、云函數接口](https://www.cnblogs.com/engeng/p/16223653.html#tid-mijpzF)
* [6、問題修復](https://www.cnblogs.com/engeng/p/16223653.html#tid-cdyG4j)

__EOF__

[

](https://images.cnblogs.com/cnblogs_com/engeng/2086212/o_220322055734_20161009131654.png)

最后修改：

? 允許規范轉載

如果覺得我的文章對你有用，請隨意贊賞

發表評論取消回復
使用cookie技術保留您的個人信息以便您下次快速評論，繼續評論表示您已同意該條款

評論 *

私密評論

名稱 *

??

郵箱

地址

Hanzi Writer 是一個開源 javascript 庫

cfscc ? 2022 年 11 月 20 日

Loading...

Hanzi Writer 是一個開源 javascript 庫，主要用于繪制漢字筆畫順序動畫。運行環境可以是Android、iOS、網頁和小程序。小程序端使用Hanzi Writer小程序插件使用，使用npm安裝。

```
npm install hanzi-writer-miniprogram
```

具體用法[參見](https://hanziwriter.org/docs.html#wechat-miniprograms)。

如果只是安裝使用教程，就沒有寫的必要了，這里總結一下開發過程中遇到的問題。

## 1、筆畫數據加載問題

Hanzi Writer 需要加載筆畫渲染數據才能繪制字符，默認情況下，Hanzi Writer 將使用 ajax 從 jsdelivr CDN加載數據。顯然我們需要在小程序后臺配置域名白名單。但問題來了，該域名從2021年12月份備案就被撤銷了，因此小程序直接通過jsdelivr CDN加載筆畫數據基本無解。好在插件提供了 charDataLoader，用于自定義加載筆畫數據。

[![](http://www.matrixbk.com/usr/uploads/2022/11/2743620582.png)](https://img2022.cnblogs.com/blog/1038573/202205/1038573-20220505090136857-514622385.png)

2、charDataLoader 使用

作者提供了一個 [hanzi-writer-data](https://github.com/chanind/hanzi-writer-data) 倉庫，提供了9574個漢字筆畫數據的 JSON 文件。例如，漢字“阿”的json數據格式：

[![](http://www.matrixbk.com/usr/uploads/2022/11/2531432467.png)](https://img2022.cnblogs.com/blog/1038573/202205/1038573-20220505091550902-1558813081.png)

通過Ajax加載：

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

JavaScript

```
var writer = HanziWriter.create('target', '阿', {
  charDataLoader: function(char, onComplete) {
    $.getJSON("/my/server/" + char + ".json", function(charData) {
      onComplete(charData);
    });
  }
});
```

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

顯然如果使用Ajax的方式加載數據，我們需要自己搭建服務器，搞定域名、備案、web服務器、數據庫服務等。想想就比較復雜。好在小程序提供了云開發功能，我們只需要將倉庫中的數據導入到數據庫中，并寫一個云函數提供查詢接口，這樣會方便許多。

## 3、npm 模塊加載

除了charDataLoader，作者還提供了NPM 模塊直接加載數據的方式。

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

JavaScript

```
var ren = require('hanzi-writer-data/人');

var writer = HanziWriter.create('target', '人', {
  charDataLoader: function() {
    return ren;
  }
});
```

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

嘗試了一下，在小程序端行不通。首先是小程序npm構建問題，對于一個node_modules，小程序需要二次構建才可以直接使用。這里的json數據無法在小程序端構建。其次是commonJS模塊動態加載問題，這里的字符數據需要傳入參數進行動態加載，嘗試了一下并未成功。再者就是小程序包上限為2M的問題，這里的數據超過了30M，即便是通過分包，也超過了其上限20M。

## 4、通過node腳本生成導入文件

json文件足足有9000多，使用手動導入，不僅僅是時間問題，而且面子上也掛不住。這里使用node腳本，生成導入云數據庫的文件。當然使用其他腳本也是可以的。

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

JavaScript

```
const fs = require('fs/promises');
const fss = require('fs');
const dirPath = './test/';

async function read() {
    try {
        const files = await fs.readdir(dirPath);
        var ws = fss.createWriteStream('./output.json', 'utf-8');
        for (const file of files) {
            let filePath = dirPath + file;
            let content = await fs.readFile(filePath, {
                encoding: 'utf-8'
            });
            ws.write(JSON.stringify({
                name: file.split('.')[0],
                json: content
            }));
        }
        ws.end();
        console.log('寫入成功!')
    } catch (error) {
        console.log(error)
    }
}
read();
```

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

## 5、云函數接口

通過上述腳本導入了幾條測試數據，并通過云函數接口查詢返回，再將數據傳遞給charDataLoader，理論上就可以完成漢字在小程序端的渲染了。

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

JavaScript

```
import createHanziWriterContext from 'hanzi-writer-miniprogram';

Page({
  onLoad: function() {
    this.writerCtx = createHanziWriterContext({
      id: 'hz-writer',
      character: '你',
      page: this,
      charDataLoader: function(char, oncomplete) {
        this.getData(char, function(charData){
          onComplete(charData)
        })
      }
    });
    this.writerCtx.loopCharacterAnimation();
  }
});
```

[](javascript:void(0); "復制代碼")[](https://common.cnblogs.com/images/copycode.gif)

然而還是一片空白。仔細尋找查閱發現，問題出現在小程序的基礎庫版本上。將基礎庫的版本更改至2.7.7，微信開發者工具終于可以顯示筆畫數據了。然而推送到手機端的時候，整個頁面都是空白。猜想應該是小程序使用的UI 組件庫 vant 和基礎庫的版本兼容問題。顯然更改基礎庫版本又是無解了。

## 6、問題修復

實際上類似的問題已經有開發者提出了，本質原因是從基礎庫 [2.9.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) 開始，官方停止維護了 wx.createCanvasContext接口。已經有PR解決上述問題，出于測試目的，目前需要安裝小程序插件的beta版本，即可解決上述問題。

Java

```
npm install hanzi-writer-miniprogram@beta
```

重新構建，編譯，可以看到，手機端可以正常繪制了。

[![](http://www.matrixbk.com/usr/uploads/2022/11/3385868397.jpg)](https://img2022.cnblogs.com/blog/1038573/202205/1038573-20220518102432299-319380934.jpg)

小程序體驗：

[![](http://www.matrixbk.com/usr/uploads/2022/11/294522910.jpg)](https://img2022.cnblogs.com/blog/1038573/202205/1038573-20220526142406321-510265782.jpg)

* [1、筆畫數據加載問題](https://www.cnblogs.com/engeng/p/16223653.html#tid-xQwrws)
* [3、npm 模塊加載](https://www.cnblogs.com/engeng/p/16223653.html#tid-HpQTCf)
* [4、通過node腳本生成導入文件](https://www.cnblogs.com/engeng/p/16223653.html#tid-bQDijE)
* [5、云函數接口](https://www.cnblogs.com/engeng/p/16223653.html#tid-mijpzF)
* [6、問題修復](https://www.cnblogs.com/engeng/p/16223653.html#tid-cdyG4j)

__EOF__

[

](https://images.cnblogs.com/cnblogs_com/engeng/2086212/o_220322055734_20161009131654.png)

天天日天天干天天_黄片免费在线播放_性开放按摩av片_18禁裸体黑丝美女自慰网站。