这篇文章介绍了如何在微信小程序中安装hanzi-writer-miniprogram，包括步骤和代码实现。用户可以输入汉字并查看笔画，还有跟读和动画功能，适合汉字学习者使用。
1.hanzi-writer-miniprogram的安装请看上一篇文章
小程序安装hanzi-writer-miniprogram:
2.效果图
代码
pages/hanziWrite/hanziWrite.wxml
<view class="title">汉字识字小程序</view>
<view class="js-char-form char-form">
<view class="char-form-item char-form-text">请输入汉字</view>
<view class="char-form-item char-form-text">
<input type="text" class="js-char char-input" size="1" maxlength="1" value="{{inputstr}}" bindinput="inputstrBtn" />
</view>
<view class="char-form-item">
<button type="submit" class="update-btn" bindtap="updateCharacter">确定</button>
</view>
</view>
<view class="actions clear_both">
<button class="showCharacter" bindtap="showCharacter">显示笔画</button>
<button class="hideCharacter" bindtap="hideCharacter">隐藏笔画</button>
<button class="js-animate" bindtap="playAnimate">播放动画</button>
<button class="js-quiz" bindtap="copybook">临摹</button>
</view>
<view id="target">
<hanzi-writer-view id="hz-writer" width="300" height="300" />
</view>
<view class="actions clear_both">
<button class="showCharacter read" bindtap="wordYun">跟我读</button>
<button class="showCharacter read" bindtap="readStrokes">笔画</button>
</view>
pages/hanziWrite/hanziWrite.wxss
/* pages/hanziWrite/hanziWrite.wxss */
button {
display: inline-block !important;
outline: none;
width: 80px !important;
height: 35px !important;
/* line-height: 35px !important; */
padding:3px 5px !important;
font-size: 16px !important;
font-weight: 400 !important;
}
/* dd------------------------------------------------------- */
.clear_both:after{
display: block;
content: " ";
clear: both;
overflow: hidden;
height: 0;
}
body, html {
background: #ffffff;
margin: 0;
padding: 0;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 14px;
}
body {
padding-bottom: 80px;
}
input, button {
outline: none;
}
button {
background: none;
border: 1px solid #444;
color: #444;
cursor: pointer;
transition: all 300ms;
}
button:hover {
color: #1e6cd2;
border: 1px solid #1e6cd2;
box-shadow: none;
}
.myInput{
margin: 20px 0;
}
button, #target, .title {
box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}
button, #target {
text-shadow: 0 1px 1px white;
}
.title {
color: white;
background: #1abc9c;
padding: 15px 0;
margin: 0 0 30px;
text-align: center;
}
#target {
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 8rpx 0 #bfbfbf;
clear: both;
width: 300px;
height: 300px;
margin: 30px auto;
}
.char-form {
margin: 0 0 20px;
display: flex;
}
.char-form-text{
height: 35px;
line-height: 35px;
}
.char-form-item{
flex-grow: 1;
margin: 0 2vw;
}
.char-form button {
padding: 8px 5px !important;
line-height: 14px !important;
display: inline-block !important;
vertical-align: top !important;
}
.char-input {
border: 1px solid #ccc;
font-size: 16px;
padding: 5px;
width: 25px;
text-align: center;
}
.actions {
width: 90vw;
margin: 0 auto;
}
.actions button {
display: block;
width: 80px;
height: 3rem;
border: 1px solid #1abc9c;
color: #1abc9c;
float: left;
border-radius: 10px;
margin-right: 4px !important;
margin-bottom: 4px;
}
.actions button:last-child {
margin-right: 0;
}
button {
background: none;
border: 1px solid #444;
color: #444;
cursor: pointer;
transition: all 300ms;
}
.update-btn {
width: 97px;
border: 1px solid #1abc9c;
color: #1abc9c;
}
button:hover {
color: #1e6cd2;
border: 1px solid #1e6cd2;
box-shadow: none;
}
.char-input {
width: 7rem;
}
#hz-writer{
width: 300px !important;
height: 300px !important;
}
.read{
margin: 10px 0;
}
/* 拼音-----------------------------------------------start */
.pinyin{
width: 90vw;
height: 30px;
border-top: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf;
margin: 15px auto;
}
.pinyin_top{
height: 10px;
border-bottom: 1px solid #bfbfbf;
text-align: center;
}
.pinyin_text{
line-height: 30px;
}
/* 拼音-------------------------------------------------end */
@media screen and (max-width:370px) {
button {
display: inline-block !important;
outline: none;
width: 20vw !important;
height: 25px !important;
padding:3px 5px !important;
font-size: 12px !important;
}
.char-form-text {
height: 25px;
line-height: 25px;
}
.char-form button {
padding: 5px 5px !important;
line-height: 14px !important;
}
.char-input{
padding: 1px;
}
/* .actions button {
width: 65px;
} */
}
pages/hanziWrite/hanziWrite.js
// pages/hanziWrite/hanziWrite.js
//index.js
//获取应用实例
const app = getApp()
import createHanziWriterContext from 'hanzi-writer-miniprogram';
//引入插件：微信同声传译
const plugin = requirePlugin('WechatSI');
// import createHanziWriterContext from '../../miniprogram_npm/hanzi-writer-miniprogram/hanzi-writer-view'; -view.js");
Page({
properties: {},
data: {
inputstr: '天',
inputCharacter: '天',
content: '天',//内容
src:'', //
pinyinval:'',
},
onLoad: function(options) {
console.log("Do something initial when launch")
this.drawCharacter();
// 跟我读
this.readCharacter();
//拼音
this.pinyin();
},
// 跟读
readCharacter:function(){
//创建内部 audio 上下文 InnerAudioContext 对象。
this.innerAudioContext = wx.createInnerAudioContext();
this.innerAudioContext.onError(function (res) {
console.log(res);
wx.showToast({
title: '语音播放失败',
icon: 'none',
})
})
},
// 画出文字
drawCharacter:function(){
this.writerCtx = createHanziWriterContext({
id: 'hz-writer',
character:this.data.inputCharacter,
page: this,
radicalColor: '#1abc9c',//偏旁部首颜色
});
},
// 输入框
inputstrBtn:function(e){
console.log(e.detail.value)
var val = e.detail.value;
this.setData({
inputstr: val,
content: val,//跟我读内容
});
},
//更新
updateCharacter:function(e){
// this.writerCtx.showCharacter();
this.setData({
inputCharacter: this.data.inputstr
});
this.pinyin();
this.drawCharacter();
},
//显示笔画
showCharacter:function(e){
this.writerCtx.showCharacter();
},
//隐藏笔画
hideCharacter:function(e){
this.writerCtx.hideCharacter();
},
//播放动画
playAnimate:function(e){
this.writerCtx.loopCharacterAnimation();
},
//临摹
copybook:function(e){
this.writerCtx.quiz();
// var colorName ='#ff0'
// this.writerCtx.updateColor(colorName, colorVal, options);
},
// 跟我读-----------------------------------------------------start
// 文字转语音
wordYun:function (e) {
var that = this;
var content = this.data.content;
plugin.textToSpeech({
lang: "zh_CN",
tts: true,
content: content,
success: function (res) {
console.log(res);
console.log("succ tts", res.filename);
that.setData({
src: res.filename
})
that.yuyinPlay();
},
fail: function (res) {
console.log("fail tts", res)
}
})
},
//播放语音
yuyinPlay: function (e) {
if (this.data.src == '') {
console.log(暂无语音);
return;
}
this.innerAudioContext.src = this.data.src //设置音频地址
this.innerAudioContext.play(); //播放音频
},
// 跟我读----------------------------------------------------end
// 笔画
readStrokes:function(){
var character = "你"
// this.writerCtx.loadCharacterData(character, options = {})
}
});
拼音
扫一扫
2584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
