这是一个对摩斯电码小程序项目的开发步骤详解,用于摩尔斯电码打码练习,适合新手练习,对摩尔斯电码很感兴趣,相信掌握以后就可以使用手电筒发射光信号了,只要远处有人能看到,以约定的摩斯电码翻译就会明白,有意思哦
小提示
使用过微信开发者工具
需要熟悉
Canvas
,JavaScript
,Vue
相关编程知识对摩尔斯电码的知识有过了解
- 首先,打开微信开发者工具,打开小程序项目源码(或者选择小程序新建一个),打开
index.wxml
文件,在页面中放置一个canvas
画布组件,并添加相关属性id, bindtouch...
,如下所示,另外还有index.wxss
样式文件显示布局效果无关,这里不多讲,后面有放项目源码的,若不知道可以仔细看
<view class="page">
<view class="canvas-box">
<canvas class="canvas" canvas-id="canv" id="canv" type="2d" bindtouchstart="onTouchStart" bindtouchend="onTouchEnd" bindtouchcancel="onTouchEnd"></canvas>
</view>
<!-- 此处无关省略... -->
</view>
- 打开
index.js
文件,开始写代码,在onLoad()
方法里开始写,然后处理初始化
//...
const Y = 5;//垂直高度单位
const TOP = 50;//顶边距离
const TIME = 100;//定时,每100ms刷新
//...
Page({
data: {
//...
timer: null,
width: 375,//屏幕宽
height: 10,//定义方形波的高度,这里不是屏幕高哦
points: [],//方形波的所有坐标点集合,方形波 或 点划 展示
//...
},
/**
* 页面加载时
* */
onLoad() {
const q = wx.createSelectorQuery();
//要获取到页面的`canvas`组件
q.select('#canv').fields({ size: true, node: true }, (res) => {
const { height } = this.data;
//res.node 节点是 canvas
res.node.width = res.width;
res.node.height = res.height;
//调用canvas的`getContext('2d')`,就是画布的`Canvas 2D API`
const ctx = res.node.getContext('2d');
this.data.width = res.width;
//初始化,下面是方形波的原理,像这样 __| ̄|_| ̄|__| ̄ ̄
//其中t为波宽,以时间为计量单位
//v为波高,以电压为计量单位
this.data.points = [
{ t: 0, v: TOP + height*Y },
{ t: 0, v: TOP + height*Y },
];
//开始定时
this.data.timer = setInterval(() => {
this.onReDraw(ctx,res);
}, TIME);
}).exec();
},
/**
* 页面卸载时
* */
onUnload() {
this.cancelTimer();
},
//...
//实现处理重绘方法
onReDraw(){
//...
}
//取消定时
cancelTimer(){
const { timer } = this.data;
if(timer!=null) {
clearInterval(timer);
this.data.timer=null;
}
}
})
- 重绘方法
onReDraw()
是重点,要绘制动画的方形波,需要实现不断刷新,处理逻辑要复杂一点,大致讲一下
//...
const TOP = 50;//顶边距离
const TIME = 100;//定时,每100ms刷新
const SquareWaveMode = 'square-wave';//方形波名称
//...
Page({
//...
data: {
cTime: 0,//计时数
time: 0,//测量方形波的宽度
width: 375,//屏幕宽
height: 10,//定义方形波的高度,这里不是屏幕高哦
points: [],//方形波的所有坐标点集合,方形波 或 点划 展示
downing: false,
mode: SquareWaveMode,
config: {
dit: 200,//嘀0.2s
dat: 500,//哒0.5s
space: 1000,//中断1s
mode: SquareWaveMode,//方形波,或者 点划
enableDevice: true,//启用设备:闪光
},
fontSize: 24,//字体大小
signs: [],//翻译结果,分多行展示
},
/**
* 实现处理重绘方法,每100ms会调用一次
* @param {Object} ctx Canvas API
* @param {Object} size Canvas 的大小,宽和高
*/
onReDraw(ctx,size){
const { points, downing, time, width, height, mode, config, fontSize, signs, cTime } = this.data;
//初始化canvas的相关绘制属性
let fillStyle = '#000000';
let strokeStyle = '#FFFFFF';
//...
ctx.fillStyle = (fillStyle);
ctx.fillRect(0,0,size.width,size.height);
ctx.strokeStyle = (strokeStyle);
//...
ctx.beginPath();
//判断工作模式,以下两种,默认是方形波
if(config.mode==SquareWaveMode){
//...实现绘制方形波
}else{
//...实现绘制点,划
}
//...绘制计时器
ctx.fillText(`${parseInt(cTime/1000)}s`, width/2, TOP/2);
if (signs.length>0) {
//...绘制摩尔斯电码翻译结果,如 ... --- ... 翻译成 SOS
}
//定时累计
this.data.time += TIME;
this.data.cTime += TIME;
},
//...
})
- 如果显示方形波没问题的话,接下来,完善以下用户交互逻辑,处理用户的手指触摸事件
onTouchStart()
和onTouchEnd()
,代码如下
//...
const Y = 5;//垂直高度单位
const TOP = 50;//顶边距离
//...
Page({
//...
data: {
//...
width: 375,
height: 10,
time: 0,
downing: false,//记录按下状态
points: [],
//...
},
/**
* 触摸开始
* */
onTouchStart(event){
const touch = event.touches[0];
const { points } = this.data;
//...这里是方形波加入数据逻辑
points.push({ t: 0, v: TOP });
this.data.time = 0;
this.data.downing = true;
}
/**
* 触摸结束
* */
onTouchEnd(event){
const { points, downing, width, height, time } = this.data;
let lh = points.length;
//...这里是方形波加入数据逻辑
points.push({ t: 0, v: TOP + height*Y });
this.data.time = 0;
this.data.downing = false;
//...加入的数据长度满足处理翻译条件
if (lh>2) {
this.handlerSignMsg();
}
},
/**
* 处理摩尔斯电码的翻译
* */
handlerSignMsg(){
//...
},
//...
})
- 摩斯电码的翻译方法
handlerSignMsg()
也是重点,处理转换逻辑复杂一点,实现代码大致讲一下,如果想知道具体的请看项目源码
Page({
/**
* 处理摩尔斯电码的翻译
* */
handlerSignMsg(){
const { points, config } = this.data;
//方形波points集合前2个是不需要的,上面初始化时有定义,从第3个开始处理
this.data.signs = points.slice(2).map((p)=>{
//...处理方形波集合对信号的转换逻辑
}).join('').split(/\s{2,}/).map((sign)=>{
let text = '';
let signs = sign.split(/\s+/);
for(let i=0; i<signs.length; i++){
text += this.unMorseCode(signs[i]) + ' ';
}
return {
sign: sign,//嘀哒符号表示:如 ... --- ...
text: text.trimRight(),//翻译结果:如 SOS
}
});
},
/**
* 翻译关键字
* */
unMorseCode(code){
let text = '';
//...查找关键字
switch(code){
//...
default:
text = code;
}
return text;
}
//...
})
- 剩下一些布局了,开关逻辑什么的觉得不重要,这里不仔细讲了,到此结束,一个摩斯电码打码器项目基本就算完成,下面是运行效果截图,一个方形波展示,另一个是点划展示,动画效果暂时看不了,自己实现运行后就能看到了,喜欢的话可以点此【下载项目源码】查看练习