《微信小程序开发图解案例教程》教学教案

课程名称

微信小程序开发图解案例

教程

项目名称

仿华为商城微信小程序

任务名称

仿华为商城微信小程序

课时

6 

项目性质

□演示性

□验证性

√设计性

□综合性

授课班级

授课日期

授课地点

教学目标

（

1

）学会利用微信小程序来完成界面布局以及给界面添加相关的布局样式，深入使用

flex

弹

性布局设计；

（

2

）学会底部标签导航、海报轮播效果、宫格导航的设计。

（

3

）学会使用

scroll-view

可滚动视图区域组件来进行商品左右滑动设计；

（

4

）学会使用

swiper

滑块视图容器组件可以在海报轮播设计、登录设计、导航设计等等不同

场景的使用；

（

5

）学会使用网络请求

wx.request(object)

用来发起请求服务器端

API

接口数据；

（

6

）学会列表式导航在页面中的使用；

（

7

）学会登录不同场景的使用，包括微信授权获取用户信息和登录账号获取用户信息；

（

8

）学会表单制作，设计表单样式以及表单组件的使用。

教学内容

（

1

）“我的”界面列表导航设计

（

2

）账号登录

（

3

）用户注册

（

4

）首页布局设计及动态获取数据

（

5

）分类导航设计及动态获取数据

教学重点

“我的”界面列表导航、账号登录、用户注册、首页布局、分类导航设计及动态获取数据

教学难点

仿华为商城微信小程序的制作

教学准备

装有微信小程序的开发工具的电脑

教学课件

PPT 

教材：《微信小程序开发图解案例教程（附精讲视频）（第

3

版）》

作业设计