基于微信小程序的单词查询系统的设计与实现|江阴雨辰互联

2023年6月28日发(作者：)

毕业设计（论文）

题目（中文）：基于微信小程序的单词查询系统的设计与实现

（英文）：Design and Implementation of Word Query System

Based on WeChat Minil Program

学院工学院

专业班级

学生姓名

学号

指导教师

完成日期 2019 年 5月

上海师范大学天华学院本科毕业设计（论文）

诚信声明

本人郑重声明：所呈交的毕业设计（论文），题目《基于微信小程序的单词查询系统的设计与实现》是本人在指导教师的指导下，进行研究工作所取得的成果。对本文的研究做出重要奉献的个人和集体，均已在文中以明确方式注明。除此之外，本设计（论文）不包含任何其他个人或集体已经发表或撰写过的作品成果。本人完全意识到本声明应承担的法律责任。

作者(签名)：

日期：年月日

毕业设计（论文）任务书

（2015 届）

题目（中文）：基于微信小程序的单词查询系统的设计与实现

（英文）：

Design and Implementation of Word Query System Based on

WeChat Mini Program

学院工学院

专业班级

学生姓名

学号

指导教师

学院负责人

(签章)

日期： 2019年月日

一、毕业设计（论文）的主要内容与具体要求（任务及背景、工作环境、成果形式、着重培养的能力、有试验环节的要提出主要技术指标、要求）

（一）、毕业设计（论文）主要内容及主要技术指标、要求

1. 主要内容

本文所研究的小程序单词查询系统是一个简洁有用的单词查询系统，设计风格主要以简洁有用为主，主要想通过设计简洁有用的单词查询系统，帮助用户提高学习单词的兴趣以及单词记忆的效率。本系统由后台服务器、微信小程序单词查询客户端、数据治理系统三部分组成。由于系统的系统模块较多，本文的主要工作为设计及实现微信小程序客户端和后台服务的交互及数据库的设计。

根据以上的需求，整个微信小程序单词查询系统项目采纳

中服务端采纳 ThinkPHP5 和 MySQL 构建

API 发送

B2C

REST

http

的架构，开发方法采纳服务端、客户端、数据治理三端分离的架构模式。其API；客户端采纳微信小程序来实现，通过向服务器

通信恳求猎取数据，来完成自身的功能行为规律；数据治理系统作为治理或者运营人员的数据治理后台，同样通过向服务端恳求数据，实现商品信息、订单数据和状态的治理。

其中论文的主要工作是在微信小程序单词查询客户端系统实现猎取用户息，单词查询、单词语境学习，历史单词，单词复习等模块。本文重点描述了以上几大模块的设计与实现。

2. 主要技术指标、要求

（1）微信小程序；

微信小程序是一种全新的连接用户与服务的方式。小程序为用户提供了触手可及、用完即走的轻便服务，主要体现在用户猎取小程序、使用小程序便利快捷的服务理念上。用户可以在线下扫一扫或者公众号关联小程序码猎取小程序应用，或者可以在微信的发觉页面搜索小程序，由于小程序的整个文件占用内存空间很小，用户下载安装小程序的过程消耗几乎感知不到，所以从用户猎取小程序到点击进入开始使用小程序应用的速度非常快。小程序多入口猎取和触手可及用完即走的使用体验降低了器传播和猎取用户的成本，并且可以实现原生

的基本功能，更加适合单词查询等学习类系统的呈现。

（2）ThinkPHP 。

APP

ThinkPHP 是一个开源的、面向对象的轻量级 PHP 开发框架，ThinkPHP5

主要特性包括：

1、遵循 PSR-2、PSR-4 规范。

2、支持 Composer。

3、支持单元测试。

4、安全机制，详细的日志能帮你轻轻松松的做到问题定位。

5、减少核心依赖，增加了扩展的灵活性，支持命令行指令扩展。

6、具备优秀的性能和

开发工作。

7、惰性加载机制。

8、路由、配置和自动加载的缓存机制。

Think

理系统等等。在项目中包括公共函数文件夹

PHP

Common、系统配置文件夹

REST 支持，支持远程调试，优化了 API

在项目中的配置，一个项目下可以容纳多个子系统，例如前端系统和后端治Conf（其中包含该项目的所有配置信息，包括数据库和系统常量以及模板选择和缓存、调试、日志等等）、源代码储存文件夹

Lib（分数据库表达与处理的

文件夹）、支持多种语言的

的入口文件夹。

（3）MySQL

Model

Lang

文件夹和程序源代码的

文件夹、文件缓存的

Action

Runtime

文件夹以及网页模板的 Tpl 文件夹。此外是 Think PHP

MySQL数据库被非常多的编程人员使用，MySql数据库适用于中小型程序的数据存储，可以和JAVA技术进行很好的搭配使用。MySql数据库非常适合刚学习编程的人进行学习，首先从下载上来说，直接到官方网站或者百度上搜索就能搜索到MySql的下载地址，下载完成之后直接点击安装文件，傻瓜式一键安装完成就可以正常使用了，非常的简洁。MySql语句也是通俗易懂，都有固定的语句格式，建数据库、建表、删除表、添加、修改、删除、查询等语句直接套用格式就可以正常使用。最重要的是JAVA、PHP、ASP等目前主流的编程语言，都支持和MySql数据库的连接，这对于程序中各种数据的相互传输以及存储有很大的帮助。Mysql数据库非常重视对于数据安全的爱护，可以给予程序中的运行的大量数据充分的安全保证。

（二）、毕业设计（论文）的基本要求

求和格式撰写。

专注、独立完成不少于10000字的毕业设计（论文）报告的写作，按照学校规定的论文要求和格式撰写。

3. 毕业设计报告要求包含：

（1）业务流程图

专注、独立完成3000-5000汉字或10000以上字符的《外文科技文献译文》，按照学校规定的译文要开始打开小程序获取用户微信信息是是否首次打开否搜索单词是否查看历史搜索单词否是输入单词查看单词结束

（3）系统架构

