在原生微信小程序中使用 hanzi-writer 踩坑

发表于 阅读次数：

面向娃编程，在微信小程序中添加汉字笔顺练习功能。欢迎体验

使用微信原生开发，未使用uniapp。uniapp使用这个的坑没踩过去了！

插件官方地址

https://hanziwriter.org/

安装小程序版本 npm 包

小程序版本已经停更了～但是能正常使用

1
npm install hanzi-writer-miniprogram@beta

修改 project.config.json

在 setting 下面添加下面两行代码

1
2
3
4
5
6
7
 "packNpmManually": true,
"packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],

重启项目

重要！！微信开发这工具总会出现些奇奇怪怪的bug，重启解决大多数问题。

构建 npm

微信开发中工具 -> 工具 -> 构建npm

修改文件

1、修改 hanzi-writer-miniprogram 文件夹中 index.js 中的 getCharDataUrl

1
2
3
4
5
// 修改为 你自己的字体文件地址必须https，微信里面用https://cdn.jsdelivr.net这个域名不行，
var getCharDataUrl = function getCharDataUrl(char) {
  return "https://XXX.XXX.com/hanzi/"+ encodeURIComponent(char)+".json";
  // return 'https://cdn.jsdelivr.net/npm/hanzi-writer-data@' + VERSION + '/' + encodeURIComponent(char) + '.json';
};

2、修改 hanzi-writer 文件夹中的如下代码

1
2
3
4
5
6
7
8
9
// 将 下面代码注释
  if (usePath2D && global.Path2D) {
    this._path2D = new global.Path2D(this._stroke.path);
   } else {
    this._pathCmd = pathStringToCanvas(this._stroke.path);
   }

  // 修改为
  this._pathCmd = pathStringToCanvas(this._stroke.path);

使用

1
<hanzi-writer-view id="hz-writer" width="300" height="300" />
1
2
3
4
5
6
7
8
9
import createHanziWriterContext from 'hanzi-writer-miniprogram';

let _this = this;
this.writerCtx = createHanziWriterContext({
    id: 'hz-writer',
    character: '丁',
    page: _this,
});
this.writerCtx.loopCharacterAnimation();

至此，可以在小程序内使用了