微信小程序开发项目实战（微课版）课件 项目1-3 微信小程序入门 -微信小程序项目页面实现

微信小程序入门[xxx]学校主讲教师：[xxx]微信小程序开发学习目标知识与能力目标了解微信小程序的概念及发展前景，掌握其特点和用途。掌握微信开发者工具的安装与使用方法。掌握微信小程序的开发步骤及发布上线的流程。素养目标培养获取和利用信息的能力。培养团队管理能力与协作精神。倡导自主学习，激发开发兴趣，引导多分析、多实践。知识导图任务分解01.认识小程序：全面了解微信小程序的概念、核心特点、主要用途以及未来的发展前景。02.环境与发布：掌握微信小程序开发环境的搭建方法，并熟悉从开发到发布上线的完整流程。03.实战开发：动手实践，从零开始开发一个简单的“HelloWorld”微信小程序，熟悉基础语法。04.拓展公众号内容：了解微信公众号的运营逻辑与方法，掌握公众号账号的注册步骤与注意事项。任务1.1初识微信小程序微信小程序的概念微信小程序是微信平台于2017年1月9日推出的轻量级应用，英文名为WechatMiniProgram。它是一种不需要下载安装即可使用的应用，用户只需通过扫描二维码或搜索关键词即可打开，其运行依赖于微信平台。微信小程序的发展历程（一）2016年·萌芽期启动研发，提出“应用号”概念，进行内测和公测，为后续爆发奠定基础。2017年·成长期正式上线，开放个人账号申请；逐步开放蓝牙、卡券等能力，代码包大小限制提升。2018年·爆发期推出小游戏，开放广告组件；升级任务栏功能，推出“功能直达”，生态日益完善。微信小程序的发展历程（二）2019-2022年：功能完善与合规深化支持PC端打开，打破移动端限制；调整头像昵称获取机制，强化用户隐私保护；推出代码加固功能，提升安全性；并要求ICP备案，进一步规范生态发展等。2023-2025年：规模爆发与智能化升级用户规模持续增长，月活跃用户突破10亿大关；推出AI编程助手，降低开发门槛；拓展群聊场景功能，增强社交裂变能力；生态规模与全球影响力持续扩大。微信小程序的发展数据发展概况：图表直观展示了微信小程序从2020年到2025年的迅猛发展势头。无论是上线数量还是日活跃用户数，均呈现出持续、稳健的增长态势。市场价值：数据充分说明了市场和用户对小程序“轻量级、即用即走”模式的高度认可，显示出其巨大的商业潜力和广泛的用户基础。数据来自元宝及QuestMobile等平台微信小程序的特点（一）无须安装、随时可用：无需下载安装，在微信内随时可用，极大降低用户使用门槛。触手可及、覆盖广泛：扫码或搜索即可快速打开，覆盖各行各业的丰富场景。用完即关、无须卸载：不占用手机宝贵内存空间，使用结束后关闭即可，无残留负担。微信小程序的特点（二）高效工具、使用方便：轻量化、碎片化，模式简单，能帮助用户快速完成任务。低成本、短周期：开发难度低，可跨平台，降低开发成本和周期。大流量、高体验：共享微信海量用户，提供接近原生App的体验。小程序与原生App、WebApp的区别对比项微信小程序原生AppWebApp下载无须下载需从应用商店下载无须下载安装无须安装需安装，占用内存无须安装推送模板信息自主推送浏览器无法推送升级用户无须升级需要升级操作用户无须升级开发周期短长适中开发成本低高适中微信小程序的用途●企业用途：提升品牌知名度，增强用户黏性，创造商业价值。●商家用途：实现客户引流与留存，节省运营成本，形成商业闭环。●政务人员：让信息更透明，办事更高效，推动政务服务轻量化。●开发者：降低开发门槛，提供新开发方式，可快速完成开发上线。●个人用户：简化使用步骤，节省手机内存，最大程度减少服务骚扰。微信小程序的发展前景（一）重构生活习惯：微信小程序凭借极低的获客成本、获客速度以及开发成本，大幅降低了创业试错成本，相关成功案例屡见不鲜。扩大生态体系：微信小程序通过加大对开发者的支持，能够实现更多的功能，为用户开放更多的权限，将来更好地借助扩展插件来进行微信小程序的开发，不断扩大微信小程序的生态体系空间。加强功能：随着更多用户和应用场景的拓展，微信小程序也必将不断完善自己、加强自身功能，方便开发者进行深度应用挖掘，微信小程序的配套服务将会不断完善。微信小程序的发展前景（二）解决用户留存率偏低的问题：通过持续的功能更新与体验优化，不断提升用户对小程序的粘性与留存能力。电商将会迎来一次大爆发：基于社交关系链的去中心化电商模式，将借助小程序的便捷性实现突破性增长。科技向善微信小程序以轻量化、低门槛、广连接的特性，让技术真正走进普通人的生活。它不仅是商业创新的载体，更成为社会公益的桥梁：乡村教育通过小程序触达优质资源、适老化设计帮助银发群体跨越数字鸿沟……这些实践印证着技术应有的温度。技术从不是冰冷的工具，而是服务于人、连接社会的桥梁——通过简化办事流程、助力小微企业经营、打通便民服务、弥合数字鸿沟等实践，技术让更多人平等享受数字便利。