本项目在总体架构上主要分为微信小程序客户端、服务器、数据治理三大部分。其中微信小程序客户端部分主要利用微信小程序的“MINA”框架（WXML，WXSS，JavaScript）以及其提供的丰富组件，采纳 MVC

的设计模式来完成客户端界面和功能设计与实现，客户端可与消费者用户直接交互，提供流利的单词查询体验。服务器端主要采纳ThinkPHP5 和 MySQL

构建 REST API 为客户端提供数据接口，其中 ThinkPHP5

作为服务器开发的一个外部框架，可在消费者用户使用微信小程序单词查询系统扫瞄商品、加入单词查询车、下单等的业务规律中，实现客户端与数据库数据恳求以及数据处理的关键部分。除了本地服务器的支持之外，微信小程序的客户端实现的部分功能还需要服务器编写业务规律调用微信服务器的

API

数据库在与

人员的数据治理平台，通过调用

接口来实现。MySQL

MySQL

TP5

API

主要担当数据库的角色，可实现数据存储、数据表设计等功能，

服务器配合下向客户端提供可访问的数据接口。数据治理作为治理或者运营从服务器的数据库中猎取商品信息、订单数据等。系统总体架构图如图 4.1。图4.1 系统总体架构

准时与指导老师进行沟通，按打算完成毕业设计（论文）报告的写作和答辩工作。

二、毕业设计（论文）进度安排

起讫日期

第七学期第14周

第七学期第15-17周

工作内容

接受《毕业设计（论文）任务书》。

备注第七学期第18周

第八学期第1-3周

第八学期第4周

第八学期第5-10周

第八学期第11周

第八学期第12周

调研，完成英文资料翻译。

完成毕业设计（论文）开题报告。

按照毕业设计要求,开展研究，完成设计方案。

毕业设计中期检查。

整理、撰写毕业论文。

答辩资格审查。

答辩。

三、所需的资料和主要参考文献

[1] 雷磊. 微信小程序开发入门与实践[M]. 北京: 清华大学出版社, 2017

[2] 张翔. 微信小程序：分享微信创业 2.0 时代千亿红利[M]. 北京：清华大学出版社,

2017

[3] 方蓓工作室. 微信公众平台开发最佳实践[M]. 北京：机械工业出版社, 2015.5

[4] 李炜康. 基于微信的网上单词查询系统的设计与实现[D]. 南京大学, 2015

[5] 谭楷祥. 基于微信公众平台的点餐系统的设计与实现[D]. 南京大学, 2014

[6] 潘凯华,刘中华等编著.PHP 从入门到精通[M]. 清华大学出版社, 2010

[7] Luke Welling,Laura Thomson. PHP 和 MySQLWeb 开发（原书第 4 版）[M].

北京：机械工业出版社，2009.4

[8] 储广昕. 分析软件开发中数据库设计理论的实践[J]. 信息通信, 2015, 149(5):127-128

[0] 潘凯华,刘中华,杨明,编著.PHP 开发实战 1200 例[M]. 清华大学出版社, 2010

[10] 李尊朝, 苏军等. Web Database Applications with PHP&MySQL [M].

出版社:中国电力出版社, 2007.23-25

[11] 萨师煊, 王珊等. 数据库系统概论（第三版）[M]. 北京:高等教育出版社, 2005.45-187 [12] 张立科. Mysql 数据库通用模块及典型系统开发实力导航[M]. 北京:

人民邮电出版社,2006.10-295

[13] 沈炜, 徐慧,汤倩. Mysql 数据库编程技术与实例[M]. 北京:人民邮电出版社, 2005.

114-226

[14] 冯晓强,程晓昕. 基于 MVC 模式的网上单词查询系统的设计与实现[J].

现代计算机:专业版. 2009(7):177-180

[15] 孔秀丽. 基于微信公众平台的大学生移动商城的构建[J].

科技创业月刊，2015(3):25-26

[16] 于秀山, 于洪敏,著. 软件测试新技术与实践[M]. 电子工业出版社, 2006

[17] 徐兰芳, 彭冰, 编. 数据库设计与实现[M]. 上海交通大学出版社, 2006

[18] 徐其帅. 面向对象软件开发方法的实例分析[D]. 浙江大学, 2008

[19] 孟祥磊. 微信公众平台开发实例教程[M]. 人民邮电出版社, 2017

[20] 李华明. 基于 PHP 和 MySQL 的网上单词查询系统设计与实现[D]. 电子科技大学,

2014

[21] 李蓉. 基于 MVC 模式的 WEB 应用研究[J]. 计算机应用与软件，2015(10):12-13

[22] 赵敬, 李贝. 微信公众平台进展现状初探, 新闻实践, 2013(8):8-10

[23] 金莹. 基于微信小程序的个人电台系统的设计与实现[D]. 吉林大学, 2017

[24] 朱勇贞. 基于微信的电商平台的设计与实现[D]. 东华大学, 2017

[25] 王勇锋. 基于微信公众平台的医药零售模式的研究和实现[D]. 华南理工大学, 2017

[26] 王权. 基于微信开放平台单词查询中心的设计与实现[D]. 吉林大学, 2016

[27] 王昭英. 基于 MVC 设计模式的 thinkphp 框架的研究与应用[D]. 西安建筑科技大学,

2010

[28] 杜江. PHP 与 MySQL 高性能应用开发[M]. 机械工业出版社, 2016

[29] 谢晓萍. 微信力量[M]. 机械工业出版社, 2015

注：1. 本任务书需双面打印，由指导教师填写并经所在学院审核确认；

2. 本任务书按《毕业设计（论文）装订要求》，装订在学生的“毕业设计（论文）”文本内，学院存档；

3. 指导教师、学生可各执一份复印件，供检查论文进度时使用。

上海师范大学天华学院20 届

毕业设计（论文）开题报告

设计（论文）题目

学生姓名

学院

基于微信小程序的单词查询系统的设计与实现

学号

工学院

专业、班级

指导教师姓名

胡声丹

简述课题的作用和意义2.

建议从以下方面填写：1.

国内外的现状和进展趋势等情况(文献综述)，尚待解决的问题；3.

