微信小程序开发图解案例教程电子教案 第6章 微信小程序云开发

PAGE2PAGE第6章微信小程序云开发课程名称微信小程序开发图解案例教程项目名称微信小程序云开发任务名称微信小程序云开发课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标知识目标1．了解微信小程序传统开发和云开发的区别。2．了解云开发控制台的使用方法。3．掌握云函数的应用。4．掌握云开发文件存储API的调用方法。5．掌握云开发数据库的使用方法。能力目标1．能够使用云开发进行微信小程序开发。2．能够使用云开发控制台进行云开发相关操作。素质目标1．培养团队协作和资源整合能力。2．培养分析问题并解决问题的能力。教学内容1.任务描述本章将系统讲解微信小程序云开发的核心知识，包括云开发与传统开发的区别、云开发控制台的使用、云函数的创建与调用、文件存储API的调用以及云开发数据库的增删改查操作，帮助学生掌握利用云开发进行微信小程序后端开发的方法，降低后端学习成本，提高开发效率。2.任务展示与实现（1）演示微信小程序云开发项目的创建与环境配置。（2）演示云函数的创建、部署、调用及本地调试流程。（3）演示地址管理云开发的完整实现，包括数据库设计、地址列表获取与删除、新增地址与编辑地址。（4）学生动手操作：独立完成地址管理云开发项目的核心功能开发。3.教师讲解本任务涉及的知识点（1）云开发的四大基础功能（云函数、数据库、存储、云调用）及与传统开发的区别。（2）云开发控制台的运营分析、数据库管理、存储管理、云函数管理和设置功能。（3）云函数的目录结构、入口文件编写、部署上线及wx.cloud.callFunction调用方式。（4）Promise对象的状态变化、then/catch方法及在云函数中的异步处理应用。（5）npm的安装与使用、第三方依赖库的引入及构建。（6）云函数本地调试环境的搭建与使用。（7）云函数定时触发器的cron表达式配置。（8）云开发文件存储API（uploadFile、downloadFile、deleteFile、getTempFileURL）的使用方法。（9）云开发数据库的初始化、集合操作及数据的增删改查操作。4.任务小结总结云开发的核心功能与使用流程，回顾云函数的创建部署调用流程、文件存储的四种API操作、数据库的增删改查方法，强调云开发在降低后端开发门槛、提高开发效率方面的重要作用。教学重点1.云函数的创建、部署与调用流程。2.云开发数据库的增删改查操作。3.云开发文件存储API的调用方法。教学难点理解云函数中Promise对象的异步处理机制，掌握云函数与微信小程序客户端的协同工作方式，以及在数据库操作中正确使用where条件查询和分页查询的方法。教学准备1.装有Windows10/MacOS系统的电脑。2.教学课件PPT。3.教材：微信小程序开发图解案例教程（附精讲视频）（第4版）（AI助学）人民邮电出版社作业设计1.对比说明微信小程序传统开发与云开发的主要区别（至少从效率、成本、运维三个方面说明）。2.简述云函数的基本结构（入口文件、package.json、config.json的作用），以及wx.cloud.callFunction调用云函数时的参数配置。3.拓展练习：在地址管理云开发项目的基础上，为地址列表添加分页查询功能，每页显示5条记录，通过skip和limit方法实现翻页效果。教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】本章将介绍微信小程序云开发的核心知识。云开发是微信团队联合腾讯云推出的专业微信小程序开发服务，让开发者无须搭建服务器即可使用云端能力，大大降低了后端开发的学习成本。掌握云开发技术，学生将能够独立完成微信小程序的全栈开发。【目的】使学生明确本章的学习目标，理解云开发与传统开发的区别，掌握云函数、文件存储和数据库三大核心功能的使用方法，能够独立使用云开发技术完成微信小程序的后端业务开发。一、认识微信小程序云开发介绍云开发的四大基础功能——云函数（代码运行于云端，使用微信私有协议天然鉴权）、数据库（JSON数据库，支持增删改查操作）、存储（直接上传或下载云端文件）、云调用（与原生微信服务集成）。对比传统开发与云开发在效率（云开发聚焦业务逻辑，效率更高）、成本（云开发提供免费配额，按需付费）、生态（云开发原生集成微信SDK，天然鉴权）、运维（云开发由腾讯云提供专业支持）、开发部署速度（云开发快速开发快速发布）五个方面的区别，帮助学生理解云开发的优势：无须搭建服务器、免登录免鉴权调用微信开放服务、统一开发多端应用、按量计费成本更低。二、云开发控制台与云函数应用讲解云开发控制台的五大功能模块——运营分析（资源使用、用户访问、监控图表）、数据库（JSON数据库的集合创建、记录添加、索引管理、数据权限设置）、存储（文件管理、存储权限、存储配置、图片处理）、云函数（云函数列表查看、上传部署、本地调试、云端测试）和设置（环境创建与管理）。重点讲解云函数的目录结构（cloudfunctions为根目录，每个云函数包含index.js入口文件、package.json包定义文件和config.json配置文件），以及index.js中wx-server-sdk的初始化方式、入口函数main的参数event（调用参数及自动注入的openid和appid）和context（调用信息和运行状态）的含义。演示使用wx.cloud.callFunction调用云函数的方法，包括config环境配置、name云函数名称、data传递参数，以及Promise风格的链式调用方式。三、Promise对象与npm使用讲解Promise对象的三个状态（pending未完成、fulfilled已成功、rejected已失败）及其状态一旦改变就永久固定的特性。介绍Promise对象的常用方法：then方法（接收onFulfilled和onRejected两个函数，返回新的Promise实例支持链式调用）、catch方法（指定错误回调函数，自动捕获内部异常）、resolve方法（将状态从pending变为fulfilled）、reject方法（将状态从pending变为rejected）。演示在云函数中使用newPromise实现异步操作（如setTimeout延迟返回结果），以及微信小程序端通过.then获取异步结果的方法。讲解npm的安装与使用——下载Node.js安装包完成安装后，在miniprogram目录下使用npmi安装第三方依赖库（如vantui），执行npminit初始化，在开发者工具中选择“构建npm”完成构建，最后在页面JSON文件中配置usingComponents引入组件。四、云开发文件存储与数据库操作讲解云开发文件存储的四种API：wx.cloud.uploadFile用于将本地资源上传至云存储空间（需指定cloudPath和filePath），wx.cloud.downloadFile用于从云存储空间下载文件（需指定fileID），wx.cloud.deleteFile用于删除云存储文件（一次最多删除50个），wx.cloud.getTempFileURL用于获取文件临时路径（私有文件链接有效期10min）。讲解云开发数据库的基本概念——JSON数据库包含数据库、集合（相当于表）、记录（相当于行）、字段（相当于列）四个层级，支持string、number、object、array、boolean、date、geo、null八种数据类型。演示数据库初始化方式（获取默认环境或指定环境引用），以及数据的增删改查操作：通过add方法新增记录，通过get方法查询记录（可配合where条件查询、orderBy排序、field指定返回字段、skip和limit分页），通过update方法更新指定字段或set方法更新整条记录，通过remove方法删除记录（可配合where条件批量删除）。【任务一】云开发环境搭建与云函数练习1.教师演示：创建clouddev云开发项目，在云开发控制台创建测试环境dev，创建add云函数实现两数相加，将云函数上传部署到云端，在微信小程序页面中使用wx.cloud.callFunction调用云函数并输出结果，开启云函数本地调试功能并进行断点调试。2.学生动手：独立完成云开发项目的创建、云函数的编写与部署、本地调试的操作流程。【任务二】开发地址管理云开发项目1.教师指导：带领学生逐步完成地址管理云开发项目——在app.js中初始化云开发环境并指定环境ID，在云开发控制台创建address集合并设计字段（personName、address、city、contactNumber、gender、houseNumber、createTime、updateTime），创建getAddresses云函数实现地址列表查询（根据openid筛选当前用户的地址），创建deleteAddress云函数实现地址删除（根据传入的id删除指定记录），在address页面实现地址列表展示（使用wx.cloud.callFunction调用getAddresses获取数据并通过wx:for渲染列表）、新增地址跳转（wx.navigateTo跳转到addressAdd页面）、编辑地址跳转（带addressId参数跳转）和删除地址功能（调用deleteAddress云函数并刷新列表），创建addressAdd和addressEdit云函数实现新增地址与编辑地址功能，在addressAdd页面设计表单（联系人、性别、手机号码、所在地使用picker的region模式、收货地址使用wx.chooseLocation选择、门牌号）并通过formSubmit提交数据调用对应云函数，完成新增或编辑后返回地址列表页面。2.学生动手：独立完成地址管理云开发项目的完整开发，包括数据库集合创建、多个云函数的编写与部署、地址列表页面的数据获取与展示、新增编辑页面的表单设计与提交，最后在模拟器和真机上预览效果。【课堂总结】1.回顾云开发的四大基础功能：云函数（代码运行于云端，微信私有协议天然鉴权）、数据库（JSON数据库，支持增删改查）、存储（云端文件上传下载删除）、云调用（与原生微信服务集成）。2.梳理云开发的五大优势：无须搭建服务器、免登录免鉴权调用微信开放服务、统一开发多端应用、按量计费成本更低、快速开发快速部署。3.总结云函数的完整使用流程：创建云函数目录及文件→编写index.js入口逻辑→上传并部署到云端→在微信小程序中通过wx.cloud.callFunction调用。4.梳理云开发数据库操作的四种方式：add新增、get查询（配合where