科技向善是技术发展的永恒命题。作为开发者与使用者，我们应始终坚守技术初心：以用户为本，以实用为先，不盲目追求流量与功利，而是用技术解决真实问题、传递温暖与信任;同时主动承担社会责任，守护信息安全、尊重隐私权益、传播正向价值，让微信小程序在便捷高效之外，更有底线、有担当、有情怀，让数字创新真正惠及每一个人。技术初心与社会责任任务1.2搭建微信小程序开发环境微信开发者工具工具简介：微信官方提供的集成开发环境（IDE），集代码编写、调试、预览、发布于一体。核心优势：提供简单高效的应用开发框架，内置丰富的原生组件及API接口。开发目标：帮助开发者快速构建功能完善、体验流畅，接近原生App的微信小程序。微信小程序开发步骤申请小程序账号安装微信开发者工具配置项目开发功能集成调试发布上线注册微信小程序账号微信小程序账号是在微信公众平台注册的专属账号，用于创建、开发、管理和发布微信小程序。注册微信小程序账号的步骤打开微信公众平台，点击“立即注册”，选择小程序类型，依次完成相关信息填写，即可进入微信小程序管理平台。下载微信开发者工具在微信官方文档小程序模块的“工具”栏目中找到微信开发者工具的下载地址，依据开发环境操作系统的版本来选择需要下载的版本。安装微信开发者工具以Windows1064位操作系统为例进行微信开发者工具（1.06.2301160版本）的安装，双击下载的安装包，安装程序打开后，根据安装向导完成安装。使用微信开发者工具（一）双击桌面“微信开发者工具”快捷方式，打开微信开发者工具登录页，用绑定小程序账号的身份证个人用户的微信进行扫描确认，开发者工具将使用这个微信账号的信息进行小程序的开发和调试。使用微信开发者工具（二）创建小程序界面，完善界面相关信息进行微信小程序工程创建。使用微信开发者工具（三）AppID是微信小程序的对应唯一编号，该值是从微信公众平台的小程序管理平台中获取的。在小程序管理平台中填写小程序相关信息，再从“账号信息”中获取对应的AppID。使用微信开发者工具（四）微信开发者工具主界面分为菜单栏、工具栏、模拟器、目录树、编辑器、调试器六大部分。任务1.3微信小程序发布上线微信小程序发布上线任务1.4“HelloWorld”微信小程序开发体验“HelloWorld”微信小程序开发体验（一）通过微信开发者工具，补充项目名称、目录及AppID等信息，选择“不使用云服务”后端服务，模板选择“JavaScript-基础模板”，点击“确定”。“HelloWorld”微信小程序开发体验（二）单击工具栏上的“编译”按钮，可以在工具的左侧模拟器界面看到这个小程序效果；也可以单击预览按钮，通过微信扫码在手机上体验第一个小程序。拓展项目微信公众号，主要是面向个人、政府、媒体、企业等机构推出的合作推广业务。微信公众号于2012年8月正式上线，曾被命名为“官号平台”和“媒体平台”。微信公众号可以通过微信将品牌推广给上亿的微信用户，以减少宣传成本，提高品牌知名度，打造更具影响力的品牌形象。微信公众号分为服务号和订阅号。运营主体如果是组织(如企业、媒体、公益组织)，则可以申请服务号;运营主体如果是组织或个人，则可以申请订阅号。个人不能申请服务号。拓展项目1：了解微信公众号根据相应的组织类型在微信公众平台进行微信公众号账号注册。常见的账号注册类型有企业类型、媒体类型、政府单位、其他组织。拓展项目2：注册微信公众号账号微信公众平台提供了一些直接维护与管理微信公众号的常规功能，不具备开发能力的用户可直接利用微信公众平台的后台管理系统来进行微信公众号的管理。拓展项目3：管理微信公众号[xxx]学校主讲教师：[xxx]微信小程序开发微信小程序入门微信小程序项目的分析与设计微信小程序开发[xxx]学校主讲教师：[xxx]学习目标知识与能力目标了解软件工程全生命周期管理。掌握微信小程序项目的需求分析。掌握微信小程序项目的功能设计。掌握微信小程序项目的UI设计。素养目标培养逻辑思维能力和创新能力。培养良好的动手能力和实操能力。培养独立学习、获取新知识和新技能的能力。培养良好的学习习惯。知识导图任务分解1.基础认知：了解软件工程及软件生命周期，建立项目开发的整体框架思维。2.需求分析：掌握微信小程序项目的需求分析，涵盖业务、用户及功能需求三个维度。3.功能、UI设计规范：掌握功能设计核心内容，熟悉UI设计规范与标准流程，提升用户体验。4.案例拓展：举一反三，分析学分银行信息服务及农产品电商平台小程序的设计逻辑。任务2.1软件工程全生命周期管理软件工程的概念发展历程：软件工程从计算机程序和程序设计发展而来，主要经历了三个阶段：程序设计阶段（1946-1955）软件设计阶段（1956-1970）软件工程阶段（1970至今）核心定义：致力于研究如何以系统性、规范化的方法开发和维护软件。软件工程的目标与原则🎯核心目标在给定成本和进度下，开发出满足用户需求的高质量软件。具体涵盖：适用性、有效性、可靠性、可维护性等关键维度，确保软件产品的价值交付。🛠实施原则1.选取合适的开发范型，匹配项目特性；2.采用科学的设计方法，保障架构合理性；3.提供高质量的工程支持，落实标准规范；4.重视软件工程管理，把控进度与质量。软件生命周期定义：软件生命周期是指从软件的产生到维护的整个周期。主要阶段：1.可行性研究阶段2.需求分析阶段3.软件设计阶段4.软件编程阶段5.软件测试阶段6.软件运行与维护阶段微信小程序项目管理

