hzuapps/web-wechat-2019

高级网页设计实验库

高级网页设计（微信小程序开发讲解）

实验要求

https://github.com/hzuapps/web-wechat-2019/issues?q=is%3Aissue+is%3Aopen+label%3ALab

在线查看实验结果

https://infoaas.com/web-wechat-2019/

微信小程序开发文档

https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017830

WeUI-wxss库

https://github.com/Tencent/weui-wxss

微信小程序注册网站

https://mp.weixin.qq.com

课程网站

http://zeng.shaoning.net/web/

通过审核并发布的小程序列表

https://github.com/hzuapps/web-wechat-2017/list.md https://github.com/hzuapps/html5-2018/labels/Example

联系老师

web-wechat-2019's Issues

森in计划管理

实验7：微信小程序API用法

实验目标

1. 掌握最常用的API：界面交互、存储、网络；
2. 了解其他一些功能API。

实验内容

1. 练习界面交互；
2. 创建JSON数据文件。

实验步骤

参照前几次实验

注意事项

所开发页面一定要与你的个人选题相关 （Issue）。

To thou

1、用于记录想去的地方想吃的食物想玩的东西……；
2、可以存储；
3、可根据实现时间进行简单分类。

拼图小游戏

九宫格，打乱图片顺序然后还原图片

趣意小工具

主要模块：为图片添加滤镜。
目前有：模糊，复古，怀旧，美白四种滤镜。
日后会添加其他有趣的功能模块。

是计算器呀

1、主功能计算器，完成计算器基础加减乘除、清零、回退。
2、工具箱之二维码生成器，可以将输入的网址转化为二维码，方便分享与保存。

Jokes Collections

1、查看有趣的笑话合集
2、查看一些趣图
3、可以自己添加一些有趣的故事（备忘）

时钟

Jokes colletion

1、查看有趣的笑话合集
2、查看一些趣图
3、可以自己添加一些有趣的故事（备忘）

佛系旅游

今天谁洗碗鸭

请记住我

1.首页 搜索，发布信息。
2.贡献榜。

事项便签

1、日历
2、添加事项
3、编辑标题、内容

068同学的树洞

节日是老天在时间线上打的结

标签日记

写日记是一种良好的习惯，而现在许多人都丢失了这种习惯。

小程序功能特点：

1. 提供标签选择，选择标签后可以获得提示，根据提示写日记，解决人们写日记难写，不知道写什么的问题
2. 每天只需要写一句话，再忙碌也能抽空写，从而养成良好习惯
3. 写日记方便，通过小程序即可完成写日记的操作，无需在笔记本上
4. 记录保存完整，写过的日记在小程序上可以看到，不会丢失，方便整理，提供查询功能，方便找到日记

Memo

可以添加 删减备忘录，记录生活琐事。

实验5：HTML5移动端页面（选学）

实验目标

1. 理解移动端与桌面端的区别；
2. 掌握WeUI微信界面库的用法。

实验内容

参考实验三 #3，使用WeUI开发其他移动端页面。

要占卜啦

1、通过输入姓名和生日来占卜最近运势
2、输入姓名占卜恋爱运势。

詹姆斯迷弟

为詹姆斯的粉丝们提供关于詹姆斯的新闻资讯

实验3：CSS3样式设计

实验目标

1. 掌握CSS的用法及基础语法；
2. 掌握WeUI等第三方CSS库的使用。

实验内容

1. 练习并掌握CSS中ID、类（class）及规则的基础用法；
2. 基于WeUI编写个人简历，方便在移动端和微信端浏览。

实验步骤

自行根据实际实验步骤撰写。

注：上面这一句话原封不动抄过来的当次实验不及格。

实验要求

1. 编写的网页（如：resume-weui.html）保存在自己的目录下；
2. 使用WeUI的CSS库设计支持手机浏览的移动版H5页面；
3. 根据自己的实验过程与结果编写实验报告（重点检查）；
4. 按照『教学助理』小程序要求将实验报告发送到老师的邮箱。

注意：做新实验时别忘记了前面实验学到的东西。

实验参考

1. https://weui.io
2. https://github.com/Tencent/weui
3. 实验一别忘记了 #1
4. 实验二别忘记了 #2

