Keywords：WeChat applet；JavaScript；wxml；wcss
第一章
1.1
在微信使用人数越来越多的现在，为了商家推广以及用户支付方便，商家应该在微信中使用微信小程序将自己的商城展示出来，因此设计了一个专门的水果商城的微信小程序，给商家提供了展示商品的平台。
本课题的意义在于让商家能够更加简便的管理商城，并节约商城开发以及维护的成本。
便商家获取用户信息以及防止未登录用户进入商城。实现了商品列表页，即首页，用于商家用横幅广告进行商品推广并动态加载商品。实现了商品详情页，用于将商品的信息显示出来，使用户可以将商品加入购物车。实现了购物车页，将加入了购物车的商品显示出来，并自动计算购物车中的所有商品的总价格。实现了个人信息页，将用户的信息显示在页面中，能自动识别性别及语言。
这个水果商城微信小程序实现了用户授权登录，商品列表页，商品详情页，购物车页，和个人信息页等页面及其功能。经过测试之后并未出现明显的问题，用户使用时无明显的卡顿。
关键词：微信小程序；JavaScript；wxml；wcss
Abstract
More and more people use WeChat now, in order to promote the business and users to pay for convenience, businesses should use WeChat small program in WeChat to show their own mall, so a special fruit mall WeChat small program is designed to provide businesses with a platform to show products. Through WeChat developer tools and vscode development WeChat applet, WeChat developer tools can facilitate the function of the real-time simulation of the design, and put it in a virtual machine visualization, using vscode and some plug-in, can speed up the development of small WeChat program speed, using JavaScript, json, WXML, WCSS development WeChat small programs such as language, the language and the language used in web development with high similarity, so convenient and quick start.
类别
合计
分值
各项分值
评分标准
实际得分
评语
报告质量
30
10
报告格式规范，表述清晰，章节内容组织恰当。符号统一，图表完备，符合规范要求。参考文献数量在5篇以上，格式及引用符合要求。
29
报告格式规范，文字通顺，表述清晰，章节内容组织恰当。符号统一，图表完备，符合规范要求。报告内容翔实，结构严谨合理。课题背景介绍清楚，综述充分。能对问题加以分析和设计，系统设计与实现等主要过程完整，功能完善。并对整个设计过程进行了全面总结，体现了一定的收获。
学业导师（签字）：谢芳
10
报告内容翔实，结构严谨合理。课题背景介绍清楚，综述充分。设计与实现等主要过程完整，论述具体透彻。能运用所学专业知识对问题加以分析和求解。无抄袭现象。
10
设计报告对整个设计过程进行了全面总结，体现了收获，得出了有价值的结论或结果。
平时表现
20
20
遵守学习纪律，表现良好，积极完成课程设计任务，无旷课、迟到、早退等情况。
3.使用vue或微信小程序，Node.js爬取网易云音乐完成一个音乐播放盒子
二、进度安排：
6月20日之前，教师确定设计题目，准备设计环境。
6.20~6.28指导教师将设计题目、相关资料发给学生。学生讨论确定分组和选题、查阅资料，确定初步设计方案，完成原型设计。
6.28-7.5完成系统设计、调试，教师检查验收
1.3
本设计课题依赖于微信官方提供的微信开发者工具进行开发及模拟，微信开发者工具能够方便的实时模拟设计的功能，并将它在虚拟机中可视化出来。使开发者能够及时修改界面，修补问题，方便开发者开发微信小程序[2]。
本设计课题开发过程中使用vscode编辑器，通过插件能够加快微信小程序的开发速度，这些插件提供了智能高亮，自动补齐等功能，极大方便了开发者开发微信小程序。
硬件：64位操作系统，8G内存，CPU1.8GHZ
3）任务和要求
1~2人为一组，从老师给出的题目中选择一个题，或者自选题目（和老师讨论后确定）。选择适当的开发工具和平台，完成软件的设计、开发、测试。按要求完成综合设计报告。
1.使用vue完成前台业务，MongoDB完成后台业务完成一个移动商城的项目
2.使用微信小程序做前台，Node.js爬虫爬取堆糖完成一个微信的小应用
第二章
2.1
2.1.1
微信开发者工作是微信官方提供的针对微信小程序的开发工具，集中了开发，调试，预览，上传等功能。微信团队发布了微信小程序开发者工具、微信小程序开发文档和微信小程序设计指南，全新的开发者工具，集成了开发调试、代码编辑及程序发布等功能，帮助开发者简单和高效地开发微信小程序。
启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，后续所有的操作都会基于这个微信的帐号
This fruit mall WeChat applet implements user authorization login, product list page, product details page, shopping cart page, and personal information page and other pages and functions. After the test, there is no obvious problem. There is no obvious lag.
[3]罗国庆,陈良萍.网站建设案例精粹[M].北京:电子工业出版社, 2004.
[4]汪涛,杜蔚苗.移动终端HTML5页面互动版式设计研究[J].包装工程,2017,(06):203-208.
[5]Stephen.R.Schach.Object-Oriented and Classical Software Engineering [M].北京:机械工业出版社, 2002.
[6]Shari Lavrence Pfleeger. Software Engineering[M].北京:高等教育社, 2003
摘
在微信使用人数越来越多的现在，为了商家推广以及用户支付方便，商家应该在微信中使用微信小程序将自己的商城展示出来，因此设计了一个专门的水果商城的微信小程序，给商家提供了展示商品的平台[1]。通过微信开发者工具和vscode开发微信小程序，微信开发者工具能够方便的实时模拟设计的功能，并将它在虚拟机中可视化出来，通过vscode和一些插件，能够加快微信小程序的开发速度，使用JavaScript，json，wxml，wcss等语言开发微信小程序，这些语言与网页开发时使用的语言具有高相似度，因此方便快速入门。
程序调试主要有三大功能区：模拟器、调试工具和小程序操作区：
1.模拟器。模拟器模拟微信小程序在客户端真实的逻辑表现，对于绝大部分的API均能够在模拟器上呈现出正确的状态。
2.调试工具。调试工具分为6大功能模块：Wxml、Console、Sources、Network、Appdata、Storage以及WxmlPannel。Wxml Pannel用于帮助开发者开发Wxml转化后的界面。在这里可以看到真实的页面结构以及结构对应的wxss属性，同时可以通过修改对应wxss属性，在模拟器中实时看到修改的情况。通过调试模块左上角的选择器，还可以快速找到页面中组件对应的wxml代码。Sources Pannel用于显示当前项目的脚本文件，同浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，所以在Sources Pannel中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在define函数中，并且对于Page代码，在尾部会有require的主动调用。Netwrok Pannle用于观察和显示request和socket的请求情况。Appdata Pannel用于显示当前项目当前时刻appdata具体数据，实时地反馈项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。Storage Pannel用于显示当前项目的使用wx.setStorage或者wx.setStorageSync后的数据存储情况。Console Pannel有两大功能：开发者可以在此输入和调试代码以及微信小程序的错误输出。
武汉工程大学
计算机科学与工程学院
综合设计报告
设计名称：移动应用系统设计
设计题目：水果商城系统
学生学号：1705121411
专业班级：2017数字媒体技术01班
学生姓名：黄浩博
指导教师（职称）：谢芳（副教授）、王邯（讲师）
学业导师（职称）：谢芳（副教授）
学生成绩：
完成时间：2020.6.28~7.10
7.6-.7.10完成综合设计报告
三、应收集资料及主要参考文献：
[1]陈莉莉,刘嘉滢.基于微信小程序的高校早餐外卖O2O电商模式研究——以南京林业大学为例[J].电子商务,2020(02):38-39.
[2]袁堂青,亓婧.基于微信小程序的开发与研究[J].网络安全技术与应用,2020(04):66-67.