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

原创

已于 2023-07-22 15:46:18 修改 · 1.8k 阅读

标签

#javascript #微信小程序 #vue #摩斯电码 #摩尔斯

于 2022-04-01 20:00:00 首次发布

本文详细介绍了如何使用微信开发者工具开发一个摩斯电码练习小程序，适合新手入门。通过创建canvas画布，实现手指触摸事件处理用户输入，以及摩斯电码的翻译逻辑，最终形成一个可以练习摩斯电码发送和翻译的互动工具。项目源码可供下载，帮助学习者掌握摩斯电码和小程序开发技巧。

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

小提示

使用过微信开发者工具

需要熟悉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