Web前端应用开发项目式教程（基于uni-app框架） 课件 任务4　制作社区首页.pptx

任务4制作社区首页Web前端应用开发项目式教程（基于uni-app框架）

目录CONTENTS014.5任务实施4.7学习自评Part14.1任务描述4.2任务效果4.4知识储备4.8课后练习4.9任务拓展4.3学习目标4.6任务测试

本任务将制作“启嘉校园”项目的社区首页，社区首页主要展示用户发布的文章列表，文章列表分为综合推荐、我的关注、专业交流和表白墙四类。4.1任务描述

4.2任务效果“社区”首页效果图

4.3学习目标能力目标素养目标知识目标通过采用组件化的方式制作搜索、选项卡、文章卡片和悬浮按钮，培养学习者高质量、持续性的开发意识。通过封装文章卡片组件，培养学习者注重细节、品质至上的工作态度。通过制作“社区首页”任务，提升学习者共创美好交流社区、营造良好网络环境的意识。了解uni-app组件化。了解/deep/深度作用选择器的用法。掌握uni-appeasyinput输入框增强组件的使用。掌握onShareAppMessage小程序页面转发方法的使用。掌握uni.previewImage预览图片方法的使用。掌握uni.chooseImage上传图片方法的使用。掌握uni.getImageInfo获取图片信息方法的使用。掌握uni-appmovable-area可拖动区域组件的使用。能够根据组件化思想完成组件封装。能够使用easyinput组件制作搜索输入框。能够使用onShareAppMessage方法实现页面转发。能够使用图片处理方法实现图片的上传和预览。能够使用movable-area组件实现元素的拖动。

4.4知识储备什么是组件化开发组件化开发是一种将软件系统划分为多个独立模块并按照功能组合起来的开发方式。每个模块都可以独立开发、测试、部署，同时也可以被其他模块调用和重用。uni-app组件化开发的好处uni-app是一种跨平台的开发框架，它支持将一个组件同时应用于多个平台,可以提高代码复用性、开发效率、协作效率、用户体验。组件化开发的应用场景uni-app的组件化开发可以应用于各种类型的应用程序开发，如社交、电商、新闻、音乐、游戏等。组件化应用easycom组件自动注册方式：首先，在pages.json或components.json中声明组件的名称和路径，其次，在组件的Vue文件中，将name属性设置为/组件名4.4.1uni-app组件化

4.4知识储备4.4.2uni-easyinput输入框组件输入框带左右图标<!--输入框头部/尾部图标--><uni-easyinputprefixIcon/suffixIcon="search"v-model="value"placeholder="请输入内容"@iconClick="onClick"></uni-easyinput>输入框禁用<uni-easyinputdisabledv-model="value"placeholder="请输入内容"></uni-easyinput>密码框<uni-easyinputtype="password"v-model="password"placeholder="请输入密码"></uni-easyinput>输入框聚焦<uni-easyinputfocusv-model="password"placeholder="请输入内容"></uni-easyinput>多行文本<uni-easyinputtype="textarea"v-model="value"placeholder="请输入内容"></uni-easyinput>多行文本自动高度<uni-easyinputtype="textarea"autoHeightv-model="value"placeholder="请输入内容"></uni-easyinput>取消边框03.<uni-easyinput:inputBorder="false"placeholder="请输入姓名"></uni-easyinput>

4.4知识储备使用uni.share方法实现页面转发uni.share({provider:'weixin',type:0,title:'分享标题',summary:'分享描述',href:'/share',imageUrl:'/share-image.jpg',success:function(){conso