《微信小程序开发项目实战教程高职》全套教学课件

项目1：微信小程序开发条件准备|2026年|微信小程序开发项目实战教程项目1：小程序开发条件准备项目2：小程序开发技术基础项目3：用户信息模块项目4：系统首页项目5：预约挂号模块项目6：缴费模块项目7：诊查报告模块项目8：小程序的测试与发布全套可编辑PPT课件CONTENTS技术架构篇01小程序的技术架构解析02小程序的业务架构与运行逻辑开发环境篇03开发资质与账号申请04小程序的接口与安全机制05开发环境与工具的安装配置PART01技术架构篇深入理解小程序的技术与业务架构小程序的技术架构：前端与后端核心架构概览一个完整的小程序由前端和后端协同构成，前端负责交互展示，后端负责数据处理，共同提供完整服务。前端(Frontend)运行在微信客户端，提供用户交互界面（UI），由微信服务器托管，直接响应用户操作。后端(Backend)运行在开发者服务器上，负责数据存储与业务逻辑处理，通过API接口与前端进行数据通信。小程序前端：用户交互的载体运行环境：微信APP内部代码运行在用户手机的微信客户端中，无需额外下载安装。部署位置：微信官方服务器前端代码包由微信官方托管，确保访问的稳定性和安全性。加载过程：拉取与渲染打开小程序时，微信从服务器拉取代码并在本地运行，实时渲染UI。核心作用：交互与展示直接接收用户操作，展示数据结果，提供流畅的交互体验。小程序后端：数据与业务的核心运行环境与部署运行于开发者自行搭建和管理的服务器集群，拥有完全的控制权。核心业务逻辑处理负责处理前端请求，执行复杂的数据计算、存储及第三方服务调用。API接口通信后端API是前后端通信的桥梁，封装数据接口供前端调用。案例分析：滴滴出行小程序的运行流程步骤1：前端加载用户打开小程序，微信加载前端代码，显示叫车界面。步骤2：数据交互用户输入出发地/目的地，前端通过API将数据发送到服务器。步骤3：后端处理服务器接收请求，进行车辆调度算法匹配与计算。步骤4：结果返回后端将匹配到的司机、车辆信息通过API返回给前端。步骤5：结果展示前端渲染数据，展示叫车结果，完成整个流程。小程序的业务架构：模块化的功能组合核心思想：将复杂的业务功能拆分为独立的模块，便于开发和维护。用户模块负责用户的登录、注册流程以及个人信息的管理与维护。内容模块涵盖文章、商品、视频等多媒体内容的展示、编辑与管理。交易模块处理商品购买、支付流程、订单管理及购物车功能。社交模块实现用户间的互动，包括内容分享、评论交流及点赞功能。工具模块集成地图导航、日历选择、计算器等实用工具类功能。PART02开发环境篇准备你的开发资质与工具环境开发资质：你需要一个小程序账号核心前提所有小程序开发都必须基于一个已注册的小程序账号，这是开发的第一步。开放注册主体类型个人：适合快速验证想法，流程简单企业/组织：支持更多高级接口与功能政府/媒体：需提供相应资质证明指南说明：本指南主要针对“个人主体”进行讲解，因其注册门槛低、流程快，适合初学者入门。个人主体注册条件（截至2025年6月）年龄要求申请人必须年满18周岁，具备完全民事行为能力。身份认证需提供中国大陆居民身份证号码，并确保微信支付已绑定本人银行卡。电子邮箱需提供未注册过微信公众平台、开放平台或小程序的全新电子邮箱。手机号码需提供与微信支付绑定的有效手机号码，用于接收验证码。注册限制同一身份证号码最多只能注册5个个人小程序账号，请合理规划。小程序的官方接口：API与服务端前端API(客户端)调用位置小程序前端代码中，直接在客户端运行。核心功能获取用户信息（头像、昵称）获取地理位置信息发起网络请求(wx.request)服务端接口(Server)调用位置开发者的后端服务器代码中，服务器向微信服务器发起请求。核心功能生成小程序码发送订阅/模板消息数据统计分析与管理接口调用机制：谁在何时调用谁？前端API调用路径小程序前端(JS代码)运行在用户手机环境中微信客户端(Native)提供底层接口能力，直接交互服务端接口调用路径开发者后端服务器业务逻辑处理中心微信开放平台服务器基于HTTPS协议远程调用安全机制（一）：合法服务器域名白名单核心要求小程序前端仅能与“已配置的合法域名”进行网络通信（如wx.request,wx.uploadFile）。配置位置微信公众平台→开发→开发管理→开发设置→服务器域名。安全目的防止小程序随意访问恶意服务器，保护用户数据安全，规避潜在风险。安全机制（二）：HTTPS与ICP备案强制HTTPS加密传输所有合法服务器域名必须部署SSL证书，强制使用HTTPS协议进行通信，确保数据传输过程中的安全性与隐私保护。强制ICP备案准入所有合法服务器域名必须已完成中国大陆的ICP备案，这是域名接入互联网并被小程序访问的必要前提条件。注意：这两项是硬性要求，未满足将无法通过域名校验，导致服务无法正常访问。安全机制（三）：服务端接口的安全凭证AppID：身份标识小程序的唯一标识，类似于身份证。可公开，主要用于标识小程序身份，无需保密。AppSecret：密钥凭证用于服务端接口调用时的签名验证。绝对保密，严禁泄露给第三方。安全警示AppSecret一旦泄露，攻击者可冒充你的小程序调用接口，可能导致数据泄露或财产损失。获取位置：微信公众平台→开发→开发管理→开发设置开发环境与工具：微信开发者工具官方集成开发环境(IDE)微信官方提供的一站式开发工具，集成了代码编辑、智能提示、语法高亮等功能，专为小程序开发量身打造。全流程开发支持覆盖编译构建、实时预览、断点调试、真机测试及最终的代码上传与发布，提升开发效率。官方下载渠道请访问微信开放平台官网下载对应版本：/miniprogram/dev/devtools/download.html安装与配置根据您的操作系统（Windows/macOS）下载对应安装包，下载后双击安装文件，按照向导提示完成安装即可。微信开发者工具主界面概览编辑器区编写和管理小程序代码文件，支持语法高亮与智能提示。模拟器区模拟不同手机型号的小程序运行效果，实时预览界面UI。调试器区查看日志、网络请求及数据存储，支持断点调试功能。工具栏集成编译、预览、上传等常用功能按钮，提升开发效率。总结：准备就绪，开启开发之旅技术架构回顾小程序本质是前后端分离架构：前端运行在微信客户端，后端部署在开发者服务器，两者通过网络请求交互。开发资质准备个人开发者需年满18岁，准备好身份证、邮箱和手机号，在微信公众平台完成账号注册，获取唯一的AppID。安全与域名规范必须配置已备案的合法HTTPS域名，确保数据传输安全；同时需妥善保管AppSecret，避免泄露。核心开发工具安装并熟悉微信开发者工具，它集成了代码编辑、调试、预览和上传等核心功能，是开发的必备利器。THANKYOU期待与您共同探讨小程序开发的更多可能性微信小程序开发项目实战教程项目2：小程序开发技术基础项目管理、框架结构与MVVM模式详解|2026年|微信小程序开发项目实战教程CONTENTS01小程序的项目管理开发者工具项目管理项目创建与成员权限02小程序开发框架目录结构与文件组成全局配置与资源管理03小程序的MVVM模式MVVM原理机制页面数据绑定与生命周期PART01小程序的项目管理从零开始创建与管理你的小程序项目开发者工具的项目管理面板首次启动登录首次使用开发者工具时，需要使用微信扫码完成登录授权，确保账号安全。项目列表管理集中展示已创建的小程序项目，提供便捷的导入、删除及搜索功能，方便管理。创建新项目点击界面显眼的“+”号按钮，即可快速进入新项目创建流程，开始开发之旅。小程序的项目创建（一）：参数设置步骤1：新建项目点击界面左上角的“+”号，在弹出菜单中选择“小程序”类型。步骤2：填写基本信息填写项目名称，选择本地存放目录，并填入已申请的AppID。步骤3：选择后端服务根据项目需求，选择“微信云开发”或“不使用云服务”。步骤4：选择开发模板选择合适的初始化模板，如“基础模板”或“云开发模板”。小程序的项目创建（二）：项目主界面资源管理器展示项目完整的文件结构，方便文件管理与导航。模拟器区实时预览小程序在不同设备上的运行效果。编辑器区编写和编辑小程序代码（JS,WXML,WXSS等）。调试器区查看运行日志、网络请求及数据，辅助排查问题。项目成员与权限（一）：登录管理平台登录入口以管理员身份访问微信公众平台()进行登录。操作路径登录后，在左侧菜单栏找到“管理”选项，点击进入“成员管理”页面。核心功能支持添加、删除项目成员，并为不同角色分配相应的系统权限。项目成员与权限（二）：添加成员与分配权限步骤1：添加成员点击“添加”按钮，输入需要授权的成员微信号进行搜索。步骤2：分配权限根据成员角色，勾选相应权限（运营者、开发者、数据分析者）。步骤3：扫码确认管理员使用微信扫码进行身份验证，确认后完成添加。项目成员与权限（三）：权限清单详解权限项运营者开发者数据分析者登录管理后台√√√版本发布与审核√--查看数据分析报表--√代码开发与调试-√-修改小程序基础信息√--PART02小程序开发框架深入理解小程序的目录结构与文件组成小程序的目录结构解析pages/-页面文件目录存放小程序所有的页面文件，每个页面通常包含.js,.json,.wxml,.wxss文件。utils/-公共工具库存放通用的JavaScript工具函数，用于代码复用和逻辑抽离。app.js-逻辑主文件小程序的入口文件，用于注册小程序实例，处理生命周期回调。app.json&app.wxss-全局配置与样式app.json配置页面路径、窗口表现等；app.wxss定义全局样式。一个页面的四个核心文件page.js-页面逻辑文件负责页面的逻辑处理，包括数据请求、用户交互事件处理以及页面生命周期管理。page.json-页面配置文件用于配置当前页面的窗口表现，例如导航栏标题、背景颜色等个性化设置。page.wxml-页面结构文件定义页面的结构布局，类似于网页中的HTML，通过标签语言构建用户界面。page.wxss-页面样式文件负责页面的视觉样式，类似CSS，用于定义组件的外观、布局和动画效果。全局配置：定制你的小程序外观配置代码(app.json)"window":{"navigationBarTitleText":"小程序开发基础","navigationBarBackgroundColor":"#FF0000","navigationBarTextStyle":"white"}navigationBarTitleText:设置导航栏标题文字navigationBarBackgroundColor:设置导航栏背景色navigationBarTextStyle:设置导航栏文字颜色(白/黑)模拟器实时效果资源部署与体积限制小程序体积限制普通项目包：≤2M分包项目：≤30M资源分离部署方案将静态资源（图片、视频）部署至独立存储服务器，业务数据存入数据库，小程序仅保留核心代码，通过接口交互。系统架构交互图小程序客户端接口服务器(API)数据/存储服务器PART03小程序的MVVM模式数据驱动视图的核心原理MVVM：Model-View-ViewModelModel(模型)数据层，负责数据的存储和处理，是应用的核心数据来源。ViewModel(视图模型)连接层，监听数据变化并更新视图，同时处理视图交互逻辑。View(视图)UI层，用户可见的界面，负责数据展示和响应用户交互。核心思想：数据驱动视图开发者只需关注数据和视图，无需手动操作DOM，ViewModel自动完成数据与视图的双向绑定。数据渲染：将数据展示到视图1.定义数据(page.js)Page({

data:{info:'HelloWorld'}})2.绑定数据(page.wxml)<!--使用Mustache语法--><view>{{info}}</view><!--渲染结果:HelloWorld-->更新数据：this.setData方法核心调用方法使用this.setData({key:newData})语法更新数据。数据驱动视图修改逻辑层的data数据，框架自动通知ViewModel更新对应视图。典型交互场景用户点击按钮触发onTap事件，在回调函数内调用setData实现页面实时刷新。页面的生命周期onLoad页面加载时触发，只调用一次。通常用于请求初始化数据。onShow页面显示时触发，每次打开页面都会调用。onReady页面初次渲染完成时触发，只调用一次。此时可以和视图层进行交互。onHide页面隐藏时触发。例如当navigateTo或底部tab切换时。onUnload页面卸载时触发。用于清理定时器等资源。页面导航：不同的跳转方式wx.navigateTo保留当前页面，跳转到新页面。

