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;