微信开发者工具提供了一套简单、高效的应用开发框架和丰富的组件及API,以帮助开发者开发出接近原生App使用体验的微信小程序。微信小程序作为软件的一种，遵循软件工程管理方法。本书将综合素质培养信息管理平台移动端微信小程序命名为“成大通”，并将其作为案例，以帮助学生理解微信小程序项目的全生命周期管理。任务2.2项目需求分析需求分析概述需求分析是将用户非形式的需求转化为完整、清晰、规范的文档的过程。其核心在于明确“做什么”，确保产品能够真正满足用户期望。需求分析的三个层次业务需求(Business)对应组织开发软件的目标与愿景，回答“为什么做”的问题。用户需求(User)描述用户为完成任务所需的具体操作，回答“用户做什么”的问题。功能需求(Functional)定义软件必须实现的具体功能，回答“系统做什么”的问题。业务需求分析●学生端需求：记录个人成长轨迹，实时查询“433”规划完成进度。●教师端需求：查看所带学生发展情况，指导学生规划制定，进行过程性评价与反馈。●二级学院需求：统筹全院学生培养工作，分析整体数据，落实“433”成才体系建设目标。●职能部门需求：监管全校综合素质培养过程，统计分析宏观数据，辅助教育决策管理。用户需求分析●学生用户：关注个人综合素质记录、成长轨迹查询及活动参与便捷性。●教师用户：含导师与辅导员，需高效开展指导、审核材料及反馈评价。●二级学院：侧重全院数据统计、业务流程管理及培养质量把控。●职能部门：聚焦跨部门协同、政策执行及宏观数据监管与决策支持。功能需求分析（一）●端侧划分：平台分为Web端和移动端（微信小程序）双端架构。●移动端定位：主要面向学生和导师用户，提供轻量化便捷服务。●功能结构：涵盖用户管理与核心业务模块，支撑平台完整功能体系。功能需求分析（二）功能需求分析（二）政策一览最新政策资讯

与解读指南成才活动丰富的实践活动

与成长机会433风采优秀学生事迹

榜样力量展示我的433个人成长档案

规划与记录433认证线上审核流程