重点介绍完成任务的可能思路、方案和打算；4. (工科类专业需填写)所需的主要仪器和设备等。

1、课题的作用和意义

微信是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序，截止到2016年第二季度，微信已经覆盖中国 94%

以上的智能手机，月活跃用户达到

8.06亿。微信平台提供公众平台、小程序、朋友圈、消息推送等功能，作为连接10亿用户社交平台，微信拥有着无限的可能性。本文主要通过微信提供小程序平台，完成基于微信小程序的单词查询系统的设计与实现。

在这个信息无比发达、充满诱惑的时代，我们如何充分利用移动互联网鼓舞人们把时间充分利用学习上？本文基于对这个问题的基本思考，提出基于微信小程序的单词查询系统设计理念，针对在英文单词学习中普遍存在着缺乏语言环境的情况，以ThinkPHP5

为编程语言，结合MYSQL设计并开发了一个功能比较完善的英文单词综合学习系统。该系统在实现查询单词、学习单词、复习单词等功能的同时，也为学习者提供了丰富的语段，从而制造了良好的语言环境，提高学习英文单词的效率。也意图通过单词学习小程序的设计即实现，呼吁人们不要沉迷于这个花花世界不能自拔，要多利用如此优越的移动互联网环境进行学习。

2、国内外现状和进展趋势，尚待解决的问题

主要有以下几点：

（1）微信小程序单词查询系统针对在英文单词学习中普遍存在着缺乏语言环境的情况，在实现查询单词、学习单词、复习单词等功能的同时，也为学习者提供了丰富的语段，从而制造了良好的语言环境，提高学习英文单词的效率。

（2）本系统设计实现采纳面向对象的开发方法，小程序客户端采纳了全局的 MVC 模式设计控制，页面实现采纳

API

template

发送 http 模板增加模块的复用性，客户端通过向服务器REST

恳求猎取数据。

3、重点介绍完成任务的可能思路、方案和打算

根据以上的需求，整个微信小程序单词查询系统项目采纳

中服务端采纳 ThinkPHP5 和 MySQL 构建

API 发送

B2C

REST

http

的架构，开发方法采纳服务端、客户端、数据治理三端分离的架构模式。其API；客户端采纳微信小程序来实现，通过向服务器

4、所需的资料和主要参考文献

[1]雷磊. 微信小程序开发入门与实践[M]. 北京: 清华大学出版社, 2017

[2]张翔. 微信小程序：分享微信创业 2.0 时代千亿红利[M]. 北京：清华大学出版社,

2017

[3]方蓓工作室. 微信公众平台开发最佳实践[M]. 北京：机械工业出版社, 2015.5

[4]李炜康. 基于微信的网上单词查询系统的设计与实现[D]. 南京大学, 2015

[5]谭楷祥. 基于微信公众平台的点餐系统的设计与实现[D]. 南京大学, 2014

[6]潘凯华,刘中华等编著.PHP 从入门到精通[M]. 清华大学出版社, 2010

[7]Luke Welling,Laura Thomson. PHP 和 MySQLWeb 开发（原书第 4 版）[M].

北京：机械工业出版社，2009.4

[8]储广昕. 分析软件开发中数据库设计理论的实践[J]. 信息通信, 2015, 149(5):127-128 [0]潘凯华,刘中华,杨明,编著.PHP 开发实战 1200 例[M]. 清华大学出版社, 2010

[10]李尊朝, 苏军等. Web Database Applications with PHP&MySQL [M].

出版社:中国电力出版社, 2007.23-25

[11]萨师煊, 王珊等. 数据库系统概论（第三版）[M]. 北京:高等教育出版社, 2005.45-187

[12]张立科. Mysql 数据库通用模块及典型系统开发实力导航[M]. 北京:

人民邮电出版社,2006.10-295

[13]沈炜, 徐慧,汤倩. Mysql 数据库编程技术与实例[M]. 北京:人民邮电出版社, 2005.

114-226

[14]冯晓强,程晓昕. 基于 MVC 模式的网上单词查询系统的设计与实现[J].

现代计算机:专业版. 2009(7):177-180

[15]孔秀丽. 基于微信公众平台的大学生移动商城的构建[J].

科技创业月刊，2015(3):25-26

学生姓名（签名）

日期：年月日

指导教师评语：（建议填写内容：对学生提出的方案给出评语，明确是否同意开题，提出学生完成上述任务的建议、注意事项等）

指导教师 _____________（签名）

日期：年月日

注：1. 本开题报告，须双面打印。由学生填写并经指导老师审核、评价； 2. 本开题报告应按《毕业设计（论文）装订要求》，装订在“毕业设计（论文）”文本内，学院存档。

1 绪论

基于微信小程序客户端的网上单词查询系统是web2.0与微信小程序相结合的共同产出物，它集合了微信小程序开发、ThinkPHP5

服务器开发、数据库、网络等多种当下的流行技术于一体，用户可以通过扫一扫小程序码快速查询单词，背单词，充分利用碎片化时间来达到学单词记单词的目的。摘要

本系统主要由微信小程序客户端、服务器、数据治理端构成，服务器采纳了

ThinkPHP5 框架技术，客户端采纳了微信小程序的 MINA 框架，数据治理端采纳CMS

框架。客户端的页面实现通过网络与服务器 REST API 接口通信猎取 MySQL

数据。重点参加了微信小程序单词查询系统、服务器以及数据库的设计、开发、测试工作。在系统的设计与实现过程中，对客户端的代码进行了全局的 MVC 模式设计控制，采纳 template

模板增加代码的复用性，并创建客户端用户的 token

治理机制进行用户身份验证与权限分级。本文重点阐述了基于微信小程序的单词查询系统设计和实现过程。

本系统在实现查询单词、学习单词、复习单词等功能的同时，也为学习者提供了丰富的语段，从而制造了良好的语言环境，提高学习英文单词的效率。

本系统设计的主要意义在于为用户制造了良好的语言环境，提高学习英文单词的效率。通过单词学习小程序的设计即实现，呼吁人们不要沉迷于这个花花世界不能自拔，要多利用如此优越的移动互联网环境进行学习。

