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

微信小程序项目页面实现微信小程序开发[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*asechartsfrom'../../ec-canvas/echarts';{"usingComponents":{"ec-canvas":"../../ec-canvas/ec-canvas"//配置页面支持ec-canvas组件}}“成大通”433数据画像页面实现（五）微信小程序开发引入ec-canvas组件方法、统计图实现方法：第四步：在需要显示echarts图表的小程序页面的wxml文件中加入对应的ec-canvas组件。wxml文件“成大通”433数据画像页面实现（六）微信小程序开发引入ec-canvas组件方法、统计图实现方法：第五步：在js文件中初始化ec的值。对于所有ECharts图表都是通用的，用户只需要修改上面option的内容，即可改变图表。js文件functioninitChart(canvas,width,height,dpr){constchart=echarts.init(canvas,null,{width:width,height:height,devicePixelRatio:dpr//像素});canvas.setChart(chart);

varoption={...};chart.setOption(option);returnchart;}

Page({data:{ec:{onInit:initChart}}});“成大通”433