中国大学生计算机设计大赛之小程序开发全过程

旧城等待， 2021-09-20 15:20 451阅读 0赞

**目录**

前提

（一）整个开发流程

（二）开发过程中遇到的Bug

（1）前端（小程序）

（2）后端（主要是中文乱码）

（三）涉及的技术

1.爬虫技术

2.内网渗透

（四）比赛经验

1.先说说我的一些反思

2.比赛心得

--------------------

# 前提 #

先分享一些我学习小程序的一些网站

*  官方文档：[https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html][https_developers.weixin.qq.com_miniprogram_dev_framework_MINA.html]
 *  看源社区：[http://www.see-source.com/minapp.html][http_www.see-source.com_minapp.html]
 *  小程序社区：[http://www.wxapp-union.com/portal.php?mod=list&catid=21][http_www.wxapp-union.com_portal.php_mod_list_catid_21]
 *  懒人模板：[http://wap.lanrenmb.com/wap.php?action=list&id=124&totalresult=1122&pageno=81][http_wap.lanrenmb.com_wap.php_action_list_id_124_totalresult_1122_pageno_81]
 *  图标：[https://www.iconfont.cn/][https_www.iconfont.cn]
 *  我个人觉得做得很好看的UI框架：[https://github.com/weilanwl/ColorUI][https_github.com_weilanwl_ColorUI]   (我开发时也是用这个框架)

（1）小程序是我今年3月份开始学的。（学小程序之前得会点css，JavaScript，html，这样做小程序很容易上手）  
看了一些视频教程：链接: [https://pan.baidu.com/s/1LnpTMwNYZCnMlM6vWuajTA ][https_pan.baidu.com_s_1LnpTMwNYZCnMlM6vWuajTA] 密码: jqc7

（2）就先基本了解了小程序的框架，怎样运行的。  
只看5集，我就没看了，因为视频教程基本讲的都是官方文档的东西。（不过刚刚看是学可以先看看视频，看看网上的老师是怎么讲解官方文档，然后再按照那个思路自己去看）

（3）然后我花了2个月做了一个小程序，顺便参加了中国大学生计算机设计大赛。我做的是方便师生查询成绩，课表，作业提交情况等的小程序，就是将学校的一些查询操作集成到小程序上统一操作。

欢迎访问作品的介绍网址：[https://www.passingstar.cn/DGUT/index.html][https_www.passingstar.cn_DGUT_index.html]

（当时做小程序时，只想着做给自己玩玩，刚好碰上计赛就报名了，最后拿了省赛一等奖，国赛二等奖）。

--------------------

\-----------------------------------------------------------我是分割线------------------------------------------------------------

--------------------

下面进入主题，我开发《莞工教学助手》这个小程序的流程，以及中国大学生计算机设计大赛的一些经验。

# （一）整个开发流程 #

1.首先到微信公众平台申请小程序  
2.下载安装微信web开发工具，查看微信小程序开发文档  
3.下载安装jdk1.8，eclipse for javaee4.5.1,tomcat7.0,MySQL5.5.35到本机上  
4.购买腾讯云服务器加域名，并部署好jdk1.8,tomcat7.0,MySQL5.5.35，并且进行域名解析，域名实名认证，申请域名备案，域名ssl认证（由于小程序官方要求小程序请求域名要https请求且要备好案）

腾讯云服务器下，非常完整的 Tomcat,数据库 mysql 部署，文档链接：  
[https://download.csdn.net/download/zhangxiaoyu\_sy/11606065][https_download.csdn.net_download_zhangxiaoyu_sy_11606065]  
5.接着设计莞工教学助手的需求文档：结合自身和指导老师的建议，设计出学生的需求：查询作业，课表，学分，成绩等信息，发布话题讨论；设计出教师的需求：课表，学生名单查询，发布作业。  
为此，我初步搭建了微信小程序前端整体界面框架  
6.PS设计自己的logo以及背景图，图标  
7.设计作品的名字，并在微信小程序上提交申请  
8.进行前端界面的设计，并在后台设计出对应的服务类  
9.设计前台界面文件：  
10.后端服务类设计  
11.数据库表的设计  
12.开发过程中，多调试；遇难解决的问题，上百度，论坛，微信开发社区，向指导老师请教（很重要）。  
13.将备好案的域名添加到自己小程序的合法域名里  
14.上传代码，设置为体验版本，让同学和老师体验测试，再修复存在的bug  
15.提交审核版本，最后变为线上版本

#    （二）开发过程中遇到的Bug #

# （1）前端（小程序） #

①官方textarea组件层级最高，导致位置显示错误

②只能通过setData()更新视图；

③从视图层的数据data-Name传回到逻辑层时变为data-name；

## （2）后端（主要是中文乱码） ##

①Java后台接受查询字符串有中文时会乱码，

解决方法  
String    title=request.getParameter("title");  
if(title.equals(new String(title.getBytes("iso8859-1"), "iso8859-1")))//中文乱码处理  
\{  
    title=new String(title.getBytes("iso8859-1"),"utf-8");  
\}

②当用户输入emoji表情字符后，MySQL数据库无法存储emoji(由于emoji为4个字节，而MySQL数据库只能存3个字节)；

解决方法：

将MySQL数据库的编码设置为utf8mb4（前提：MySQL版本要是5.5.3+）

③ftp请求时乱码  
解决方法：

在请求时用*iso*8859-1；返回信息时统一用GBK

# （三）涉及的技术 #

## 1.爬虫技术 ##

模拟登录，突破登录限制。

怎么爬，我之前有写过一篇文章：[https://blog.csdn.net/ZhangXiaoyu\_sy/article/details/80413724][https_blog.csdn.net_ZhangXiaoyu_sy_article_details_80413724]  
我学爬虫是看了模拟登录12306并购票之后就懂得了一些爬取的小技巧（爬虫主要找链接，拼接链接，如何用正则匹配出想要的信息），我看的是[https://www.bilibili.com/video/av37016810?from=search&seid=10342431753283644154][https_www.bilibili.com_video_av37016810_from_search_seid_10342431753283644154]  
爬虫我没用什么框架，不过要爬取页面上看得到信息基本的够用了。

## 2.内网渗透 ##

由于需要外网访问内网，所以我在网上找了个内网渗透的工具。

一开始用frp，刚开始还可以，后来又不行了，提示需要网站备案。

又看了下花生壳，需要付费，而且端口还不固定，还是算了吧

用了下ngrok，不过每次启动的网址都不同，不是我想要的。

最后选了小米球ngrok，是最好用的，还是免费的，有各种版本，有win,liunx,arm等

[http://ngrok.ciqiuwl.cn/][http_ngrok.ciqiuwl.cn]

用法超级简单 ./ngrok -config=ngrok.cfg -subdomain=自己要映射的域名 要映射的本地端口号  
举个栗子

./ngrok -config=ngrok.cfg -subdomain=www.xxx.com 8080

# （四）比赛经验 #

## 1.先说说我的一些反思 ##

我拿了二等奖，为什么拿不到一等奖？  
我总结有以下三点原因  
(1)没用到什么框架，技术点不够多！  
(2)做的功能还不是完整，丰富！  
(3)没有团队合作！  
(4)不够创新！

## 2.比赛心得 ##

1.创新——人有我精，人无我有(最重要)  
2.文档齐全(文档要规范)(非常重要)  
3.团队分工  
4.技术方面——多用些已有框架，工具(当然，要恰好和需求吻合)  
5.做的功能要齐全(尽最大可能开发出多的功能，这样答辩就有得展示，如果功能不多，但一定要完整)(重要)  
6.代码编写——要规范(变量名等规范)，可复用性要强(即要封装成类)  
7.版本管理——git或者其他都可以  
8.答辩：(非常重要)  
(1)声音要大，要自信  
(2)不要跟评委抢话，评委提意见，最好就是回答是是是(你们懂的...)  
(3)每当想到别人跟你也一样，那时你就无需紧张了。(即换位思考)。

上面分的重要性次序只是个人根据比赛来划分的，平时学习，工作大家就不要这么认为了！

分享我参加比赛的答辩PPT：[https://download.csdn.net/download/zhangxiaoyu\_sy/11606068][https_download.csdn.net_download_zhangxiaoyu_sy_11606068]

[https_developers.weixin.qq.com_miniprogram_dev_framework_MINA.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html
[http_www.see-source.com_minapp.html]: http://www.see-source.com/minapp.html
[http_www.wxapp-union.com_portal.php_mod_list_catid_21]: http://www.wxapp-union.com/portal.php?mod=list&catid=21
[http_wap.lanrenmb.com_wap.php_action_list_id_124_totalresult_1122_pageno_81]: http://wap.lanrenmb.com/wap.php?action=list&id=124&totalresult=1122&pageno=81
[https_www.iconfont.cn]: https://www.iconfont.cn/
[https_github.com_weilanwl_ColorUI]: https://github.com/weilanwl/ColorUI
[https_pan.baidu.com_s_1LnpTMwNYZCnMlM6vWuajTA]: https://pan.baidu.com/s/1LnpTMwNYZCnMlM6vWuajTA
[https_www.passingstar.cn_DGUT_index.html]: https://www.passingstar.cn/DGUT/index.html
[https_download.csdn.net_download_zhangxiaoyu_sy_11606065]: https://download.csdn.net/download/zhangxiaoyu_sy/11606065
[https_blog.csdn.net_ZhangXiaoyu_sy_article_details_80413724]: https://blog.csdn.net/ZhangXiaoyu_sy/article/details/80413724
[https_www.bilibili.com_video_av37016810_from_search_seid_10342431753283644154]: https://www.bilibili.com/video/av37016810?from=search&seid=10342431753283644154
[http_ngrok.ciqiuwl.cn]: http://ngrok.ciqiuwl.cn/
[https_download.csdn.net_download_zhangxiaoyu_sy_11606068]: https://download.csdn.net/download/zhangxiaoyu_sy/11606068