关键词：微信小程序，单词查询系统，O2O Abstract

Since the 21st century, with the rapid development of Internet technology, people's

lifestyle is undergoing tremendous changes. Social network, as a social network in the

Internet, plays an increasingly important role in people's lives with the help of many

technological enterprises. Wechat is a free application offering instant messaging services

for smart terminals launched by Tencent on January 21, 2011. As of the second quarter of

2016, Wechat has covered more than 94% of smartphones in China, with an active

monthly subscriber of 806 million. Wechat platform provides public platform, small

programs, circle of friends, news push and other functions. As a social platform connecting

1 billion users, Wechat has unlimited possibilities. This paper mainly completes the design

and implementation of word query system based on Wechat widget by providing a widget

platform.

This system is mainly composed of the WeChat Mini Program client, server and data

management. The server adopts ThinkPHP5 framework technology, the client adopts the

MINA framework of the WeChat Mini Program, and the data management adopts the

CMS framework. The client's page implementation communicates with the server REST

API interface to obtain MySQL data. I have participated in the design, development, and

testing of online shopping system clients, servers, and databases.

In the process of designing and implementing the system, the client's code is subjected

to the global MVC pattern design control, the template is used to incr ease the reusability

of the code, and the client user's token management mechanism is created for user

authentication and permission grading. This article focuses on the design and implementation of the six modules of display product information, product classification,

shopping cart, order payment, personal information management and database design.

Keyword: WeChat Mini Program,Shopping system,O2O 目录

1 绪论 .......................................................................................................................................................................... 1

1.1项目研究的背景和意义 ............................................................................................................................... 1

1.2论文的主要研究工作 ................................................................................................................................... 1

1.3论文的特色 ................................................................................................................................................... 2

1.4论文结构 ....................................................................................................................................................... 2

1.5本章小结 ....................................................................................................................................................... 3

2 系统相关技术研究 .................................................................................................................................................. 4

2.1 微信小程序 ................................................................................................................................................... 4

2.2 ThinkPHP 5 框架 ......................................................................................................................................... 6

2.3 MySQL 数据库 ............................................................................................................................................. 6

2.4本章小结 ....................................................................................................................................................... 7

3 系统分析 .................................................................................................................................................................. 8

3.1系统业务流程分析 ....................................................................................................................................... 8

3.2系统数据流分析 ......................................................................................................................................... 10

3.3本章小结 ..................................................................................................................................................... 11

4 系统设计与实现 .................................................................................................................................................... 12

4.1项目总体架构 ............................................................................................................................................. 12

4.2项目开发方法及环境部署 ......................................................................................................................... 13

4.3微信小程序单词查询系统的数据库设计 ................................................................................................. 13

4.4微信小程序单词查询系统设计与实现 ..................................................................................................... 21

4.5本章小结 ..................................................................................................................................................... 39

5 系统测试 .............................................................................................................................................................. 40

5.1 程序测试 ..................................................................................................................................................... 40

5.2 程序测试相关内容 ..................................................................................................................................... 41

5.3 测试方案 ..................................................................................................................................................... 43

5.4 功能测试 ..................................................................................................................................................... 43

5.5本章小结 ..................................................................................................................................................... 44 6 总结与展望 .......................................................................................................................................................... 45

6.1总结 ............................................................................................................................................................. 45

6.2展望 ............................................................................................................................................................. 46

参考文献 .................................................................................................................................................................... 47

致谢 ............................................................................................................................................................................ 49

1.1项目研究的背景和意义

微信是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序，截止到2016年第二季度，微信已经覆盖中国 94% 以上的智能手机，月活跃用户达到

在这个信息无比发达、充满诱惑的时代，我们如何充分利用移动互联网鼓舞人们把时间充分利用学习上。本文基于对这个问题的基本思考，提出基于微信小程序的单词查询系统设计理念，针对在英文单词学习中普遍存在着缺乏语言环境的情况，以ThinkPHP5

1.2论文的主要研究工作

根据以上的需求，整个微信小程序单词查询系统项目采纳

的架构，开发方法采纳服务端、客户端、数据治理三端分离的架构模式。其中服务端采纳

ThinkPHP5 和 MySQL 构建 REST API；客户端采纳微信小程序来实现，通过向服务器 API 发送

http

其中论文的主要工作是在微信小程序单词查询客户端系统实现猎取用户息，单词查询、单词B2C 语境学习，历史单词，单词复习等模块。本文重点描述了以上几大模块的设计与实现。

1.3论文的特色

主要有以下几点：

（2）本系统设计实现采纳面向对象的开发方法，小程序客户端采纳了全局的 MVC

模式设计控制，页面实现采纳 template 模板增加模块的复用性，客户端通过向服务器REST API

发送 http 恳求猎取数据。

1.4论文结构

第

章：引言。从本文主要研究内容出发，阐述了项目的背景及意义，结合分析国内外的现状以及目前单词学些领域面临的机遇和挑战，给出项目概述以及本文的主要工作和本文组织结构。

第

章：系统架构和关键技术。主要介绍了项目总的系统架构和开发环境，并对开发过程中所需的关键技术做了简要介绍。

第 3 章：微信小程序单词查询系统的需求分析。进行了系统的业务及数据流分析，

将系统分成多个不同的功能模块进行 UML 分析，并描述每一模块需要实现的功能。

第

章：微信小程序网上单词查询系统的详细设计与功能实现。介绍了项目的总体架构以及开发环境，数据库的设计与实现，单词查询系统开发过程中客户端与服务器的交互原理、客户端的 MVC

模式设计以及各个模块设计与实现的详细介绍。

第 5 章：单词查询系统软件测试与分析。结合 postman

测试工具和微信开发者工具对系统各个模块的进行测试，使系统的功能和性能达到运行要求。

第 6 章：总结与展望。结合本论文已完成的各项工作进行总结，并提出需要注意的问题。

1.5本章小结

本章为引言部分。1.1 节中主要阐述了微信小程序单词查询系统的项目背景及其意义；1.2 小节研究国内相关系统的研究现状，体现了微信小程序单词查询系统面向中小型商店对比传统线上单词查询系统的优势；1.3