学生课表

1、提供学生上课的时间地点、任课老师等信息；
2、提供简易的计算器服务，方便学生计算。

自用查快递

快递自主查询和快递信息智能提醒

旅行易

象棋小棋钟

天气预报

实时显示当地天气

计时器

科比

科比简介

实验2：HTML5语义标签

实验目标

1. 练习并掌握HTML5网页开发；
2. 掌握网页与网站服务器的部署方法。

实验内容

制作一个HTML5个人简历网页，具体要求如下：

1. 使用HTML5语法
2. 使用<table>设计布局
3. 使用<img>添加个人照片
4. 使用<form>制作一个留言表单
5. 使用<a>指向自己的GitHub主页  

注意：可以隐去自己的真实姓名与联系信息。

实验步骤

根据自己的实验步骤撰写。

实验要求

1. 在 students 中创建学号目录；
2. 将编写的网页（如：resume.html）保存在自己的目录下；
3. 将代码提交到实验库（add, commit, push），然后发送Pull Request；
4. 根据自己的实验过程与结果编写实验报告（重点检查）；
5. 按照『教学助理』小程序要求将实验报告发送到老师的邮箱。

最后一步

Pull request发送之后，一定要自己查看自己修改过的文件，看看有没有改错文件（Files changed）。

参考作业

https://github.com/hzuapps/web-wechat-2019/issues?q=label%3AGood+is%3Aclosed

整蛊九宫格

这是一个娱乐至上的小程序

实验4：JavaScript编程

实验目标

1. 练习JavaScript基础语法；
2. 掌握JavaScript操作DOM的方法；
3. 掌握JavaScript事件处理及回调函数用法；
4. 了解jQuery前端JavaScript库。

实验内容

1. 练习：11.4.1 改变网页背景颜色（P309页）；
2. 实验：使用JavaScript检测简历网页留言表单内容。

• 点击留言按钮时，如果留言内容为空，则弹出提示窗；不为空时正常发送留言。
• 可以用JavaScript实现，也可以用 jQuery 库实现。

实验步骤

自行根据实际实验步骤撰写。

注：上面这一句话原封不动抄过来的当次实验不及格。

实验要求

1. 将代码保存在自己的学号目录下；
2. 将代码提交到实验库（add, commit, push），然后发送Pull Request；
3. 根据自己的实验过程与结果编写实验报告（重点检查）；
4. 按照『教学助理』小程序要求将实验报告发送到老师的邮箱。

实验参考

1. https://www.cnblogs.com/XYQ-208910/p/5826942.html

要交作业啦

为经常在Deadline交作业的小可爱们设计的作业备忘录。
1、可记录个人的作业。
2、可设置作业的提交时间。

实验6：HTML5小程序页面

实验目标

1. 掌握微信小程序注册方法；
2. 掌握微信小程序文件结构（配置、页面、图片、第三方文件等）；
3. 掌握微信小程序中WXML、JS及WXSS的写法。

app.js
app.wxss
app.json
pages/
- index/index.js
- index/index.wxml
- index/index.wxss
- ...
- images/
- ...
style/
- weui.wxss

实验内容

1. 注册一个微信小程序号，并且创建Issue，说明小程序题目与功能简介；
2. 创建微信小程序导航栏及相应的页面；

// 知识点：app.json 
"tabBar": {
  "list": [
    {} // 配置 2-3 个导航栏
  ]
} 

3. 完成微信小程序的首页开发（基于WeUI）。

// 知识点1：在app.wxss中导入weui-wxss
@import "style/weui.wxss"; 
// 提示：下载 dist/weui.wxss 到 style 目录下

// 知识点2：数据绑定的用法
// index.js 
data : {
  "welcome": "Hello WeChat Mini Program"
}
// index.wxml 
<text> {{ welcome }} </text>
// 提示：花括号之间不要有空格。

实验步骤

自行根据实际实验步骤撰写。

注：上面这一句话原封不动抄过来的当次实验不及格。

实验要求

1. 将微信小程序项目源代码目录保存到个人学号目录下；
2. 将代码提交到实验库（add, commit, push），然后发送Pull Request；

