Hanzi Writer

安装

npm install hanzi-writer-miniprogram@beta

导入

1、在uniapp根目录下新建wxcomponents/hanzi-writer-miniprogram文件夹

2、把npm下载的包 node_modules/hanzi-writer-miniprogram/src 下所有文件放入 wxcomponents/hanzi-writer-miniprogram 文件夹下

3、把npm下载的包中文件node_modules/hanzi-writer/dist下的hanzi-writer.js也放入 hanzi-writer-miniprogram 文件夹

4、修改hanzi-writer-context.js第一行引入import HanziWriter from './hanzi-writer';

5、搜索文件查找 cdn.jsdelivr.net 改为 unpkg.com

6、小程序添加 https://unpkg.com 域名

7、在 pages.json 的 globalStyle 内添加：

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

使用

<hanzi-writer id="hz-writer"></hanzi-writer>


    mounted() {
        this.$nextTick(() => {
            // 创建汉字区域
            this.writerCtx = createHanziWriterContext({
                id: 'hz-writer',
                character: '你',
                page: this,
                delayBetweenStrokes: 500
            });
            // 创建写字区域
            this.writerTst = createHanziWriterContext({
                id: 'test-writer',
                character: '你',
                showCharacter: false,
                page: this,
                delayBetweenStrokes: 500,
                showHintAfterMisses: 1,
                padding: 5
            });
            // 初始化写字区域
            this.writerTst.quiz();
        });
    },
    methods: {
        write() {
            // 播放笔顺动画
            this.writerCtx.animateCharacter();
        }
    }

cnchar

安装

npm i cnchar

// cnchar提供了很多扩展包，可以全部安装

npm i cnchar-all

//也可以单独安装
cnchar-poly
cnchar-order
cnchar-trad
cnchar-draw     // 微信小程序不支持，替代方案 Hanzi Writer；但此方案的笔画动画在真机测试中并不流畅
cnchar-idiom
cnchar-xhy
cnchar-radical
cnchar-words
cnchar-explain
cnchar-voice    // 微信小程序不支持
cnchar-random
cnchar-code
cnchar-input
cnchar-info
cnchar-name

导入

main.js

import cnchar from 'cnchar';
Vue.prototype.$cnchar = cnchar;