认证结果公示职业素养在软件项目开发中，需求规格说明书、设计方案等文档的编制与管理需遵循一系列标准与行业规范，以下是一些核心标准。《系统与软件工程软件生存周期过程》（GB/T8566—2022），定义了从概念到废弃的整个软件生命周期的过程、活动和任务。《计算机软件文档编制规范》（GB/T8567—2006），规定了整个软件生命周期中应产生的22种文档的格式、内容要求和编写指南。《计算机软件需求规格说明规范》（GB/T9385—2008），规定了需求规格说明书的内容、特性、编写大纲和评审要求。相关标准与行业规范任务2.3

项目功能设计项目功能设计核心目标：将需求分析的结果转化为具体可落地的技术实现方案，为后续编码与开发奠定坚实基础。关键内容：数据库设计：规划数据存储结构，确保数据的完整性与高效读写。接口设计：定义API接口规范，明确系统间的数据交互标准。模块划分：拆解业务逻辑，构建高内聚、低耦合的功能模块体系。项目功能设计任务2.4项目UI设计UI设计的重要性UI即UserInterface（用户界面）的缩写。UI设计又称界面设计，是指对软件的人机交互界面、操作逻辑的整体设计。让软件更加生动，有自己的个性让软件的操作更便捷，用户更易上手让软件深入人心，延长软件的使用寿命UI设计的规范一致性原则准确性原则可读性原则布局合理性原则系统操作合理性原则系统响应时间原则UI设计的流程确认目标用户采集目标用户习惯的交互方式提示和引导用户系统一致性设计系统可用性设计微信小程序UI设计指南友好礼貌重点突出流程明确导航清晰明确缩短等待时间，反馈及时异常可控，有路可退便捷优雅统一稳定视觉规范项目UI设计设计规范与流程概览本项目的UI设计致力于打造美观、易用的用户界面，核心涵盖以下关键环节：设计原则：遵循一致性、易用性与美学原则，确保用户体验流畅自然。色彩搭配：建立规范的色彩体系，区分主色调、辅助色与中性色，增强视觉层级。字体选择：精选易读性强的字体组合，规范字号层级，提升信息传达效率。页面布局：运用栅格系统与留白艺术，构建清晰、平衡的页面结构。拓展项目拓展项目1：学分银行信息服务小程序分析与设计学分银行是一种借鉴银行的功能特点，旨在使学生能够自由选择学习内容、学习时间、学习地点的管理模式，为学习者或先前学习成果携带者提供学习成果认证、积累与转换服务。学分银行信息服务小程序包括新闻动态、业务流程、组织架构、标准体系、个人档案、成果存储、成果认证和成果转换等模块。拓展项目2：农产品电商平台小程序分析与设计某企业希望开发一个农产品电商平台小程序，以连接农户与消费者，实现农产品从产地直接到消费者手中的点到点的销售，减少中间环节，提高农户的收益。针对其要求，进行相应的需求分析，设计农产品电商平台小程序。农产品电商平台小程序包括蔬菜豆菇、水果鲜花、鲜肉蛋禽、水产海鲜、速食面点、粮油零食、生活超市、乳品烘焙、酒水饮料等品类。打开这些品类还可看到时令预售、今日必买等模块，方便用户选购。微信小程序项目的分析与设计微信小程序开发[xxx]学校主讲教师：[xxx]微信小程序项目页面实现微信小程序开发[xxx]学校主讲教师：[xxx]学习目标知识与能力目标1.掌握微信小程序项目静态页面的实现方法。2.掌握微信小程序项目静态页面的框架实现方法。3.掌握微信小程序项目静态页面的样式设计方法。4.掌握微信小程序项目页面间的逻辑交互。素养目标1.引导学生将技术学习与现实社会应用相结合。2.培养学生良好的工作作风、良好的观察和思考能力。3.通过案例讲解与实训等，帮助学生对所学理论知识进行理解和运用，培养其探究精神。知识导图任务分解1.核心掌握：“成大通”小程序页面实现掌握“成大通”首页、政策一览、成才活动、433风采、433认证、我的433以及433数据画像等页面的基本实现方法和步骤，夯实基础。2.拓展应用：举一反三迁移能力将所学知识迁移，了解学分银行信息服务小程序、农产品电商平台小程序等不同类型项目的页面实现逻辑与方法。任务3.1“成大通”首页实现微信小程序的开发流程●第一步：规划定义。明确功能需求与业务目标。●第二步：描绘交互图。设计页面布局与用户操作流程。●第三步：完成静态界面。还原设计稿，构建页面骨架。●第四步：实现业务逻辑。编写代码，处理数据与交互。微信小程序的代码组成●JSON配置文件负责微信小程序的全局配置、页面配置及工具配置，定义项目结构与属性。●WXML页面结构类似HTML，用于构建微信小程序的页面结构，结合组件实现界面布局。●WXSS样式文件类似CSS，用于描述页面的样式，支持响应式布局与样式复用。●JS逻辑脚本处理页面的业务逻辑、数据交互及用户事件响应，实现动态功能。JSON文件详解●核心用途：主要用于项目的静态配置工作。●全局设置：修改app.json可改变小程序全局属性。●典型场景：调整导航栏标题（如示例中从Weixin改为Hello）。WXML文件详解WXML(WeiXinMarkupLanguage)WXML是微信小程序的标记语言，主要用于构建页面结构，它的作用类似于网页开发中的HTML。开发者通过组合各种WXML组件标签（如视图容器、表单、导航等），可以快速搭建出丰富多样的小程序界面，实现数据的绑定与渲染。WXSS文件详解WXSS定义：WXSS(WeiXinStyleSheets)是微信小程序的样式表语言，主要用于描述WXML组件的样式，决定页面组件的最终呈现效果。核心特性：兼容CSS大部分特性：支持CSS标准中的选择器、盒模型、布局等核心语法，降低学习成本。新增自适应单位rpx：为适配不同尺寸的手机屏幕，提供了rpx(responsivepixel)单位，可根据屏幕宽度自动换算，无需手动进行媒体查询适配。支持样式导入：WXSS支持使用@import语句导入外联样式表。JavaScript文件详解核心定位：JS文件是小程序的“大脑”，承载着页面的核心逻辑。主要功能：实现业务逻辑处理、响应用户交互（如点击、滑动）、调用微信原生API接口等。作用价值：是连接数据与视图的桥梁，决定了页面的动态效果和功能实现能力。微信小程序的目录结构全局配置文件（App系列）：包含描述整体程序的核心文件，决定小程序的全局行为和公共样式：app.js：小程序逻辑与生命周期管理app.json：全局配置（页面路径、窗口表现等）app.wxss：全局公共样式表页面文件（Page系列）：每个页面由四个同名不同后缀的文件组成，分别负责页面的不同维度：.js：页面逻辑处理.wxml：页面结构与数据绑定.json：页面配置（覆盖全局配置）.wxss：页面样式（局部生效）微信小程序的工程文件app.json文件：是当前微信小程序的全局配置文件，包含了微信小程序的所有页面路径、界面表现、网络超时时间、底部tab等内容。微信小程序的工程文件app.wxss文件：是当前微信小程序的全局样式文件，文件中设计的样式会作用于当前微信小程序的所有页面。微信小程序的工程文件app.js文件：当前微信小程序的逻辑配置文件。每个微信小程序都需要在app.js文件中调用App方法，以此来注册微信小程序实例。同时还可以在该文件中绑定生命周期回调函数、错误监听函数等。微信小程序的工程文件project.config.json文件：主要提供满足开发者个人喜好的个性化配置，如界面颜色、编译配置等。微信小程序的工程文件sitemap.json文件：用于配置微信小程序及其页面是否允许被微信索引，文件内容为一个JSON对象。如果没有sitemap.json文件，则默认所有页面都允许被微信索引。“成大通”首页框架实现（一）拆分效果图从上到下划分区域新建页面依次添加各个区域的组件“成大通”首页框架实现（二）通过对首页效果图进行解析，可以将首页划分为轮播图、栏目导航、栏目名称、栏目内容等区域。“成大通”首页框架实现（三）完成“成大通”首页，主要使用了以下组件。viewswiper、swiper-itemimagetextvan-dividervan-image“成大通”首页框架实现（三）“成大通”首页的WXML文件中使用了van-divider和van-image两个以“van-”开头的组件，这两个组件不属于微信小程序官方文档中自带的基础组件，其来源为第三方UI框架（VantWeapp），是小程序开发中常用的拓展性UI组件。van-dividervan-image“成大通”首页框架实现（四）在微信小程序开发中，如果使用第三方UI框架，一般要有以下几个步骤：第一步：安装UI库。可以通过npm安装，或者直接复制源码文件夹；第二步：在json配置usingComponents；第三步：wxml直接用组件标签。“成大通”首页框架实现（五）“成大通”首页空间是包含多个部分的，也可以通过block组件来分块。block并不是一个有具体表现形式的组件，它仅仅是一个包装组件，不会在页面中做任何渲染，只接受控制属性。利用block组件可以将WXML文件中的多个组件代码包装成一个“块”。如此一来，就可以将if（wx:if）或者for（wx:for）语句直接写在block组件中，从而实现对逻辑的控制。block“成大通”首页样式设计（一）完成3.1.5小节首页框架代码的编写后，“成大通”首页的基础框架已搭建完毕，但页面呈现效果尚未达到设计要求。这是因为微信小程序的页面样式效果通常需要在WXML文件完成组件编写后，通过绑定WXSS文件中的样式属性来实现。“成大通”首页样式设计（二）WXSS样式文件中编写的样式规则，通过选择器匹配并作用到对应的WXML组件。

