Web前端应用开发项目式教程（基于uni-app框架） 课件 任务6　制作文章详情页

任务6制作文章详情页Web前端应用开发项目式教程（基于uni-app框架）

目录CONTENTS016.5任务实施6.7学习自评Part16.1任务描述6.2任务效果6.4知识储备6.8课后练习6.9任务拓展6.3学习目标6.6任务测试通过点击社区首页“文章列表”中的文章卡片可以进入文章详情页，文章详情页包含文章的发布者信息、发布时间、标题、正文等内容，用户可对文章内容进行浏览、关注、转发、评论和点赞操作，也可在评论区查看、回复和点赞其他用户的评论，这是文章管理系统包含的常规功能，也是移动端系统最常见的交互手段，能够让用户有更好的应用体验。

6.1任务描述

6.2任务效果“文章详情页”效果图

6.3学习目标能力目标素养目标知识目标通过对组件的封装与复用，培养学习者遵守行业编码规范的意识。通过引导学习者自学官网开发手册，培养其热爱学习、主动学习的精神。通过解决软件兼容性问题，培养学习者追求软件高质量的职业意识。通过网络系统的开发，培养学习者的网络案例意识，通过健康用网传播正能量。掌握组件的复用。掌握onShareAppMessage小程序页面转发方法的使用。掌握Vue$nextTick回调延迟方法的使用。掌握Vuefilters过滤器方法的使用。掌握input组件always-embed和adjust-position属性的用法。能够使用组件提升代码复用率。能够使用onShareAppMessage方法实现转发页面的自定义信息设置。能够使用filters过滤器实现日期和时间格式化。能够解决IOS系统中键盘调起后的输入框被覆盖的问题。。

6.4知识储备6.4.1组件复用与拓展组件的复用和拓展是两个紧密相关的概念，它们都是为了提高代码的可复用性和可维护性。组件的复用是指在不同场景下使用同一个组件的能力，而组件的拓展则是指在已有组件的基础上进行修改和扩展，从而创建一个新的组件。在实际开发中，通常会将一些通用的组件抽象出来，例如按钮、表单、模态框等，然后在不同的页面中复用这些组件。组件复用可通过多种方式实现，例如：利用props传递数据，使子组件能根据父组件传递的数据进行定制化渲染；使用插槽，让父组件能插入自定义内容，使子组件更灵活；使用高阶组件，将组件逻辑封装为函数，或使用mixins，将共享逻辑封装在一起，减少重复编写。组件拓展是指在已有组件的基础上进行修改和扩展，从而创建一个新组件。通常情况下，组件的拓展可以通过继承或者组合等方式来实现。在继承方式中，可以通过继承已有组件的方式来创建一个新的组件，并在新组件中添加新的属性和方法。在组合方式中，可以将已有组件作为子组件，然后在新组件中添加新的属性和方法。

6.4知识储备6.4.1组件复用与拓展具体实例请参见教材6.4.1节。

6.4知识储备6.4.2uni-app跨端兼容虽然uni-app具有跨平台的优势，但是不同平台之间还是存在一些兼容性问题，需要开发者注意。问题解决方法样式兼容性不同平台的样式支持度不同，需要开发者针对不同平台进行样式调整。可以使用平台判断工具，例如uni.getSystemInfoSync()来获取当前平台信息，并根据平台信息动态修改样式。组件兼容性不同平台支持的组件和属性不同，需要开发者注意对应组件和属性的支持情况。可以使用条件渲染或者slot来动态加载不同平台的组件。API兼容性不同平台支持的API不同，需要开发者使用条件编译来针对不同平台编写不同的API调用代码。生命周期兼容性不同平台的生命周期可能存在差异，需要开发者注意不同平台的生命周期差异并进行针对性调整性能兼容性不同平台的性能表现不同，需要开发者注意调整性能瓶颈。

6.4知识储备6.4.3DOM更新回调

$nextTick()是Vue提供的一个异步方法，它的作用是在DOM更新之后执行回调函数。在Vue更新DOM后，可能会需要访问更新后的DOM或者执行一些需要在DOM更新后才能执行的操作，这时可以使用$nextTick()方法来保证在DOM更新完成后再执行这些操作。两种使用方法：在DOM更新后调用Promise的形式调用

