hi,小慕
电子商务前端开发技术
第2次开课
开课时间: 2022年09月09日 ~ 2022年12月29日
学时安排: 2小时每周
当前开课已结束 已有 164 人参加
老师已关闭该学期,无法查看
课程详情
课程评价(14)
spContent=学习条件: 本课程是计算机与电子商务复合型课程。 1、一台可以上网的计算机; 2、一个微信账号; 3、肯吃苦、有毅力。 若上面条件都准备好了,现在就开始动手实践。 本可以开发微信小程序,实现移动商务前端相关页面。
学习条件: 本课程是计算机与电子商务复合型课程。 1、一台可以上网的计算机; 2、一个微信账号; 3、肯吃苦、有毅力。 若上面条件都准备好了,现在就开始动手实践。 本可以开发微信小程序,实现移动商务前端相关页面。
—— 课程团队
课程概述

本课程以移动商务客户端开发为载体,围绕移动电商交易过程,设计、制作相关前端页面。

通过本课程实践,学生将完成列表、分类、搜索、购物车、订单、我的等页面制作,构建一个属于自己的移动电商小程序。

课程目标:带领学习者制作移动电商小程序,建议学习者,对照下面目标定向学习。


课程基础:英语三级水平,每周2小时,14周。



    

授课目标

带领学员完成,微信小程序开发,实现前端相关页面,完成移动商务业务逻辑。



课程大纲
搭建项目框架
课时目标:通过本专题操作实践,你将能够实现:在手机微信端创建并运行一个项目的整体框架(该框架拥有4个页面,分别是列表、分类、购物车、我的,并且4个页面能够实现切换操作)
1 任务描述
2 任务实现
2.1 搭建环境
2.2 搭建框架
2.3 标题更新
列表页面制作
课时目标:通过本专题操作实践,你将能够实现:在项目的列表页面①、将给定的商品数组以“九宫格”列表形式展示;②、将给定的图片数组以轮播形式展示。
1 任务描述
2 任务实现
2.1 滚动页面制作
2.2 列表页面分区
2.3 九宫格列表布局
2.4 商品结构布局
2.5 搜索结构布局
2.6 文本内容填充
2.7 图片内容填充
2.8 模拟数据绑定
2.9 单行省略号显示
2.10 配送标识显示
2.11 列表轮播制作
2.12 背景色处理
2.13 价格格式化
详情页面制作
课时目标:通过本专题操作实践,你将能够实现:在项目中添加一个详情页面,并在详情页面显示一个给定的商品信息(包括:商品一组图片、商品的几个文本属性、商品的长图、商品的评论记录)。
1 任务描述
2 任务实现
2.1 上下结构布局
2.2 文本属性布局
2.3 图文结构布局
2.4 评论结构布局
2.5 底部按钮布局
2.6 文本内容填充
2.7 图片内容填充
2.8 顶部轮播创建
2.9 背景色处理
2.10 渐变线创建
分类页面制作
课时目标:通过本专题操作实践,你将能够实现:在项目的分类页面①、将给定的商品类别数组以“竖向”列表形式展示;②、将给定的商品数组以“九宫格”列表形式展示。
1 任务描述
2 任务实现
2.1 窗口分割布局
2.2 循环结构测试
2.3 商品模板布局
2.4 模拟数据绑定
2.5 视觉效果优化
搜索页面制作
课时目标:通过本专题操作实践,你将能够实现:在项目中添加2个页面(关键词录入页面和搜索结果显示页面),在关键词录入页面能够录入预搜商品的关键词,在搜索结果显示页面能够将给定的商品数组以“九宫格”列表形式展示。
1 任务描述
2 任务实现
2.1 关键词录入布局
2.2 关键词录入实现
2.3 搜索按钮启用控制
2.4 搜索结果页面布局
2.5 列表改用模板(补充)
跳转详情途径
课时目标:通过本专题操作实践,你将能够实现:将项目中列表页面、分类页面、搜索页面、搜索结果页面和详情页面等5个页面整合为一个【详情查询模块】。在【详情查询模块】中,用户可以通过三种途径:①、通过列表进入详情;②、通过分类进入详情;③、通过搜索进入详情,并在详情页面显示所选商品信息。
1 任务描述
2 任务实现
2.1 页面跳转到详情
2.2 传递数据到详情
购物车页面
课时目标:通过本专题操作实践,你将能够实现:将项目中列表页面、分类页面、搜索页面、搜索结果页面和详情页面等5个页面整合为一个【详情查询模块】。在【详情查询模块】中,用户可以通过三种途径:①、通过列表进入详情;②、通过分类进入详情;③、通过搜索进入详情,并在详情页面显示所选商品信息。
1 任务描述
2 任务实现
2.1 上中下结构布局
2.2 上部:标签三选一
2.3 中部:列表内容切换
2.4 中部:自提列表制作
2.5 中部:送货列表制作
2.6 中部:快递列表制作
2.7 下部:支付汇总模块
2.8 跳转到购物车
2.9 购物车初始状态
展开全部
预备知识

具有基本计算机操作能力,英语三级水平。

参考资料

1、微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/

2postman接口测试:https://www.cnblogs.com/y325681/p/11561568.html

3、阿里云tomcat免费配置httpshttps://www.cnblogs.com/zengxiaoliang/p/6829024.html

4、小程序开发工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html


常见问题

Q :  

win10运行wex5

A :  Q :  

浙江商业职业技术学院
2 位授课老师
孔勇奇

孔勇奇

教授

任伟

任伟

教授

推荐课程

下载
下载

下载App