小节总结了论文的主要特色；1.5

小节列出了论文的撰写组织结构，进一步明确了本文的组织框架和系统模块实现设计打算。

小节中明确了本文在项目中的主要研究工作；1.4 2 系统相关技术研究

本章主要安介绍了本微信小程序单词查询系统在其开发过程中所用到的关键技术，其中包括微信小程序的 MINA 框架、ThinkPHP5 框架、REST API 的构造、微信支付技术、

MySQL

数据库五部分。本课题的设计与实现主要就是建立在这些理论知识的掌握和应用之上。

2.1 微信小程序

的基本功能，更加适合单词查询等学习类系统的呈现。

MINA 框架是微信团队为小程序开发提供的框架名字，通过下面的 MINA

APP

框架图我们可以看到三大部分：规律层、视图层和系统层。如图2.1。

图 2.1 微信 MINA 框架架构图

（1）规律层

规律层是 MINA

的服务中心，由微信客户端启用异步线程单独加载运行。页面渲染所需的数据、页面交互处理规律都在规律层中实现。小程序中的各个页面可以通过规律层的函数实现数据治理、网络通信、应用生命周期治理和页面路由。其中，小程序中的每个页面都有与其业务规律相对应的生命周期，这个由页面规律层的 page()函数实现，生命周期控制中主要包括以下方法：onLoad

方法监听页面加载，onShow 方法监听页面的显示，onReady 方法监听页面初次渲染完成，onHide

方法监听页面的隐蔽，onUnload

方法监听页面卸载，不同的业务要在不同的生命周期方法函数内实现。

微信小程序开发框架的规律层是由 JavaScript 实现。在 JavaScript

的基础上，微信团队针对小程序项目做了一些适当的修改，以便提高开发小程序的效率。主要修改包括：增加 app 和 page 方法，进行程序和页面的注册；提供丰富的

API,如扫一扫、支付等微信特有的能力；每个页面有独立的作用域，并提供模块化能力等。

规律层的实现就由各个页面的.js 脚本文件负责，微信小程序的规律层响应视图层的事件处理，并将处理结果返回到视图层。但由于小程序并非运行在扫瞄器中，所以JavaScript

document、window 等。

（2）视图层

视图层提供了一套类似 HTML 标签的语言以及一系列基础组件。开发者使用WXML

文件来搭建页面的基础视图结构，使用

文件来控制页面的展现样式。视图层就是页面.wxml

WXSS

文件与.wxss

在 Web 中的一些能力无法使用，如

文件的集合，由组件来进行设计展示。微信小程序在规律层将数据进行处理后发送给视图层展现出来，同时监听视图层的事件。数据在视图层借助组件的设计展现，组件是视图的基本组成单元。

（3）系统层

系统层主要包括临时数据或缓存、文件存储、网络存储与调用。例如页面临时数据缓存需要在 page()中使用 setData

API 函数将数据从规律层发送到视图层。文件存储和网络存储与调用则需要调用相应的微信

接口来实现，如 t

json

接口可以进行 http 网络恳求，通过定义恳求的

success 和 fail url、恳求参数、恳求方法以配置，将恳求结果分为

两种方式处理。除此之外，项目根目录下的三个、、

文件是全局性的系统文件，负责小程序项目的全局公共样式、小程序公共规律和小程序公共配置的实现。

2.2 ThinkPHP 5 框架

ThinkPHP 是一个开源的、面向对象的轻量级 PHP 开发框架，ThinkPHP5 主要特性包括：

1、遵循 PSR-2、PSR-4 规范。

2、支持 Composer。

3、支持单元测试。

4、安全机制，详细的日志能帮你轻轻松松的做到问题定位。

5、减少核心依赖，增加了扩展的灵活性，支持命令行指令扩展。

6、具备优秀的性能和 REST 支持，支持远程调试，优化了 API 开发工作。 7、惰性加载机制。

8、路由、配置和自动加载的缓存机制。

Think PHP

在项目中的配置，一个项目下可以容纳多个子系统，例如前端系统和后端治理系统等等。在项目中包括公共函数文件夹 Common、系统配置文件夹

Conf（其中包含该项目的所有配置信息，包括数据库和系统常量以及模板选择和缓存、调试、日志等等）、源代码储存文件夹 Lib（分数据库表达与处理的 Model 文件夹和程序源代码的 Action

文件夹）、支持多种语言的 Lang 文件夹、文件缓存的 Runtime 文件夹以及网页模板的 Tpl

文件夹。此外是 Think PHP 的入口文件夹。

2.3 MySQL 数据库

2.4本章小结

在本章中，主要研究了本文工作中主要用到的微信小程序框架关键技术阐述了选择 MySQ L

作为项目的数据库的优势以及其系统架构介绍。这些都是本文在项目中所做工作的关键理论基础。 3 系统分析

软件工程活动是“生产一个最终满足需求且达到工程目标的软件产品所需要的步骤”。软件工程包括了需求、设计、编码实现、测试等内容，需求分析作为软件工程中重要的一步，主要作用是对用户想要解决的问题和想法进行详细的分析，分层次的分析问题，从输入、问题处理到结果的输出，准确的表述系统一定完成那些工作，对系统的的分析形成完整具体的要求。本章正是通过系统需求分析和 UML 用例图模型两方面研究了微信小程序小程序单词查询系统的设计。

3.1系统业务流程分析

本文在项目系统中的主要工作是完成小程序单词查询系统客户端、服务器和数据库的开发和设计。在微信小程序单词查询系统客户端部分，消费者用户可以进入到微信小程序单词查询系统客户端，进行商品扫瞄、商品分类检索、添加单词查询车，治理单词查询车和个人信息，下单等主要网上单词查询操作。在数据库部分，通过合理的设计，使各个数据表之间拥有可靠的关联关系，并具备一定的数据库可扩展性。

开始打开小程序获取用户微信信息是是否首次打开否搜索单词是否查看历史搜索单词否是输入单词查看单词结束图 3. 1 小程序客户端系统的业务流程图

微信小程序客户端系统的单词查询流程图 3.1