6.4知识储备6.4.3DOM更新回调$nextTick方法常见的用途包括：在修改数据后立即访问更新后的DOM。在使用$refs访问子组件时，保证子组件已经创建完成。在使用第三方UI库时，保证UI库中的组件已经正确渲染。

6.5任务实施6.5.1页面结构分析与搭建个人资料页结构分析1.新建页面文件：文章详情页是社区模块的二级页面，可以通过点击社区首页文章列表中的文章卡片进入。在/pages/community/目录下新建名为“article-details”的Vue文件，在新建文件时勾选“创建同名目录”，文件最终路径为：“/pages/community/article-details/article-details.vue”2.设计图分析：以评论区上方的水平分割线为界，可将页面划分为上下两部分，上部分为文章详情区域，下部分为文章评论区域。3.代码实现：通过设计图可知，在商品详情页中存在样式相同的评论区，因此可将评论区域封装为组件，从而提高代码的复用性。

6.5任务实施6.5.2制作文章详情区域子任务1：制作文章相关信息。文章相关信息部分分为左右结构，左侧内容为文章发布者头像、昵称与文章发布时间，右侧内容为关注按钮。关注按钮具有未关注、已关注与互相关注三种状态，不同状态下的按钮样式也不相同。

6.5任务实施6.5.2制作文章详情区域子任务2：制作文章主体信息部分。

文章主体信息部分为上下结构，上方为标题，下方为正文，正文中又包含文本和图片。正文中的文字使用text组件展示，图片使用image组件展示。

6.5任务实施6.5.2制作文章详情区域子任务3：制作文章互动部分。

文章互动部分包含转发、评论和点赞三部分，每部分由图标和文字组成。点赞按钮具有未点赞和已点赞两种状态，未点赞状态下图标和文字为灰色，已点赞状态下图标为主题色。Template部分

6.5任务实施6.5.2制作文章详情区域JavaScript部分运行效果图

6.5任务实施6.5.3制作评论区域子任务1：新建组件文件。

在/components目录下新建组件文件，文件命名为“common-comments”，勾选“创建同名目录”，创建文件，文件最终路径为“/components/common-comments/common-comments.vue”。子任务2：制作评论标题与列表部分。本模块中评论分为一级评论和二级评论，每条评论为左右结构。左侧为评论者头像，右侧为评论相关信息，主要包括评论者昵称、身份标识、点赞按钮、评论内容、评论发布时间以及评论回复按钮。二级评论与一级评论结构相同，宽度与一级评论相关信息部分宽度相同，二级评论默认折叠隐藏，点击“展开回复”按钮时显示。当一级评论列表为空时，显示“暂无评论”图片。二级评论列表为空时，不显示“展开回复”按钮。

6.5任务实施6.5.3制作评论区域子任务2：制作评论标题与列表部分。Template部分

JavaScript部分

6.5任务实施6.5.3制作评论区域子任务3：制作发布评论的代码Template部分

JavaScript部分运行效果图

6.6任务测试测试条目是否通过比对开发页面和设计图，核对字号、颜色、间距等设计参数

各个子组件能够在文章详情页中正常展示页面效果

点击返回按钮可返回上一级页面

点击展开与收起按钮实现二级评论显示状态的切换

点击点赞图标实现样式切换

点击关注按钮实现样式切换

点击分享按钮实现分享页面的自定义信息设置

发布评论时间与当前时间按差值格式化方式展示

点击评论输入框调起键盘实现输入框悬浮状态

6.7自学评价评价内容是否了解/掌握是否能够使用组件提升代码复用率

能够使用onShareAppMessage方法实现转发页面的自定义信息设置

能够使用filters过滤器实现日期和时间格式化

能够解决IOS系统中键盘调起后的输入框被覆盖的问题

6.8课后练习？1.选择题（1）Vue中的回调延迟方法是什么？A.$setB.$extendC.$nextTickD.$mixin（2）Vue中过滤器可以用来做什么？A.格式化日期和时间B.实现组件复用C.提高代码可读性D.控制视图更新（3）在uni-app中，input组件的adjust-position属性有什么作用？A.键盘弹起时，是否自动上推页面B.固定输入框大小C.输入框中占位符的位置调整D.输入框中文字的对齐方式调整2.填空题（1）uni-app中的单行输入框组件名称为————。（2