摩斯电码-打码机练习-微信小程序项目开发入门

这是一个对摩斯电码小程序项目的开发步骤详解，用于摩尔斯电码打码练习，适合新手练习，对摩尔斯电码很感兴趣，相信掌握以后就可以使用手电筒发射光信号了，只要远处有人能看到，以约定的摩斯电码翻译就会明白，有意思哦

小提示

• 使用过微信开发者工具

• 需要熟悉Canvas,JavaScript,Vue相关编程知识

• 对摩尔斯电码的知识有过了解

1. 首先，打开微信开发者工具，打开小程序项目源码（或者选择小程序新建一个），打开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>

2. 打开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;
		}
	}
})

3. 重绘方法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;
	  },
	//...
})

4. 如果显示方形波没问题的话，接下来，完善以下用户交互逻辑，处理用户的手指触摸事件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(){
		//...
	 },
	//...
})

5. 摩斯电码的翻译方法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;
	 }
	//...
})

6. 剩下一些布局了，开关逻辑什么的觉得不重要，这里不仔细讲了，到此结束，一个摩斯电码打码器项目基本就算完成，下面是运行效果截图，一个方形波展示，另一个是点划展示，动画效果暂时看不了，自己实现运行后就能看到了，喜欢的话可以点此【下载项目源码】查看练习