特点：页面栈保留，用户可以点击左上角返回按钮回到原页面。wx.redirectTo关闭当前页面，跳转到新页面。

特点：页面栈替换，用户无法返回原页面，常用于登录后跳转。wx.switchTab跳转到tabBar页面，并关闭其他所有非tabBar页面。

特点：专门用于底部导航栏切换，会清空页面栈。总结：掌握基础，迈向开发项目管理与权限配置学会使用开发者工具快速创建项目，掌握在公众平台管理成员权限的流程，确保开发协作的安全性。开发框架与目录结构深入理解小程序的目录结构，掌握app.json全局配置文件的作用，以及页面四文件（js/json/wxml/wxss）的分工与协作。MVVM数据驱动视图理解数据驱动视图的原理，熟练使用data定义数据，通过{{}}进行数据绑定，并掌握this.setData进行视图更新。页面生命周期管理了解页面在不同阶段的回调函数（如onLoad,onShow），利用生命周期处理初始化逻辑、数据加载及页面切换时的状态管理。THANKYOU期待与您共同探讨小程序开发的更多可能性微信小程序开发项目实战教程项目3：用户信息模块的知识点解析|2026年|微信小程序开发项目实战教程CONTENTS01rpx尺寸机制02AppID与AppSecret03wx.showLoading接口04wx.login接口05wx.request接口06WXML组件的条件渲染07WXSS样式的条件选择08wx.showToast接口09globalData参数PART01rpx尺寸机制01rpx尺寸机制核心概念rpx(responsivepixel)是小程序独有的动态尺寸单位，能根据屏幕宽度自动适配。换算原理规定屏幕宽度为750rpx。如iPhone6宽375px，则1rpx=0.5px，框架自动计算物理像素。适配优势实现多端自动适配，无需编写复杂的媒体查询，极大简化了布局开发工作。开发实践以iPhone6(750px)为设计标准，直接将px替换为rpx使用。750rpxPART02AppID与AppSecret02AppID与AppSecretAppID(小程序ID)作用：小程序的唯一身份标识，用于区分不同项目，是微信生态中的应用名片。

