微信小程序开发
微信小程序开发
1000+ 人选课
更新日期:2025/05/10
开课平台智慧树
开课高校武汉城市职业学院
开课教师付沛王社张喻平黄涛全丽莉
学科专业
开课时间2025/01/21 - 2025/07/20
课程周期26 周
开课状态开课中
每周学时-
课程简介
青年志愿者小程序由武汉城市职业学院金砺科技信息技术研发中心开发,是一款服务于高校志愿者活动的软件系统。青年志愿者小程序包括活动管理、活动召集、活动总结、活动分享等功能,使得志愿者社团能充分利用移动端社交平台快速发布活动、便捷的报名参与活动、展示每学期的活动排名和志愿者社团的活动成绩。 青年志愿者小程序研发团队全部由在校学生组成。java程序员由移动应用开发专业20级学生曲良国担当,web前端程序员包括计算机应用技术专业19级的谢志琦、杨义凡、祁宏伟三位同学,UI设计师由计算机应用技术专业19级的严婷婷担任。他们都是志愿者活动的热情参与者,在校园内外都留下了他们的爱心足迹。同时他们利用自己所学习的微信小程序开发技术,设计开发了这款小程序,借助互联网技术,让充满爱心的大学生志愿者能相互交流进步,让志愿者精神更广泛的弘扬传承。 为了向大学生青年志愿者们致敬,给这群充满爱心、勤奋钻研、技术精湛的学生研发团队加油点赞,我们教师团队将青年志愿者小程序的功能开发,做为教学案例,融入到了微信小程序开发这门专业课程当中。微信小程序所包括的小程序框架、小程序的配置、WXML技术、WXS技术、事件响应、数据绑定、页面路由、微信API等抽象概念和复杂的技术都被融入到案例当中,以形象生动的功能案例展现出来,不仅讲解了知识技术,更以实战案例教授了技术应用的最佳实践。 本课程由武汉城市职业学院计算机与电子信息学院付沛、李芙蓉、黄涛、全丽莉、魏芬五位老师组成的教学团队设计讲授。欢迎各位有HTML、CSS、JavaScript基础的同学加入进来,一起探讨,一起学习。通过课程的学习,相信同学们和青年志愿者小程序开发团队的同学一样,也能够利用所学的信息技术,自己创意和开发一款微信小程序,心怀大爱,服务社会。
课程大纲

在线教程

