软件工程-微信小程序-数字匹配与字符连接

博客班级	https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标	1.编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改  2.熟悉git代码管理流程，将源代码上传到到github 3.在博客园班级中写一篇相应的博文
作业源代码	https://github.com/lyj-ZUCC-31801147/-/tree/master/miniprogram-3
学号	31801147
姓名	龙泳江

前言

　　这是我的第一个微信小程序，因为没有基础，虽然学过一点web和js，但是在一个陌生的环境上写程序还是很困难。所以我选择从mooc视频开始，一开始跟着视频做一个用来答题的心理测试小程序，然后走神了，随便翻了翻PASS模型的资料发现了PASS模型资料中有使用计算机进行数字匹配和字符连接和图形匹配测试的实现说明，感觉很简单，觉得有手就行，就开始做这个东西。刚开始的时候很顺利，周六就把数字匹配做完了。然后我的进度就卡在字符连接上了，一直卡到周二，主要原因是对于这个开发平台非常不熟悉，在我调试我的程序的时候往往要上网搜索相关内容。然而搜索来的东西大多都是无效的，有时候搜索到了有用的东西，学会它又要一两个小时。确实，我觉得这样学习很蠢，但时间还是花进去了。幸运的是，舒尔特方格的代码与我的代码中的字符连接小游戏的实现逻辑很像，就可以借鉴它，于是我就在21号中午把这个功能做出来了。我想图形匹配小游戏应该没有时间做了，于是我就结束了这次小程序的开发之旅。

内容展示

 

 

 

 

程序实现：

　　这个程序包括6页，首页（index），指导页（instruction），一个数字匹配练习页（lianxi），数字匹配页（digit_match),数字匹配的结果页（result）字符串连接页(str_connect)。

　　首页和指导页以及结果页都是不重要的，我在这些页面上放置了一些复制来的文字，然后放置了一个按钮进行跳转。

　　数字匹配的练习页是数字匹配页的前身，我做这个的时候不会用渲染器，也不会数据绑定，所以整个代码就看着很蠢。就是直接用之前做web的经验，开了6个view，每一个view放置一个数字，各自设置一个bindtap。然后在js文件中针对每一个bindtap修改函数的参数。主要实现的思想就是设置一个索引selectedFrm记录上一次点击的数据，和这一次点击的是否匹配，匹配则成功，开始下一题，如果不匹配就把这个位置记住。下一次的点击会与上一个未匹配成功的数进行一次匹配，直到匹配为止。数字匹配的实现逻辑与练习页相同，区别就是增加了一个时间计数器与题数计数器，当做完20题后就会现实祝贺语和所用时间。

 

 

 

 　　再就是字符串连接了，我在这里花费了这个小程序的绝大部分时间，弄懂了渲染器的概念，调试出了CSS样式，做字符串生成和字符串连接函数反而花的时间比较少。字符串的生成逻辑是随机生成一个字母数组（A-Z)与一个数字数组（0-20），将它们交替连接，就得到了题干要求的连接顺序str1。然后打乱这个数组得到str2，把它们随机插到一个str_Matrix数组（这个数组里面都是点，共100个元素），再把str_Matrix数组以10X10顺序排列就得到了下面左图的效果。字符串的连接逻辑是通过一个名为‘digGold’的bindTap点击得到event.target.dataset.value(即所点击字符的值)key，通过一个全局变量保存下一个希望点击字符的下标request_click，通过str1[request_click]与key进行比较就可以确认是否点击正确，若正确则request_click+1，否则无事发生，当点完第十个数时会有一个祝贺界面弹出，如右图所示。

，

 

 　　主要时间花在了渲染器的学习上，以及CSS的调试上。开始不懂渲染器，直接把别人的代码复制过来调试，调了半条调不出来，渲染器要遍历的数组str_Matrix永远只能单行显示（超出部分隐藏），后来知道了是CSS的原因，所以又去一个个试CSS的代码。最后发现是一个盒子模型的问题。

　　我其实只要下面这三行代码就可以实现矩阵的显示，其实做完了之后看到调了那么久就这么点小问题还是挺失落的，想到中间一步步探索的奇(yú)思（chǔn）妙（xíng）想（wéi）很多，也其实挺好笑的（最后还是得找大哥帮忙），好在最后弄出来了。