微信小程序-英语单词测试.pdf

《微信小程序-英语单词测试.pdf》由会员分享，可在线阅读，更多相关《微信小程序-英语单词测试.pdf（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、程序设计综合实验 程序设计综合实验 微信小程序-英语单词测试 程序设计综合实验 微信小程序-英语单词测试 项目要求 设计实现一个微信小程序，拥有组合单元进行单词测试，打卡 记录，历史查询，排行等功能。 程序设计综合实验微信小程序-英语单词测试 开发平台 PyCharm 微信web开发者工具 编程语言 前端：WXML,WXSS,JS 后台：Python 程序设计综合实验 目录 背景知识 服务器域名配置 概要设计 小程序前端设计 详细设计 https请求 数据库操作 后台数据库搭建MySQLdb库 前后端交互 界面实现 提交审核和发布 小程序代码构成 程序设计综合实验 背景知识 a 程序设计综合实

2、验 小程序代码构成 微信小程序-英语单词测试 通过开发者工具快速创建了一个 QuickStart 项目。 这个项目里自动生成了不同类型的文件: json 后缀的 JSON 配置文件 wxml 后缀的 WXML 模板文件 wxss 后缀的 WXSS 样式文件 js 后缀的 JS 脚本逻辑文件 程序设计综合实验 JSON 配置 微信小程序-英语单词测试 app.json 是对当前小程序的全局配 置，包括了小程序的所有页面路径、界 面表现、网络超时时间、底部 tab 等 pages字段 用于描述当前小程序 所有页面路径，让微信客户端知道当前小 程序页面定义在哪个目录 window字段 小程序所有页面

3、的 顶部背景颜色，文字颜色 程序设计综合实验 https请求 微信小程序-英语单词测试 HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer）， 是以安全为目标的HTTP通道，简单讲就 是HTTP的安全版。 小程序基于安全考虑，网络请求要求 发送https请求，端口必须是默认的443 端口 程序设计综合实验 MySQLdb库 微信小程序-英语单词测试 MySQLdb 是用于Python链接MySQL 数据库的接口。安装方式如下： #!/usr/bin/python # -*- coding: UTF-8 -*- import M

4、ySQLdb # 打开数据库连接打开数据库连接 db = MySQLdb.connect(localhost, testuser, test123, TESTDB, charset=utf8 ) # 使用使用cursor()方法获取操作游标方法获取操作游标 cursor = db.cursor() # 使用使用execute方法执行方法执行SQL语句语句 cursor.execute(SELECT VERSION() # 使用使用 fetchone() 方法获取一条数据方法获取一条数据 data = cursor.fetchone() print Database version : %s %

5、 data # 关闭数据库连接关闭数据库连接 db.close() pip install MySQL-python 安装前确保系统安装了MySQL数据库， 安装成功后可通过python连接数据库，进 行增删改查等操作。 程序设计综合实验 概要设计 b 程序设计综合实验 服务器域名配置 微信小程序-英语单词测试 每个微信小程序需要事先设置一个通讯域名，小程序可以跟指定的域名与进行 网络通信。包括普通 HTTPS 请求（request）、上传文件（uploadFile）、下载文 件（downloadFile) 和 WebSocket 通信（connectSocket） 服务器域名在 小程序后台-

6、设置-开发设置-服务器域名 中进行配置，配置时需 要注意： 域名只支持 https 和 wss 协议 域名不能使用 IP 地址或 localhost 域名必须经过 ICP 备案 出于安全考虑， 不能被配置为服务器域名 程序设计综合实验 服务器域名配置 微信小程序-英语单词测试 程序设计综合实验 小程序前端工作流程 微信小程序-英语单词测试 程序设计综合实验 小程序后台工作流程 微信小程序-英语单词测试 程序设计综合实验 提交审核与发布 微信小程序-英语单词测试 登录 后台 - 开发管理 - 开发版本 选择上传版本 按照页面提示，填写相关的信息 提交审核 审核通过后管理员的微信中会收到通知 登录

7、 后台 - 开发管理 - 审核版本 发布小程序 程序设计综合实验 详细设计 c 程序设计综合实验 前后端交互 微信小程序-英语单词测试 前端代码前端代码 wx.request( url: https:/www.sunyinan.top, data: name: this.data.ID, rightNum : rightNum, wrongNum : wrongNum , method:POST, header: content-Type:application/x-www-form- urlencoded , success: function (res) console.log(res)

8、) 后台接收代码后台接收代码 class myHandler(BaseHTTPRequestHandler): def do_POST(self): form = cgi.FieldStorage( fp=self.rfile, headers=self.headers, environ=REQUEST_METHOD:POST, CONTENT_TYPE:self.headersContent- Type, ) id=form.getvalue(name,) rightNum=form.getvalue(rightNum,) wrongNum=form.getvalue(wrongNum,)

9、server = HTTPServer(, PORT_NUMBER), myHandler) server.socket = ssl.wrap_socket(server.socket, certfile=./https_svr_key.pem, server_side=True) server.serve_forever() 程序设计综合实验 界面实现 微信小程序-英语单词测试 程序设计综合实验 界面实现 微信小程序-英语单词测试 程序设计综合实验 数据库操作 微信小程序-英语单词测试 #连接连接 conn=MySQLdb.connect(host=localhost,user=word,

10、passwd=sunyinan,db=word,charset=utf8) cursor = conn.cursor() dt = datetime.datetime.now().strftime(%Y-%m-%d %H:%M:%S) table=student #创建创建 sql = create table if not exists + table + (ID char(15),word1 int(2),word2 int(2),timenow char(50) cursor.execute(sql) #写入写入 sql = insert into + table + values(+id+,+ value1+,+value2+,+str(dt)+) cursor.execute(sql) #提交提交 mit() #关闭关闭 conn.close() 程序设计综合实验 数据库操作 微信小程序-英语单词测试 程序设计综合实验 案例总结 d 程序设计综合实验 运行效果 微信小程序-英语单词测试 程序设计综合实验 使用方便 微信小程序 英语单词测试 使用者打卡记录 成绩排行 缺点 优点 用户界面简洁，需要美化 微信小程序-英语单词测试 没有用户登录确认功能 程序设计综合实验 THANKS！