章节简介教学计划
第一个微信小程序
登录后可预览视频
微信开发者工具安装
付沛
小程序号及测试号申请
付沛
新建微信小程序项目
付沛
修改项目简单开发
付沛
总结
付沛
美丽中国微信小程序
设计目标
付沛
编写视图层wxml文件
付沛
页面汇总中显示图片
付沛
绑定数据
付沛
编写事件响应
付沛
全局设置
付沛
武城志愿者小程序-界面框架设计
设计目标
付沛
修改新建页面
付沛
tabBar列表页面设置
付沛
tabBar颜色优化
付沛
navigationBar设置
付沛
window背景色与允许下拉更新
付沛
page背景色全局设置
付沛
开发总结
付沛
武城志愿者小程序活动列表
设计目标
付沛
学校名称绑定
付沛
学校名称样式设置
付沛
活动列表绑定
付沛
活动类型优化
付沛
活动按钮的条件绑定
付沛
活动列表元素属性绑定
付沛
活动列表样式设置
付沛
开发总结
付沛
武城志愿者微信小程序-活动总结
设计目标
付沛
新建列表页和详情页
付沛
准备活动数据
付沛
活动列表绑定
付沛
活动信息布局
付沛
样式优化
付沛
开发点赞功能
付沛
点击列表跳转详情页
付沛
优化点击命令
付沛
滑动删除
付沛
开发总结
付沛
武城志愿者微信小程序-注册
设计目标
付沛
编写注册页视图设计
付沛
引入weui 编写全局样式
付沛
使用weui设置微信风格的姓名电话输入框
付沛
使用weui设置微信风格的性别单选按钮
付沛
使用weui设置微信风格的年级下拉列表
付沛
样式优化
付沛
使用change事件获得用户输入的姓名
付沛
使用简单双向绑定获得用户输入的手机号
付沛
获得性别选择
付沛
获得选择的班级
付沛
注册
付沛
开发总结
付沛
武城志愿者微信小程序-提交总结
设计目标
付沛
编写活动列表视图
付沛
编写绑定事件传递活动id
付沛
使用两种跳转方式跳转下一页
付沛
页面中获得url地址参数
付沛
编写总结提交页视图
付沛
编写总结提交页的样式
付沛
编写使用微信api实现图片
付沛
最多选择6张图的体验优化
付沛
获得活动总结数据
付沛
使用wx.request 向后端提交总结数据
付沛
使用wx.uploadFile向后端提交照片
付沛
在真机中预览小程序
付沛
使用真机调试功能调试小程序
付沛
  • 第一章第一个微信小程序

    第一个微信小程序

  • 1.1微信开发者工具安装

    微信开发者工具安装

  • 1.2小程序号及测试号申请

    小程序号及测试号申请

  • 1.3新建微信小程序项目

    新建微信小程序项目

  • 1.4修改项目简单开发

    修改项目简单开发

  • 1.5总结

    总结

  • 第二章美丽中国微信小程序

    美丽中国微信小程序

  • 2.1设计目标

    设计目标

  • 2.2编写视图层wxml文件

    编写视图层wxml文件

  • 2.3页面汇总中显示图片

    页面汇总中显示图片

  • 2.4绑定数据

    绑定数据

  • 2.5编写事件响应

    编写事件相应

  • 2.6全局设置

    全局设置

  • 第三章武城志愿者小程序-界面框架设计

    武城志愿小程序-界面框架设计

  • 3.1设计目标

    设计目标

  • 3.2修改新建页面

    修改新建页面

  • 3.3tabBar列表页面设置

    tabBar列表页面设置

  • 3.4tabBar颜色优化

    tabBar颜色优化

  • 3.5navigationBar设置

    navigationBar设置

  • 3.6window背景色与允许下拉更新

    window背景色与允许下拉更新

  • 3.7page背景色全局设置

    page背景色全局设置

  • 3.8开发总结

    开发总结

  • 第四章武城志愿者小程序活动列表

    武城志愿者小程序活动列表

  • 4.1设计目标

    设计目标

  • 4.2学校名称绑定

    学校名称绑定

  • 4.3学校名称样式设置

    学校名称样式设置

  • 4.4活动列表绑定

    活动列表绑定

  • 4.5活动类型优化

    活动类型优化

  • 4.6活动按钮的条件绑定

    活动按钮的条件绑定

  • 4.7活动列表元素属性绑定

    活动列表元素属性绑定

  • 4.8活动列表样式设置

    活动列表样式设置

  • 4.9开发总结

    开发总结

  • 第五章武城志愿者微信小程序-活动总结

    武城志愿者微信小程序-活动总结

  • 5.1设计目标

    设计目标

  • 5.2新建列表页和详情页

    新建列表页和详情页

  • 5.3准备活动数据

    准备活动数据

  • 5.4活动列表绑定

    活动列表绑定

  • 5.5活动信息布局

    活动信息布局

  • 5.6样式优化

    样式优化

  • 5.7开发点赞功能

    开发点赞功能

  • 5.8点击列表跳转详情页

    点击列表跳转详情页

  • 5.9优化点击命令

    优化点击命令

  • 5.10滑动删除

    滑动删除

  • 5.11开发总结

    开发总结

  • 第六章武城志愿者微信小程序-注册

    武城志愿者微信小程序-注册

  • 6.1设计目标

    设计目标

  • 6.2编写注册页视图设计

    编写注册页视图设计

  • 6.3引入weui 编写全局样式

    引入weui编写全局样式

  • 6.4使用weui设置微信风格的姓名电话输入框

    使用weui设置微信风格的姓名电话输入框

  • 6.5使用weui设置微信风格的性别单选按钮

    使用weui设置微信风格的性别单选按钮

  • 6.6使用weui设置微信风格的年级下拉列表

    使用weui设置微信风格的年级下拉列表

  • 6.7样式优化

    样式优化

  • 6.8使用change事件获得用户输入的姓名

    使用change事件获得用户输入的姓名

  • 6.9使用简单双向绑定获得用户输入的手机号

    使用简单双向绑定获得用户输入的手机号

  • 6.10获得性别选择

    获得性别选择

  • 6.11获得选择的班级

    获得选择的班级

  • 6.12注册

    注册

  • 6.13开发总结

    开发总结

  • 第七章武城志愿者微信小程序-提交总结

    武城志愿者微信小程序-提交总结

  • 7.1设计目标

    设计目标

  • 7.2编写活动列表视图

    编写活动列表视图

  • 7.3编写绑定事件传递活动id

    编写绑定事件传递活动id

  • 7.4使用两种跳转方式跳转下一页

    使用两种跳转方式跳转下一页

  • 7.5页面中获得url地址参数

    页面中获得url地址参数

  • 7.6编写总结提交页视图

    编写总结提交页视图

  • 7.7编写总结提交页的样式

    编写总结提交页的样式

  • 7.8编写使用微信api实现图片

    编写使用微信api实现图片

  • 7.9最多选择6张图的体验优化

    最多选择6张图的体验优化

  • 7.10获得活动总结数据

    获得活动总结数据

  • 7.11使用wx.request 向后端提交总结数据

    使用wx.request 向后端提交总结数据

  • 7.12使用wx.uploadFile向后端提交照片

    使用wx.uploadFile向后端提交照片

  • 7.13在真机中预览小程序

    在真机中预览小程序

  • 7.14使用真机调试功能调试小程序

    使用真机调试功能调试小程序

  • 开始学习
  • 第一章  作业测试
    第一章 第一个微信小程序

    1.1 微信开发者工具安装

    1.2 小程序号及测试号申请

    1.3 新建微信小程序项目

    1.4 修改项目简单开发

    1.5 总结

    视频数5
  • 第二章  作业测试
    第二章 美丽中国微信小程序

    2.1 设计目标

    2.2 编写视图层wxml文件

    2.3 页面汇总中显示图片

    2.4 绑定数据

    2.5 编写事件响应

    2.6 全局设置

    视频数6
  • 第三章  作业测试
    第三章 武城志愿者小程序-界面框架设计

    3.1 设计目标

    3.2 修改新建页面

    3.3 tabBar列表页面设置

    3.4 tabBar颜色优化

    3.5 navigationBar设置

    3.6 window背景色与允许下拉更新

    3.7 page背景色全局设置

    3.8 开发总结

    视频数8
  • 第四章  作业测试
    第四章 武城志愿者小程序活动列表

    4.1 设计目标

    4.2 学校名称绑定

    4.3 学校名称样式设置

    4.4 活动列表绑定

    4.5 活动类型优化

    4.6 活动按钮的条件绑定

    4.7 活动列表元素属性绑定

    4.8 活动列表样式设置

    4.9 开发总结

    视频数9
  • 第五章  作业测试
    第五章 武城志愿者微信小程序-活动总结

    5.1 设计目标

    5.2 新建列表页和详情页

    5.3 准备活动数据

    5.4 活动列表绑定

    5.5 活动信息布局

    5.6 样式优化

    5.7 开发点赞功能

    5.8 点击列表跳转详情页

    5.9 优化点击命令

    5.10 滑动删除

    5.11 开发总结

    视频数11
  • 第六章  作业测试
    第六章 武城志愿者微信小程序-注册

    6.1 设计目标

    6.2 编写注册页视图设计

    6.3 引入weui 编写全局样式

    6.4 使用weui设置微信风格的姓名电话输入框

    6.5 使用weui设置微信风格的性别单选按钮

    6.6 使用weui设置微信风格的年级下拉列表

    6.7 样式优化

    6.8 使用change事件获得用户输入的姓名

    6.9 使用简单双向绑定获得用户输入的手机号

    6.10 获得性别选择

    6.11 获得选择的班级

    6.12 注册

    6.13 开发总结

    视频数13
  • 第七章  作业测试
    第七章 武城志愿者微信小程序-提交总结

    7.1 设计目标

    7.2 编写活动列表视图

    7.3 编写绑定事件传递活动id

    7.4 使用两种跳转方式跳转下一页

    7.5 页面中获得url地址参数

    7.6 编写总结提交页视图

    7.7 编写总结提交页的样式

    7.8 编写使用微信api实现图片

    7.9 最多选择6张图的体验优化

    7.10 获得活动总结数据

    7.11 使用wx.request 向后端提交总结数据

    7.12 使用wx.uploadFile向后端提交照片

    7.13 在真机中预览小程序

    7.14 使用真机调试功能调试小程序

    视频数14
  • 期末考试