WXML结构+WXSS选择器=样式生效WXML给组件打“标记”WXSS用选择器“找到”这个标记匹配成功，样式作用到对应组件“成大通”首页样式设计（三）WXSS支持的选择器选择器样例样例描述.class.intro选择所有拥有class="intro"的组件#id#firstname选择拥有id="firstname"的组件elementview选择所有view组件element,elementview,checkbox选择所有文档的view组件和所有的checkbox组件::afterview::after在view组件后边插入内容::beforeview::before在view组件前边插入内容“成大通”首页逻辑交互（一）微信小程序页面：微信平台为微信小程序中的每个页面提供了Page构造器，用来注册微信小程序页面，该构造器在page.js文件中调用。Page构造器接收一个对象（object）作为参数，data对象、onLoad()、onReady()、onShow()、onHide()、onUnload()等页面生命周期函数，会自动作为该对象参数的核心组成部分。“成大通”首页逻辑交互（二）页面的生命周期：页面初次加载的时候，微信平台就会给Page实例派发onLoad事件。Page构造器参数中定义的onLoad()函数会被调用，且在页面没被销毁之前只会触发1次。在onLoad()的回调中，可以获取当前页面所调用的option参数。页面显示之后，Page构造器参数中定义的onShow()函数会被调用。通常，从其他页面返回到当前页面时，当前页面的onShow()函数都会被调用。在页面初次渲染完成时，Page构造器参数中定义的onReady()函数会被调用，且在页面没被销毁前只会触发1次。onReady()触发时，表示页面已经准备妥当，可以进行显示了。以上3个函数触发的时机是onLoad()早于onShow()，onShow()早于onReady()。在页面不可见时，Page构造器参数中定义的onHide()函数会被调用。这种情况会在使用wx.navigateTo或底部tab切换到其他页面时触发。使用wx.redirectTo或wx.navigateBack从当前页面返回到其他页面时，当前页面会被微信平台销毁回收，此时Page构造器参数中定义的onUnload()函数会被调用。“成大通”首页逻辑交互（二）页面的生命周期：Page实例的生命周期是由微信平台根据用户操作主动触发的，其执行时机由平台统一管控。这类函数的执行具有严格的时序性和关联性，为了避免程序的混乱，不应该在其他代码中主动调用这些生命周期函数。“成大通”首页逻辑交互（三）onLoad()函数的option参数：微信小程序把页面的打开路径定义成页面URL，其组成格式和网页的URL的组成格式类似。在页面路径后使用英文问号“?”分隔path和query部分。query部分的多个参数使用“&”进行分隔，参数的名字和值使用“key=value”的形式声明。在Page构造器里，onLoad()函数的option参数可以拿到当前页面的打开参数，其类型是object，其键值对与页面URL的query键值对一一对应。“成大通”首页逻辑交互（四）页面跳转和路由：当微信小程序拥有多个页面时，可以通过wx.navigateTo函数跳转到一个新的页面。例如在首页使用两次wx.navigateTo后，页面会有3层嵌套结构，通常把这样的一个页面层级称为页面栈。“成大通”首页逻辑交互（四）页面跳转和路由：wx.navigateTo函数：保留当前页面，跳转到新页面(非tabBar页面)，可返回。wx.navigateBack()函数：关闭当前页面，返回上一页面或多级页面。wx.redirectTo()函数：关闭当前页面，跳转到新页面(非tabBar页面)，不可返回到当前页。wx.switchTab()函数：跳转到tabBar页面，并关闭其他所有非tabBar页面。wx.relaunch()函数：关闭所有页面，打开到应用内的某个页面。“成大通”首页逻辑交互（五）页面用户行为：下拉刷新onPullDownRefresh()函数：监听用户下拉刷新动作，用于实现页面数据重新加载与刷新。上拉触底onReachBottom()函数：监听页面上拉触底事件，常用于加载更多列表数据。页面滚动onPageScroll()函数：监听页面滚动行为，可获取滚动距离并执行相应逻辑。用户转发onShareAppMessage()函数：监听用户点击转发按钮，用于自定义转发标题、图片和路径。科技向善在微信小程序的页面逻辑与交互实现中，每一处布局、跳转与反馈设计，都承载着数字技术对人的关怀。清晰的页面结构、顺畅的操作流程，不仅提高了使用效率，更体现了以用户为中心的设计理念。兼顾不同人群的使用习惯，做好无障碍适配，让不同年龄、背景的群体都能便捷使用，是技术温度最真实的体现。科技向善，不在于功能多复杂，而在于交互更友好、体验更平等。我们在打磨页面逻辑、优化交互细节的同时，坚守设计初心，让数字技术服务更包容、更温暖。交互体验与无障碍设计“成大通”首页逻辑的实现（一）“成大通”首页逻辑的要求：单击轮播图中的图片，可以查看该图片对应的详情信息。单击栏目导航中的模块名称，可以进入对应的引导页。单击“新闻动态”栏目下的新闻标题，可以进入对应的新闻详情页面。“成大通”首页逻辑的实现（二）绑定数据js文件Page中data定义数据wxml通过{{变量}}绑定数据实现JS逻辑函数设计逻辑实现思路编写js逻辑函数绑定事件wxml区域或组件绑定事件调试交互效果根据设计思路调试交互实现效果“成大通”首页逻辑的实现（三）wxml绑定事件：在WXML标签上通过bind/catch前缀绑定事件（如bindtap），并在对应页面的JS文件中定义同名函数，用户触发操作时便会执行该逻辑。“成大通”首页逻辑的实现（三）data-*的使用：data-*是WXML文件

