微信小程序开发项目实战教程 课件 项目4：系统首页

项目4：系统首页开发的知识点解析微信小程序开发项目实战教程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:是否允许纵向