git commit -m "#6 #ISSUE号 注意要有空格"

3. 根据自己的实验过程与结果编写实验报告（重点检查）；
4. 按照『教学助理』小程序要求将实验报告发送到老师的邮箱。

实验参考

1. https://github.com/hzuapps/web-wechat-2017/blob/master/list.md
2. 微信小程序开发工具下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
3. 微信小程序文档：https://developers.weixin.qq.com/miniprogram/dev/

DNF装备制作材料计算器

有闲来食茶

1.首页-功夫茶介绍
2.分享
3.关于

@zengsn

Jokes collection

1、查看有趣的笑话合集
2、查看一些趣图
3、可以自己添加一些有趣的故事（备忘）

日程与随笔

一种类似于**跳棋的游戏，但是它的棋子是扁的棋子，只有十二个棋子，两人对下

礼鱼

礼鱼，一个集送礼建议、参考价格及购买途径于一身的良心小程序。

实验8：HTML5应用综合实验

大作业要求

1. 按照模板完成个人小程序的开发报告。
2. 最后在总结部分贴上已发布小程序二维码

下载模板（打开链接，点击 Download 按钮）

https://github.com/hzuapps/web-wechat-2019/blob/master/Web.Final.docx

实验1：Web服务器与调试工具

实验内容

1. 在本机上安装 Apache服务器（或同类工具），启动服务器，浏览器上访问：
   http://localhost
2. 下载腾迅WeUI前端库，将例子代码部署到本地服务器上；下载地址：
   https://github.com/Tencent/weui
3. 在本机上打开Chrome浏览器（未安装要安装），打开Web开发工具，查看网页代码；

选项菜单 - 更多工具 - 开发者工具 （或者 F12）

4. 练习并使用GitHub提交实验代码到实验库，具体步骤参见：
   https://github.com/hzuapps/web-wechat-2019/blob/master/GitHub-Lab.md

实验步骤

自行在实验在报告中撰写。

实验结果与要求

1. 所有操作结果，截图之后粘贴到实验报告中；
2. 发邮件到作业邮箱，提交实验报告（微信通知）。

提示

1. Apache服务器的下载与安装 https://blog.csdn.net/zhangnana200/article/details/77116030
2. 独立安装Apahce服务器 https://blog.csdn.net/lyb123453/article/details/72892305

已完成作业参考

1. 标准答案： #9
2. 只使用学号，不要加前缀net。修改方法参考：#22
3. https://github.com/hzuapps/web-wechat-2019/issues?q=label%3AGood+is%3Aclosed

Micro schedule

此次设置的微时间器主要用于对所设置的任务计时，总共有以下三个页面

1. 首页：可选择任务为（工作/休息），给任务命名
2. 记录：可查看任务的开始时间和结束时间，也可清除记录
3. 设置：可设置工作时间（1-60分钟），休息时间（5-60分钟）

记账助手

设计一个记账小程序
1.可以手动键入账单，并对消费类型进行选择，添加备注等
2.可分别按日、月、年统计花费
3.实现初步的转发功能

惠院新闻

为大家更方便地查看关于学校的新闻信息。

中午吃什么鸭

只有一个功能页面
功能：输入纠结的菜品数量，确认之后弹出对话框输入菜品名称进行随机选择，得到结果；
带有重置功能

贪吃蛇？

顾名思义

趣玩

1.聚会娱乐小助手
2.提供多种聚会游戏规则、玩法与题目，如真心话大冒险、狼人杀、谁是卧底...

今天要上课鸭

记录每学期的课程和老师联系方式

@zengsn

时间日期选择器

选择时间日期，自定义精确到分秒或时段

自用查快递

想要做一个智能快递信息提醒的小程序

实验二

<title>1714080903244</title>

	个人简历
	教育经历
	2017.09-2021.07
基本信息	惠州学院　　网络工程　　本科
姓名：JJshen	工作经验
出生日期：98/11/**	无
电话：136****1042
邮箱:[email protected]
技能证书	自我评价
无	无
兴趣爱好
篮球

你的留言

<textarea name="jj" cols="70" rows="5"></textarea>

点我，去我的github页面

五子棋

下五子棋