所示，当用户猎取到小程序后，可以选择猎取是否同意猎取个人信息，也可以扫瞄小程序的各个页面或者商品。当用户在扫瞄和分类检索商品的过程中，遇到符合自己心意的商品时，则可以选择把商品加到单词查询车，

当用户结束挑选商品后，可以进入到单词查询车页面进行结算商品，结算商品时，用户若为未登录状态，需要返回第一步同意微信猎取个人信息，并补充具体的个人信息（如地址、电话等），此时，则可以进行下单，进入到支付界面进行订单结算，根据不同的支付结果生成不同的历史订单信息。至此单词查询流程结束。

3.3 本章小结

本章中主要对微信小程序单词查询系统客户端的功能进行了需求分析，其中

3.1、3.2小节是对小程序客户端系统的业务流程图和整个项目的数据流和整体的功能结构进行了分析，随后在此基础上，我们对小程序客户端单词查询系统的主要功能模块进行了功能需求分析。这为接下来的小程序客户端的功能设计和实现做好了基础。 4 系统设计与实现

3.2系统数据流分析

本微信小程序单词查询工具项目的数据主要包括用户和单词数据。用户在小程序客户端界面发生的交互动作是业务的数据来源，根据用户行为和查询系统的架构设计分析，业务系统的数据流处理主要包括客户端与本地缓存、客户端与系统服务器两部分。

本地缓存用户小程序客户端数据库服务器

图 3.2 系统业务数据流图

如上图 3.2

统业务数据流图所示，用户可以通过微信小程序待查询系统客户端携带个人信息恳求单词信息。小程序客户端接收用户的行为恳求，在控制层进行相应的业务规律处理，并将处理结果以页面展示的方式返回给用户，如果用户恳求的数据涉及到数据库的查询和更新，客户端会将用户需求的恳求参数通过模型层与服务器通信，在服务器部分进行数据的校验和处理，如果用户的恳求合法则会在数据库中进行相应的响应操作，服务器处理完毕后会将结果返回给客户端。在系统设计中，由于查询历史的数据量较小，与查询历史相关的数据存放在小程序本地缓存中，可以为用户提供更快速的数据反馈效果。系统功能总体功能分析

根据分析用户查询单词的基本需求，对比分析单词查询 APP 和 PC

单词查询网站上的主要功能模块，本着小程序开发设计的三大原则：在功能方面，小程序要比原生 APP 更单一；设计方面，小程序要比原生 APP 更简洁；在使用场景方面，小程序应比原生 APP

更明确。基于小程序的主要定位，小程序应为用户提供更加主题明确的服务，尽量减少与查询无关的不必要的功能模块，为用户提供用完即走、便利快捷的使用体验。根据以上分析，本小程序系统的业务规律模块分为用户登录、单词搜索、历史记录、查询结果功能模块，总体的系统功能模块如下图所示，本章将对各个功能模块进行详细的需求分析。

小程序单词查询系统用户登录单词搜索历史记录查询结果

图 3.3 小程序客户端整体功能结构图

从图 3.3

功能结构图中，我们可以大致总结出小程序客户端单词查询系统的几个主要功能，包括用户用户登录、单词搜索、历史记录、查询结果四大模块，本文也主要是围围着这些功能模块的设计和实现而展开。

4.1项目总体架构

的设计模式来完成客户端界面和功能设计与实现，客户端可与消费者用户直接交互，提供流利的单词查询体验。服务器端主要采纳ThinkPHP5 和 MySQL 构建 REST API 为客户端提供数据接口，其中 ThinkPHP5

作为服务器开发的一个外部框架，可在消费者用户使用微信小程序单词查询系统扫瞄商品、加入单词查询车、下单等的业务规律中，实现客户端与数据库数据恳求以及数据处理的关键部分。除了本地服务器的支持之外，微信小程序的客户端实现的部分功能还需要服务器编写业务规律调用微信服务器的 API

MySQL

接口来实现。MySQL

数据库在与 TP5 主要担当数据库的角色，可实现数据存储、数据表设计等功能，

服务器配合下向客户端提供可访问的数据接口。数据治理作为治理或者运营人员的数据治理平台，通过调用 API 从服务器的数据库中猎取商品信息、订单数据等。系统总体架构图如图 4.1。

图 4.1 系统总体架构图 4.2项目开发方法及环境部署

项目客户端的开发过程采纳面向对象的开发方法，充分利用面向对象方法中的封装性、继承性和多态性的特点，将系统划分为相对独立的多个模块，每个模块具有自己的功能设计和实现要求，在开发过程中可以分模块集中开发实现，然后最终再将各个模块组织和集成，这样使得整个系统的结构层次分明，也便于开发工作的治理。

面向对象的软件开发方法是解决软件设计过程中所出现基础性问题的的解决方案,

幸免在开发中做重复的工作。进行可重复使用性设计,在软件的总体框架中可以将同一个功能模块的不同业务部分的应用通过面向对象的设计,以及模块的复用来实现重复利用,减少开发得重复工作,提高开发效率。例如分析系统中通用的处理方法，将其封装设计成相对独立可重复使用的代码作为基类，当功能在系统中多个模块应用时,直接调用基类就可以。这样会减少因为重复功能的代码的复制修改而带来的代码质量问题，同时也幸免了代码的冗余。从系统的角度进行分析,利用对象的单位作为基本构造单元,可以使软件系统变得模块化、可复用性能好、易于维护，同时便于优化软件结构和质量。

项目的基础环境基于

XAMPP（Apache+MySQL+PHP+PERL）一个功能强大的建站集成软件包，本项目采纳的是

XAMPP 的 7.1.12 版本 xampp-win32-7.1.12-0-VC14-installer 安装包，选择安装的组件有

PHP、MySQL 和 Apache 服务器。项目选择ThinkPHP 5 作为 web 开发框架，在 Git 仓库中下载

ThinkPHP 5 5.0.7 版本的应用项目和核心框架，与XAMPP 集成作为主要的业务规律和 API

的开发语言和框架。在开发工具选择上，单词查询系统客户端采纳的是微信 web

