阅读 22

Hanzi Writer Wechat miniprograms / 微信小程序

hanziwriter.org/cn/docs.htm…

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

npm install hanzi-writer-miniprogram

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

{
  "usingComponents": {
    "hanzi-writer-view": "hanzi-writer-miniprogram/hanzi-writer-view"
  }
}
复制代码

然后,在页面中添加hanzi-writer-view组件。 你必须添加idwidthheight,如下所示:

<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();
  }
});
复制代码

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

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

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