获取：登录微信公众平台→开发管理→开发设置。AppSecret(小程序密钥)作用：与AppID配对的密钥，用于后端服务器向微信服务器发起敏感请求（如获取OpenID）。

获取：同开发设置页面，点击“重置”按钮获取。安全警示：AppSecret是极其重要的敏感信息，绝对不能在前端代码中暴露，必须妥善保管在后端服务器中。PART03wx.showLoading接口03wx.showLoading接口功能概述显示加载动画提示框，告知用户正在进行耗时异步操作（如网络请求），防止重复操作。核心用法wx.showLoading({title:'登录中...',//提示文字});使用场景与注意事项在用户触发操作时立即调用，操作完成后（无论成败）必须调用wx.hideLoading()关闭。效果预览PART04wx.login接口04wx.login接口接口功能调用微信登录，获取用户的临时登录凭证code。这是小程序实现微信快捷登录的第一步。核心机制不直接返回用户信息，仅返回有效期为5分钟的code。code是后端服务器换取用户唯一标识（OpenID）的关键凭证。代码示例wx.login({success:(res)=>{if(res.code){console.log('Code:',res.code);}else{

console.log('登录失败');}}});控制台输出示例PART05wx.request接口05wx.request接口核心用法示例wx.request({url:'/api/login',method:'POST',data:{code:res.code,//登录凭证appid:'your-appid'},success:(response)=>{console.log('返回数据：',response.data);}});功能与作用小程序与后端交互的核心API，相当于网页开发中的XMLHttpRequest。在登录案例中，负责将code、AppID发送给后端，换取用户OpenID和个人信息。后端返回数据示例PART06WXML组件的条件渲染06WXML组件的条件渲染核心功能与原理根据数据的布尔值结果，动态决定是否渲染组件。当条件为true时渲染wx:if块，为false时渲染wx:else块。案例应用：用户登录状态判断场景：根据页面data中的patientInfo是否为null来判断。逻辑：若为null，显示“未登录”提示；若有数据，显示真实用户名。核心代码实现<!--WXML代码示例--><viewwx:if="{{patientInfo==null}}">未登录</view><viewwx:else>{{patientInfo.p_name}}</view>PART07WXSS样式的条件选择07WXSS样式的条件选择核心概念与应用场景动态样式绑定根据数据状态动态切换CSS类名，实现颜色、大小或显隐等视觉效果的变化，无需重复编写组件。三元表达式语法class="{{condition?'classA':'classB'}}"案例：电子诊疗卡状态切换根据patientInfo是否为空，动态改变按钮颜色：未登录时显示灰色，登录成功后显示绿色，提供直观的视觉反馈。代码实现示例WXML结构层<viewclass="{{patientInfo==null?'e-card-unlogin':'e-card'}}">电子诊疗卡</view>WXSS样式层/*未登录状态样式*/.e-card-unlogin{color:rgb(153,153,153);}/*登录成功状态样式*/.e-card{color:rgb(40,167,69);}PART08wx.showToast接口08wx.showToast接口功能概述用于展示操作结果（成功/失败/提示）的轻量级消息框，默认1.5秒后自动消失。核心用法示例wx.showToast({title:'登录失败',

icon:'error',duration:2000});与showLoading的区别showToast侧重结果反馈，自动消失；showLoading侧重过程展示，需手动调用hideLoading关闭。PART09globalData参数09globalData参数核心概念小程序的全局数据存储区，生命周期与小程序一致。数据定义在app.js中，可被所有页面和组件访问。主要作用存储跨页面共享的公共数据，如用户登录状态、个人信息、全局配置等，避免重复请求或传递参数。典型应用场景登录成功后，将用户身份信息存入globalData，个人中心等页面可直接读取，无需重新获取。1.在app.js中定义全局数据App({globalData:{userInfo:null//初始化用户信息}});2.在页面中访问与修改//获取小程序实例constapp=getApp();Page({onLoad(){console.log(app.globalData.userInfo);app.globalData.userInfo={name:'张三'};}});THANKYOU期待与您共同探讨小程序开发的更多可能性微信小程序开发项目实战教程项目4：系统首页开发的知识点解析|2026年|微信小程序开发项目实战教程CONTENTS任务1：配置tabBar栏01.tabBar栏与tab项02.tabBar的配置参数与含义03.wx.switchTab接口任务2：初始化页面数据04.getApp()函数任务3：开发首页功能栏目05.<swiper>与<swiper-item>06.组件的wx:for列表渲染07.组件的wx:if条件渲染08.代码的模块化封装09.swiper组件的bindchange事件10.swiper组件的current属性11.小程序的页面URL参数12.WXS脚本语言13.<scroll-view>组件01tabBar栏与tab项核心概念小程序底部的导航栏，用于实现多页面的快速切换，是常见的UI结构。结构构成由多个“tab项”组成，每个tab项对应一个功能页面的入口。主要作用划分功能模块，方便用户在不同页面间快速跳转，提升易用性。数量限制tab项的数量最少2个，最多5个，不可超出此范围。实际效果演示02tabBar的配置参数与含义"tabBar":{"color":"#999999","selectedColor":"#007AFF","backgroundColor":"#ffffff","list":[{"pagePath":"pages/index/index","text":"首页","iconPath":"images/home.png","selectedIconPath":"images/home-active.png"}]}基础样式配置•color:未选中文字颜色•selectedColor:选中文字颜色•backgroundColor:TabBar背景色列表项配置(list数组)•pagePath:页面路径(必须在pages数组中定义)•text:tab项上显示的文字•iconPath:未选中图标路径•selectedIconPath:选中图标路径注意事项：图标文件必须是本地资源，且大小有严格限制，不支持网络图片。03wx.switchTab接口核心功能与用法专门用于跳转到指定的tabBar页面，并关闭其他所有非tabBar页面。wx.switchTab({url:'/pages/index/index'})接口对比(vsnavigateTo)switchTab：仅跳转tabBar页面，且关闭其他页面navigateTo：跳转任意页面，保留当前页面，不能跳tabBar案例应用场景在案例中，点击“电子诊疗卡”按钮时，使用wx.switchTab跳转到“我的”页面（该页面是tabBar页面）。04getApp()函数核心概念与应用场景核心作用获取小程序的全局应用实例（App实例），是实现页面间数据共享的关键。典型应用场景访问全局数据：如获取globalData中的服务器地址调用全局方法：执行app.js中定义的公共逻辑使用注意事项必须在App实例化之后调用，通常建议在页面的onLoad生命周期中使用。代码示例：获取全局实例//1.获取全局App实例constapp=getApp();//在页面的.js文件中Page({onLoad(){//2.访问全局数据console.log(app.globalData.storeServer);}});05<swiper>与<swiper-item>组件组件功能概述滑块视图容器：用于实现轮播图、滑动选项卡等交互效果。父子关系：<swiper-item>是<swiper>的唯一直接子组件，代表单个滑动项。基本代码结构<swiper><swiper-item>选项卡1</swiper-item><swiper-item>选项卡2</swiper-item></swiper>案例应用：公告信息栏功能实现：利用<swiper>实现滑块式选项卡，包含“就诊须知”、“通知公告”等分类。用户可通过左右滑动手势切换不同分类的公告内容。06组件的wx:for列表渲染核心概念与用法功能定义根据数组数据，循环渲染出一个组件列表，将数据动态展示在页面上。基本用法<viewwx:for="{{array}}"wx:key="*this">{{index}}:{{item}}</view>案例应用：名医风采栏应用场景说明如上图所示，名医风采栏中的每一位医生卡片，都是通过wx:for循环生成的。这种方式可以高效地将从服务器获取的医生数组数据，动态渲染成可视化的列表。07组件的wx:if条件渲染功能原理与基本用法核心功能：根据数据的布尔值结果，动态决定组件是否渲染。语法结构：使用wx:if="{{condition}}"配合wx:else进行条件判断。案例中的实际应用用户状态切换：根据patientInfo是否为null，决定显示“未登录”提示或用户信息卡片。功能按钮控制：在就诊业务栏中，依据功能实现状态动态展示按钮或绑定事件。小程序首页渲染效果08代码的模块化封装核心概念将通用功能（如工具函数、数据请求）抽离封装为独立文件，实现代码解耦与复用。核心价值避免代码冗余，提升项目的可维护性与可读性，降低后期维护成本。典型应用场景网络请求封装、时间格式化工具、通用验证函数等。实现方式(Node.jsCommonJS)1.创建模块utils/formatTime.js//定义格式化函数functionformatDate(date){...}//暴露接口module.exports={formatDate};2.引用模块index.js//引入自定义模块const{formatDate}=require('./utils/formatTime');//调用函数console.log(formatDate(newDate()));09<swiper>组件的bindchange事件核心功能与用法触发时机当<swiper>的当前项发生改变时自动触发。获取索引通过事件对象e.detail.current获取当前滑块的索引值。案例应用：公告栏联动滑动内容区时，利用bindchange事件实时更新顶部选项卡的选中状态，实现视图与数据的同步。代码实现示例WXML结构<swiperbindchange="onSwiperChange"><swiper-item>...</swiper-item></swiper>JS逻辑处理Page({onSwiperChange(e){//获取当前滑块索引constcurrentIndex=e.detail.current;console.log('当前页索引：',currentIndex);}})10<swiper>组件的current属性核心功能：控制滑块索引用于设置或获取当前显示滑块的索引值，是控制滑块切换的关键属性。代码实现逻辑//WXML数据绑定<swipercurrent="{{currentIndex}}">//JS切换控制this.setData({currentIndex:新的索引值});实战场景：公告信息栏公告通知活动资讯系统消息点击顶部选项卡标题时，JS逻辑修改current属性值，从而切换下方对应的内容滑块。11小程序的页面URL参数步骤一：传递参数(拼接URL)//在调用wx.navigateTo时拼接参数wx.navigateTo({url:'/pages/detail/detail?id=123&name=张三'})步骤二：接收参数(onLoad生命周期)//在目标页面的onLoad函数中接收onLoad(options){constid=options.id;//获取id参数constname=;//获取name参数应用场景：名医风采详情页跳转点击医生头像时，通过URL将医生ID传递到详情页，详情页在加载时根据ID获取该医生的具体信息（如擅长领域、出诊时间等）。12WXS脚本语言核心概念与特性WXS(WeiXinScript)是小程序的一套脚本语言，运行在视图层，结合WXML使用，主要用于数据处理。运行效率高运行在视图层，减少逻辑层与视图层的通信开销，提升渲染性能。语法限制类似JavaScript，但不支持ES6+特性（如let/const），也不能调用小程序API。主要用途用于在WXML中进行简单的数据处理和转换，如格式化时间、价格等。基本用法示例1.内嵌WXS代码<wxsmodule="utils">varformatPrice=function(val){return'¥'+val;}</wxs>2.引用外部WXS文件<wxssrc="./utils.wxs"module="utils"></wxs><view>{{utils.formatPrice(100)}}</view>13<scroll-view>组件核心功能与属性提供可滚动的视图容器，用于实现自定义滚动效果（如水平/垂直列表）。scroll-x:是否允许横向滚动(Boolean)scroll-y:是否允许纵向滚动(Boolean)基础用法示例：<scroll-viewscroll-x="true"><view>项目1</view><view>项目2</view><view>项目3</view></scroll-view>实战应用：名医风采栏通过设置scroll-x="true"，实现了医生信息的水平滑动展示，提升了移动端的交互体验。THANKYOU期待与您共同探讨小程序开发的更多可能性微信小程序开发项目实战教程项目5：预约挂号模块知识点解析|2026年|微信小程序开发项目实战教程CONTENTS01<scroll-view>组件的滚动刷新02数据的分页加载03catch:tap与bind:tap事件属性的异同04wx.setNavigationBarTitle接口05wx.makePhoneCall接口01<scroll-view>组件的滚动刷新核心属性：bindscrolltolower当滚动到视图底部时触发该事件，常用于实现“上拉加载更多”功能。实现原理监听底部滚动事件，在事件处理函数中发起新一页数据的异步请求，实现数据的动态加载。案例应用：科室列表自动加载在科室列表页，滚动到底部自动触发getMoreDepart()函数，加载下一页科室数据。<scroll-viewclass="list"scroll-y="true"bindscrolltolower="getMoreDepart"><!--列表内容--></scroll-view>02数据的分页加载核心概念：将大批量数据分段加载，提升首屏速度与用户体验。实现流程1.状态初始化定义currentPage(当前页)和departList(数据列表)。2.首次加载数据在onLoad生命周期中请求第一页数据并渲染。3.触底加载更多监听滚动到底部事件，页码+1，请求新数据并拼接。4.终止加载条件当返回空数据或达到最大页数时，停止加载。案例应用：科室列表数据结构科室列表页采用分页策略，初始加载10条数据，每次触底自动追加10条，直至加载完毕，确保流畅的滚动体验。03catch:tap与bind:tap事件属性的异同相同点：事件绑定机制两者都是用于在小程序中绑定点击事件的基础属性。核心区别：事件冒泡行为bind:tap：不阻止冒泡，事件会向上传递给父组件。catch:tap：阻止冒泡，事件在当前节点停止，父组件无法接收。应用场景：科室列表案例科室信息栏（父）与详情图标（子）均使用catch:tap，确保点击图标时不会误触父元素的跳转事件。04wx.setNavigationBarTitle接口功能与用法该接口用于动态设置当前页面的导航栏标题，适用于需要根据页面内容动态更新标题的场景。wx.setNavigationBarTitle({title:'新的标题'});案例应用：科室详情页在科室详情页的onLoad生命周期中，根据URL参数获取科室名称，并将其设置为导航栏标题，提升用户体验。05wx.makePhoneCall接口功能说明：拨打电话wx.makePhoneCall({phoneNumber:'10086'//拨打的电话号码});应用场景：科室电话直拨在科室列表页面中，用户点击电话号码即可直接唤起拨号界面，无需手动输入，极大提升了用户体验和联系效率。界面示例：科室列表页THANKYOU期待与您共同探讨小程序开发的更多可能性微信小程序开发项目实战教程项目6：缴费模块知识点解析|2026年|微信小程序开发项目实战教程CONTENTS01页面生命周期深入解析小程序Tab页的加载、显示、隐藏与卸载过程，掌握生命周期钩子的最佳实践。02<container>详解页面容器组件的配置参数与应用场景，实现更灵活的页面跳转与交互体验。补充：支付单号生成探讨高并发场景下的订单号生成策略，确保唯一性与业务安全性。01tab页的页面生命周期核心机制：页面不销毁TabBar页面切换时不会被销毁，因此onLoad仅执行一次。需在onShow中处理数据刷新。关键生命周期函数onShow()：页面显示时触发，适合在此处刷新数据。onHide()：页面隐藏时触发，适合在此处清理状态。案例应用实践在onShow中调用数据请求，确保每次进入显示最新账单。在onHide中重置全局状态，保证再次进入时默认显示“待缴费”。02<container>组件核心功能定义小程序页面的根容器，用于包裹整个页面的内容，是构建页面的基础组件。一个页面只能定义一个<container>组件，若定义多个，只有一个有效。主要作用与配置可以理解为页面内的子页面，在弹出该组件的情况下，如果用户进行手机的“返回”“后退”等操作，只退出该组件，而不会离开页面。缴费页案例应用<container>

<view

class="top-banner">

<icon

type="success"></icon>

<view

class="pay-success-tips">支付成功</view>

<view

class="ping-banner-amount">￥{{amount}}</view>

<button

type="primary">完成</button>

</view>

</container>补充知识点：支付单号生成核心功能与意义为每笔支付生成唯一标识，确保交易唯一性，有效防止重复支付或错误支付，保障资金安全。单号生成规则格式：P+精确到秒的时间戳(YYYYMMDDHHmmss)+诊疗卡号案例实现逻辑在缴费页onLoad生命周期中，调用formatTime生成时间戳，拼接全局诊疗卡号。THANKYOU期待与您共同探讨小程序开发的更多可能性微信小程序开发项目实战教程项目7：诊查报告模块知识点解析|2026年|微信小程序开发项目实战教程CONTENTS01wx.previewImage接口02wx.setTabBarBadge接口03wx.removeTabBarBadge接口04wx.showTabBarRedDot接口05wx.hideTabBarRedDot接口01wx.previewImage接口功能概述全屏预览图片，支持保存图片、发送给朋友等操作。核心参数urls(Array)：需要预览的图片链接列表current(String)：当前显示图片的链接，默认第一张案例应用var

imgList

report_image]wx.previewImage({

urls:

imgList,})02wx.setTabBarBadge接口功能说明为tabBar某一项的右上角添加文本提示（角标），用于提示用户有新消息或待处理事项。核心参数index：tabBar的索引位置，从0开始计数。text：显示的文本内容，最多支持3个字符。应用场景在新报告提示模块中，计算用户未读诊查报告数量，并在【报告】tab右上角显示数字提醒。效果预览：未读报告提示wx.setTabBarBadge({

index:

3,

text：4})03wx.removeTabBarBadge接口核心功能与参数功能：移除tabBar某一项右上角的文本提示（角标）。参数：index(必填)-指定tabBar的索引位置（从左边算起）。场景应用案例场景：当用户阅读完所有未读报告，未读