向JS文件中事件函数传递自定义数据的方式，在标签上以data-*定义自定义属性，事件触发后可在JS中通过事件参数.currentTarget.dataset获取对应值。任务3.2—任务3.7

“成大通”各功能页面实现“成大通”政策一览页面实现（一）政策一览页面框架实现在“成大通”首页点击“433政策”将进入政策一览页面，通过对政策一览页面的效果图进行解析可知，该页面中主要显示最新的6条政策。每条政策为一个整体，其中包括一张图片、一个文字标题和一个发布时间，并且每条政策之间有一定间隙。政策一览页面样式设计政策一览页面框架实现后，根据设计效果图实现页面wxss样式文件中的样式设计，主要通过标签选择器、类选择器定义组件的样式规则，同时还需要在wxml文件中为相应的组件加上对应属性，并赋予与样式选择器名称匹配的取值，以实现组件样式的精准绑定。政策一览页面逻辑交互政策一览页面作为“433”相关政策的快速预览页面，需要处理的逻辑为单击政策进入该政策对应的详情页面。“成大通”政策一览页面实现（二）“成大通”政策一览页面新增了scroll-view组件的使用。scroll-view表示可滚动视图区域。当使用纵向滚动时，需要给scroll-view组件指定一个固定高度（通过WXSS设置height）。scroll-view“成大通”政策一览页面实现（三）政策一览页面中使用了van-image组件，需注意在json文件中配置vant组件库中的image组件以确保其正常生效。“成大通”成才活动页面实现（一）成才活动页面框架实现在“成大通”首页点击“433活动”将进入成才活动页面，通过对成才活动页面的效果图进行解析可知，该页面中主要显示最新的几个活动。每个活动以一张图片的形式呈现，并且图片之间有一定间隙。成才活动页面样式设计成才活动页面框架实现后，根据设计效果图实现页面wxss样式文件中的样式设计，主要通过标签选择器、类选择器定义组件的样式规则，同时还需要在wxml文件中为相应的组件加上对应属性，并赋予与样式选择器名称匹配的取值，以实现组件样式的精准绑定。成才活动页面逻辑交互成才活动页面作为“433”相关活动的快速预览页面，需要处理的逻辑为单击活动进入该活动对应的详情页面。成才活动页面中使用了van-image组件，需注意在json文件中配置vant组件库中的image组件以确保其正常生效。“成大通”成才活动页面实现（二）“成大通”433风采页面实现（一）433风采页面框架实现在“成大通”首页点击“433风采”将进入433风采页面，通过对433风采页面的效果图进行解析可知，该页面中主要显示全校“433”完成出色的学生代表。每个学生代表的信息为一个整体，其中包括图片、姓名、系别及介绍，页面以一行排列2个学生代表的形式进行布局。433风采页面样式设计433风采页面框架实现后，根据设计效果图实现页面wxss样式文件中的样式设计，主要通过标签选择器、类选择器定义组件的样式规则，同时还需要在wxml文件中为相应的组件加上对应属性，并赋予与样式选择器名称匹配的取值，以实现组件样式的精准绑定。433风采页面逻辑交互433风采页面作为“433”完成出色的学生代表的快速预览页面，需要处理的逻辑为单击学生代表进入该学生代表对应的详情页面。“成大通”433风采页面实现（二）433风采页面中使用了van-image组件，需注意在json文件中配置vant组件库中的image组件以确保其正常生效。“成大通”433认证页面实现（一）433认证页面框架实现在“成大通”首页点击“433认证”进入433认证页面，通过对433认证页面的效果图进行解析可知，该页面中主要显示学生的“433”认证完成情况。每个学生的认证完成情况为一个整体，其中包括图片、姓名、系别、认证情况概述，并且学生之间有一定隙。433认证页面样式设计433认证页面框架实现后，根据设计效果图实现页面wxss样式文件中的样式设计，主要通过标签选择器、类选择器定义组件的样式规则，同时还需要在wxml文件中为相应的组件加上对应属性，并赋予与样式选择器名称匹配的取值，以实现组件样式的精准绑定。433认证页面逻辑交互433认证页面是所有学生认证情况的快速预览页面，需要处理的逻辑为单击学生进入该学生对应的详情页面。“成大通”433认证页面实现（二）433认证页面中使用了van-image组件，需注意在json文件中配置vant组件库中的image组件以确保其正常生效。“成大通”我的433页面实现我的433页面框架实现在“成大通”首页点击“成才之路”将进入我的433页面，通过对我的433页面的效果图进行解析可知，该页面中主要显示学生的10项“433”内容，并显示每项的当前状态。点击每项内容，可查看详情或进行填写。每项内容为一个整体，其中包括Logo图片、项目名称、当前状态。我的433页面样式设计我的433页面框架实现后，根据设计效果图实现页面wxss样式文件中的样式设计，主要通过标签选择器、类选择器定义组件的样式规则，同时还需要在wxml文件中为相应的组件加上对应属性，并赋予与样式选择器名称匹配的取值，以实现组件样式的精准绑定。我的433页面逻辑交互我的433页面作为学生10项“433”内容的快速预览和填写向导页面，需要处理的逻辑为单击内容可查看详情或进行填写。“成大通”433数据画像页面实现（一）433数据画像页面框架实现在“成大通”首页点击“433画像”将进入433数据画像页面，通过对433数据画像页面的效果图进行解析可知，该页面中主要显示学院、专业、班级的“433”完成情况，分别为“本学院完成情况”、“本专业完成情况”和“本班级完成情况”。433数据画像页面样式设计433数据画像页面框架实现后，根据设计效果图实现页面wxss样式文件中的样式设计，主要通过标签选择器、类选择器定义组件的样式规则，同时还需要在wxml文件中为相应的组件加上对应属性，并赋予与样式选择器名称匹配的取值，以实现组件样式的精准绑定。433数据画像页面逻辑交互433数据画像页面有3个标签，需要处理的逻辑为单击标签可查看对应的统计图表。“成大通”433数据画像页面实现（二）“成大通”433数据画像页面新增了van-tabs、van-tab、ec-canvas组件的使用。van-tabs及van-tab组件均源自Vant框架的tabs、tab选项卡组件，这类组件用于实现不同内容区域间的切换功能。其中tabs需与tab组件配合使用，共同完成选项卡的功能实现，需在JSON文件中完成组件配置。ec-canvas是ECharts团队为了兼容微信小程序canvas组件而提供的一个可视化图表组件。van-tabsvan-tabec-canvas“成大通”433数据画像页面实现（三）统计图：统计图表是统计描述的重要工具，代表了一张图像化的数据，常以所用的图像命名，如饼状图、柱状图、折线图等。可以生动、形象的进行数据结果的展示，让人们透过视觉化的符号，更快速地读取原始数据，更有利于人们直观了解数据。“成大通”433数据画像页面实现（四）微信小程序开发引入ec-canvas组件方法、统计图实现方法：第一步：在GitHub上下载echarts-for-weixin项目。第二步：复制ec-canvas文件夹到微信小程序项目工程目录下。第三步：在需要显示echarts图表的小程序页面的json文件、js文件中加入对应的引用。json文件js文件import*asec