Web前端应用开发项目式教程（基于uni-app框架）_高秀艳 主编；陈辉 主编；马翔 主编_AZW3_MOBI_EPUB_PDF_电子书（无页码）_高秀艳 主编；陈辉 主编；马翔 主编

内容节选

任务4制作社区首页 4.1 任务描述 持续发展的数字技术和日渐普遍的网络应用使人们的生活更加便捷、高效。“启嘉校园”的社区模块是面向校园的交流平台，为高校在校生及毕业生提供沟通渠道，比如深受广大学生喜爱的表白墙和专业交流，丰富学生在校期间的课余生活，并通过专业分享和交流提高学习效率。 本任务将制作“启嘉校园”项目的社区首页，社区首页主要展示用户发布的文章列表，文章列表分为综合推荐、我的关注、专业交流和表白墙四类。用户可以在社区首页搜索文章，也可以按类别以及文章的热度、发布时间查看文章。同时，在社区首页底部还有返回顶部和快捷发布按钮。 4.2 任务效果 任务效果如图4-1所示。 图4-1 “社区”首页效果图 4.3 学习目标 素养目标 ·通过采用组件化的方式制作搜索、选项卡、文章卡片和悬浮按钮，培养学习者可持续性、高质量化的开发意识。 ·通过封装文章卡片组件，培养学习者注重细节、品质至上的工作态度。 ·通过制作“社区”首页，提升学习者共创美好交流社区、营造良好网络环境的意识。 知识目标 ·了解uni-app的组件化开发。 ·了解/deep/（深度作用选择器）的用法。 ·掌握uni-app的输入框增强组件easyinput的使用。 ·掌握小程序页面转发方法onShareAppMessage的使用。 ·掌握预览图片方法uni.previewImage的使用。 ·掌握上传图片方法uni.chooseImage的使用。 ·掌握获取图片信息方法uni.getImageInfo的使用。 ·掌握uni-app的可拖动区域组件movable-area的使用。 能力目标 ·能够根据组件化思想完成组件封装。 ·能够使用easyinput组件制作搜索输入框。 ·能够使用onShareAppMessage方法实现页面转发。 ·能够使用图片处理方法实现图片的上传和预览。 ·能够使用movable-area组件实现元素的拖动。 4.4 知识储备 4.4.1 uni-app的组件化开发uni-app 基础知识05之组件概述 1. 什么是组件化开发 组件化开发是一种将软件系统划分为多个独立模块并按照功能组合起来的开发方式。每个模块都可以独立开发、测试、部署，同时也可以被其他模块调用和重用。组件化开发可以提高代码的可复用性和可维护性，同时也能提高开发效率和协作效率。 在uni-app中，组件化开发的思想是将一个页面划分为多个组件，每个组件都有自己的生命周期、数据和方法，同时也可以被其他组件调用和重用。通过将页面拆分为多个组件，达到提高代码复用性、降低耦合度、提高可维护性、提高开发效率和协作效率的目的。 2. uni-app组件化开发的好处 uni-app是一种跨平台的开发框架，它支持将一个组件同时应用于多个平台（如微信小程序、H5、Android、iOS等），这样可以大大提高开发效率和用户体验。使用uni-app进行组件化开发，有以下几个好处。 ·提高代码复用性：组件化开发可以避免重复编写相似的代码，提高代码复用性。 ·提高开发效率：组件化开发可以大大提高开发效率，减少代码冗余和重复劳动。 ·提高协作效率：组件化开发可以提高协作效率，不同开发人员可以同时开发不同的组件，不会相互影响，提高开发效率。 ·提高用户体验：uni-app支持将一个组件同时应用于多个平台，这样可以大大提高用户体验，用户可以在不同的平台上享受到相似的功能和体验。 3. 组件化开发的应用场景 uni-app组件化开发可以应用于各种类型的应用程序开发，如社交、电商、新闻、音乐、游戏等。以下是一些具体的应用场景。 ·社交应用：可以将头像、聊天框、消息提醒、分享功能等封装成独立的组件，供其他开发人员调用和重用。 ·电商应用：可以将商品列表、购物车、订单确认、支付功能等封装成独立的组件，供其他开发人员调用和重用。 4. 组件化开发应用 下面用一个例子演示uni-app组件化开发，例子中包括一个计数器组件和一个页面组件。计数器组件允许用户递增或递减计数器的值；页面组件使用计数器组件并在用户单击按钮时将计数器的值发送到服务器。 （1）计数器组件Counter示例 （2）页面组件MyPage示例 在计数器组件Counter中，