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

目录

前提

（一）整个开发流程

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

（1）前端（小程序）

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

（三）涉及的技术

1.爬虫技术

2.内网渗透

（四）比赛经验

1.先说说我的一些反思

2.比赛心得

---

前提

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

• 官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html
• 看源社区：http://www.see-source.com/minapp.html
• 小程序社区：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
• 图标：https://www.iconfont.cn/
• 我个人觉得做得很好看的UI框架：https://github.com/weilanwl/ColorUI   (我开发时也是用这个框架)

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

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

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

欢迎访问作品的介绍网址：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
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请求时乱码
解决方法：

在请求时用iso8859-1；返回信息时统一用GBK

（三）涉及的技术

1.爬虫技术

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

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

2.内网渗透

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

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

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

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

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

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