开发者工具来编写微信小程序单词查询系统的主界面，采纳PHPstorm 来开发服务器的 PHP API

代码，使用 PostMan 作为服务器接口的测试工具，选用 Navicat 连接数据库作为 MySQL

的可视化治理工具。

4.3微信小程序单词查询系统的数据库设计

数据库的设计是软件系统开发和建设中最基础和最核心的部分，良好的数据库设计可以让系统具有更快更好的运行速度。目前关系型数据库是我国中小型系统的主流选择。关系型数据库的设计要有严格的设计规范，对软件系统中的各类数据进行有效的组织存储和维护，为软件系统运行中的数据需求提供高效准确的处理速度。在实现这个目标的过程中数据库的规范设计就显得尤为重要，保持数据存储的一致性和完整性是提高数据存储和处理效率的重要保障之一。在数据库设计时，不仅需要满足数据库的设计准则，还需要结合具体的业务知识分析出系统中的不同实体之间的关系，并确定这些实体之间的关系类型。

本文根据小程序单词查询系统的功能需求分析，按照规范设计的要求，将对数据库设计的概念结构设计、规律结构设计、数据库配置与实施进行详细分析与设计。

4.3.1数据库概念结构设计

数据库的概念结构设计的过程是将用户的需求综合抽象为一个信息结构的过程，概念结构是各类数据模型的共同基础。E-R 图是描述概念模型的有效工具。E-R

图由实体、属性、联络三个要素组成，例如本系统中单词信息就是一个实体，它包含描述单词的众多属性，联络表示实体之间的关系，实体与实体之间的联络可以分为三种：一对一、一对多、多对多。

本文从系统的业务和功能模块分析确定系统需要的实体集，以及实体与实体之间的联络。小程序单词查询系统中关键的实体信息如下：

（1）单词查询系统的单词信息实体图的属性包含单词

id、单词英文拼写、单词音标、单词中文翻译、单词属性、单词短语㩐，如图 4.2 所示：

图 4.2 单词信息实体图

（2）单词查询系统的用户信息实体图的属性主要包含用户 id，openid，用户昵称等信息，

如图 4.3 所示：

图 4.3 用户信息实体图

（3）单词查询系统的单词音标信息实体图的属性主要包含音标

id，音标类别、音标拼写等信息，如图 4.4 所示：

图 4.4 音标信息实体图

（4）单词查询系统的单词属性信息实体图的属性主要包含属性

id，属性类别、中文翻译等信息，如图 4.5 所示：

图 4.5 属性信息实体

（5）单词查询系统的单词短语信息实体图的属性主要包含短语

id，英文短语、中文翻译等信息，如图 4.6 所示：

图 4.6 短语信息实体图

由系统的实体以及实体与实体之间的联络可得出系统 E-R 图，小程序单词查询系统的总体 E-R 图如图 4.7 所示：

图 4.7 系统总体 E-R 图

在概念模型的设计中，采纳 E-R 图来表示系统需求所抽象成的信息结构，其中用矩形表示 E-R 图中的实体，椭圆形表示属性，菱形表示联络。一个单词信息表对应多个属性。

4.3.2数据库规律结构设计

根据概念结构设计中的 E-R 图进行数据库的规章转换，将 E-R

图实体和实体间的联络转换为关系模式，并确定关系模式中的属性和码。实体中的属性与关系模式中的属性相对应，实体中的码与关系中的码相对应。本系统最终的数据模型以数据表的形式展现，

具体说明白数据表中属性名称、主键、含义、约束条件，是否为空等信息，系统中主要的数据库表设计详细如下：（1）用户信息表 user 基本数据表，如表 4.8。

表 4.1 专题商品信息表（user）

字段名类型

大小

name

openid

是否为空

int

字段描述

否

是

用户id

用户昵称

openid

注册时间

拓展备注

更新时间

vrachar

timestamp

varchar

timestamp

255

create_at

remark

update_at

（2）用户信息表 user 基本数据表，如表 4.9。

表 4.2 单词信息表（user）

字段名

类型

int

大小是否为空

255

否

是

字段描述

单词主键

英文单词

单词音标

单词属性

单词短语

word

voice_id

property

pharse

varchar

（3）单词音标表voice基本数据表，如表 4.10。

表 4.3 单词音标信息表（user）

字段名

cat

类型

int

大小是否为空

255

字段描述

否

主题外键

否类别 varchar

（4）单词属性表voice基本数据表，如表 4.11。

表 4.4 单词属性信息表（user）

字段名类型

int

大小是否为空

255

字段描述

cat

void

否

主题外键

否

varchar

类别

英标拼写

255

（5）单词短语表 pharse 基本数据表，如表 4.12。

表 4.5

单词短语信息表（user）

字段名

pharse

translate

int

类型

varchar

大小

255

否

是否为空

否

单词短语id

字段描述

英文短语

中文翻译 4.3.3数据库的配置与实施

本文结合本微信小程序单词查询系统业务的实际情况，在项目开发环境中建立

数据库，并使用 Navicat 图形化治理数据库，开源数据库

MySQL

作为关系型数据库系统可实现网络化，满足本系统的实际需要，并且 PHP 中所有函数对 MySQL

数据库给予支持。

由数据库的概念结构和规律结构分析，根据数据表设计进行

数据库的设计与实现。建立数据库为translate，以

张表，创建与数据表相对应的

语句，并输入了相应表的测试数据。在项目服务器中建立服务器连接数据库的配置文件

，其中主要的配置参数如下：

'type' => 'mysql', //数据库类型

root

MySQL

SQL

为用户名，在本数据库x建立了

'hostname' => '127.0.0.1', // 服务器地址

'database' => translate, // 数据库名

'username'

'password'

=> 'root', // 用户名

=> '123456', // 密码

// 端口

// 数据库编码默认采

SQL 日志记录，

ORM（Object

'hostport' => '3306',

'charset' => 'utf8',

通过以上配置实现服务器与数据库的通信，并在测试环境中中开启

便于查看数据库的性能表现和测试记录。服务器访问数据库的数据则采纳

Relational Mapping）对象-关系映射的方式实现。ORM

