在微信小程序上做了个汉字书写的小工具。使用的Hanzi Writer 是 javascript 免费开源库。按照官方给的文档没办法成功使用。这里记录一下我遇到的问题。
由于微信APIwx.createCanvasContext停止维护的原因,hanzi-writer-miniprogram并不能正常显示,只能在基础库2.7.7及以下版本正常显示,所以不能直接使用官方给出的npm install hanzi-writer-miniprogram来下载。需要下载hanzi-writer-miniprogram@beta版本才能正常使用。方法为:npm install hanzi-writer-miniprogram@beta
1、在开发文件夹的目录下新建hanzi-writer-miniprogram文件夹
2、把npm下载的包中文件node_modules/hanzi-writer-miniprogram/src下所有文件放入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、下载来的汉字数据来源于jsdelivr CDN,你也可以使用cnchar-data生成离线数据放入自己服务器请求。这样就需要修改hanzi-writer-miniprogram/defaultCharDataLoader.js文件的第二行,将getCharDataUrl的地址改为你自己服务器的请求地址就可以了。
后面基本上就可以按照官方文档的说明来操作了。这里写一下我这里的操作,我这里因为在开发目录下新建了hanzi的文件夹,所以相对地址可能会与看到这篇文章的人的有所区别:
在hanzi/index.json下新增自定义组件
"usingComponents": {
"hanzi-writer-view": "../../hanzi-writer-miniprogram/hanzi-writer-view"
}
在hanzi/index.wxml页面下主要代码如下:
<view class="container">
<view class="title">汉字书写顺序小程序</view>
<view class="weui-cell">
<view class="weui-cell__hd" style="width: 220rpx;">请输入汉字</view>
<view class="weui-cell__bd" style="width: 300rpx;">
<input type="text" class="weui-input" placeholder="请输入汉字" size="1" value="{{inputstr}}" bindinput="inputstrBtn" />
</view>
</view>
<view style="display: flex; width: 100%; align-items: center; justify-content: center; margin-top: 50rpx;">
<button class="weui-btn" type="primary" bindtap="updateCharacter" >确定</button>
</view>
<view id="target">
<hanzi-writer-view id="hz-writer" width="300" height="300" >
</hanzi-writer-view>
</view>
</view>
在hanzi/index.js页面下主要代码如下:
import createHanziWriterContext from '../../hanzi-writer-miniprogram/index'
Page({
/**
* 页面的初始数据
*/
data: {
inputstr: '',
writerCtx: null
},
onLoad(options) {
wx.showLoading({title: '加载中...'});
let storeChar = '';
try {
storeChar = wx.getStorageSync('character')
} catch (e) {
console.log('storeChar为空');
}
if (storeChar == '') {
storeChar = '涵';
}
this.setData({
inputstr: storeChar,
});
wx.hideLoading();
this.drawCharacter(storeChar);
},
drawCharacter:function(inputCharacter) {
if (this.writerCtx == null) {
this.writerCtx = createHanziWriterContext({
id: 'hz-writer',
character:inputCharacter,
page: this,
});
} else {
this.writerCtx.setCharacter(inputCharacter);
}
this.writerCtx.loopCharacterAnimation();
},
// 输入框
inputstrBtn:function(e){
var val = e.detail.value;
this.setData({
inputstr: val,
});
},
//更新
updateCharacter:function(e){
let inputstr = this.data.inputstr
if (inputstr == '' || inputstr == undefined) {
wx.showToast({
title: '请输入汉字!',
icon: 'none'
});
return;
} else if(inputstr.length > 1) {
wx.showToast({
title: '只能输入一个汉字!',
icon: 'none'
});
return;
}
wx.setStorage({
key: 'character',
data: this.data.inputstr
})
this.drawCharacter(this.data.inputstr);
},
})
至此基本就实现了微信小程序使用hanzi-writer-miniprogram来进行汉字的书写功能。