Hanzi Writer Wechat miniprograms / 微信小程序https://hanziwriter

微信小程序组件插件在微信小程序中使用。可以使用npm安装此插件，如下所示：

npm install hanzi-writer-miniprogram

在 page.json中，首先添加以下内容以启用 hanzi-writer-view组件：

{
  "usingComponents": {
    "hanzi-writer-view": "hanzi-writer-miniprogram/hanzi-writer-view"
  }
}

然后，在页面中添加hanzi-writer-view组件。你必须添加id， width和height，如下所示：

<hanzi-writer-view id="hz-writer" width="300" height="300" />

然后在您的页面中，你可以通过createHanziWriterContext(options)控制视图，如下所示：

import createHanziWriterContext from 'hanzi-writer-miniprogram';

Page({
  onLoad: function() {
    this.writerCtx = createHanziWriterContext({
      id: 'hz-writer',
      character: '你',
      page: this,
    });

    // You can call any normal HanziWriter method here
    this.writerCtx.loopCharacterAnimation();
  }
});

此方法需要来自 wxml 中 hanzi-writer-view 组件的id和当前页面。

默认情况下，字符数据是从 hanzi-writer CDN 加载的，因此您需要将 https://cdn.jsdelivr.net 添加到已批准的域名列表中。否则，你可以提供自己的charDataLoader函数并加载你喜欢的字符数据。你可以在此处阅读有关加载字符数据的更多信息。

您还可以将任何其他正常的 Hanzi Writer 选项传递给 createHanziWriterContext，但在hanzi-writer-view组件中设置的宽度和 高度除外。