是为了解决面向对象开发方法与关系型数据库的映射而产生的，实现了对象型数据和关系型数据的相互转化，具有更高的开发灵活性。相比原生 SQL 简洁的增删改查操作，ORM

利用模型对象可以实现更复杂的业务规律，将访问数据库的代码封装到模型类中，模型类的命名与数据库中的表名一致，然后在服务器的控制器层调用模型类来支持控制器层中的业务规律。

4.4微信小程序单词查询系统设计与实现

用户在小程序单词查询系统客户端来完成单词的查询和单词的复习行为。这也是本文所要实现的主要功能。在用户完成这一系类的行为中，除了要有微信小程序中 MINA

框架编写美观大方的界面设计外，还需要微信小程序单词查询系统客户端与本地服务器和微信服务器中 API 规律接口的支持，将 API

设计嵌入到界面的编写中。此外用户在微信小程序单词查询系统客户端购买商品过程中产生的数据还需要通过服务器与 MySQL 数据库交互。在小程序客户端单词查询系统的代码实现中，遵循

MVC 设计模式思想，.js 文件充当控制器的角色，

文件是模型层的角色，在此文件中会编写调用本地服务器接口的代码，最终的.wxml 文件和.wxss

文件相当于

中的视图层。基于此结构编写微信小程序单词查询系统客户端的界面和功能模块。

本小节以实现客户端为目标综合介绍了客户端以及和服务器交互的代码实现原理，重点完成了单词查询系统的详细设计和实现。在设计和实现过程中，充分利用于原型图、时序图、流程图和代码分析来表述设计实现的过程，并展示了程序的运行效果图。

4.4.1客户端与服务器的交互设计

小程序单词查询系统客户端的页面效果实现需要恳求服务器的数据，除此之外，客户端页面接收用户的动作时，也需要恳求服务器的的数据更新页面数据，这个过程需要客户端的.wxml

文件、.js 文件和服务器 AP I三者的配合实现，其具体的实现原理如图 4.13。

MVC

图 4.8 客户端与服务器交互原理图

当小程序客户端页面显示时需要恳求服务器的数据，此时，客户端的 js

类文件（包括小程序模型层、控制层以及基类文件）会发送 HTTP 恳求到服务器 API

恳求猎取服务器和数据库的数据，服务器接到恳求后会调用相关的方法类返回处理结果，此时服务器会先将结果返回到 js 文件的恳求函数中，在 js 文件中通过 setData

数据绑定的方式将数据返回到 wxml 文件，此时视图层才能将猎取到数据的显示到页面。

上述的是静态的数据显示的服务器恳求过程，当用户在客户端页面发生交互动作时，则需要控制器层和服务器的代码作出相应的业务规律推断再返回结果。这个客户端页面动态的恳求服务器数据的过程主要分为两步：猎取用户动作和响应用户动作。猎取到用户的动作需要

文件标签自定义属性数据，当监听到用户的动作时，比如点击事件，视图层会通过

事件的方式将标签自定义属性数据回传到控制层和模型层。接下来由

wxml

event

文件响应处理接收到的事件恳求，通过标签自定义属性数据调用相应的方法完成业务规律的处理，需要恳求服务器数据的，则需要发送

API，当服务器处理完成后返回处理结果到

http 恳求到服务器

js 文件，最终重新数据绑定服务器数据到视图层更新显示页面。

4.4.2单词查询系统的设计实现

（1）单词查询系统首页

如图4.14，单词查询系统首页主要由词典图片和文本输入框组成，系统采纳扁平化设计风格，整体上趋于简洁舒适，布局上采纳黄金分割比例达到视觉上的舒适，页面采纳模块式开发，增加页面元素的复用性。

图4.9 单词查询首页

用户使用单词查询系统的程序时序图，如图 4.15：图 4.10 使用单词查询系统的程序时序图

用户在登陆系统是，由微信用户授权登录单词查询系统，用户授权后，系统记录微信用户信息。

nLaunch: function () {

// 展示本地存储能力

var logs = rageSync('logs') || []

t(())

rageSync('logs', logs)

// 登录

({

success: res => {

// 发送到后台换取 openId, sessionKey, unionId

} })

// 猎取用户信息

ting({

success: res => {

if (tting['fo']) {

// 已经授权，可以直接调用 getUserInfo 猎取头像昵称，不会弹框

rInfo({

success: res => {

// 可以将 res 发送给后台解码出 unionId

fo = fo

// 由于 getUserInfo 是网络恳求，可能会在之后才返回

// 所以此处加入 callback 以防止这种情况

if (foReadyCallback) {

foReadyCallback(res)

}

})

}

})

globalData: {

userInfo: null

}

})

{

"description": "项目配置文件",

"packOptions": {

"ignore": []

}, "setting": {

"urlCheck": true,

"es6": true,

"postcss": true,

"minified": true,

"newFeature": true,

"autoAudits": false

"compileType": "miniprogram",

"libVersion": "2.6.2",

"appid": "wx1f52af26da1b8479",

"projectname": "dict",

"debugOptions": {

"hidedInDevtools": []

"isGameTourist": false,

"condition": {

"search": {

"current": -1,

"list": []

"conversation": {

"current": -1,

"list": []

"plugin": {

"current": -1,

"list": []

"game": {

"currentL": -1, "list": []

"miniprogram": {

"current": 1,

"list": [

{

"id": -1,

"name": "我的",

"pathName": "pages/me/index",

"query": "",

"scene": null

{

"id": -1,

"name": "查词",

"pathName": "pages/query/index",

"scene": null

}

]

}

（1）单词查询系统查询页

如图4.16，单词查询系统单词查询页主要由文本输入框组成，连续简洁舒适的风格，用户输入需要查询的单词，点击查询进行单词查询。

发布者：admin，转转请注明出处：http://www.yc00.com/web/1687892585a54487.html

基于微信小程序的单词查询系统的设计与实现

发表回复

评论列表（0条）

联系我们

400-800-8888

基于微信小程序的单词查询系统的设计与实现

相关推荐

发表回复

评论列表（0条）

联系我们

400-800-8888