自学uni-app (4)页面、事件和组件

本文详细介绍了uni-app中页面的创建与显示、事件的注册与参数传递,以及组件的使用,包括共有属性、添加、导入、注册、参数传递等。重点讲解了父子组件间的通信方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、页面

1. 创建新页面

  1. 在pages文件夹下直接创建.vue 的新页面文件
    文件目录如下
┌─components          
│         
├─pages                 页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
└─other.vue 		创建的新页面
├─static               
├─main.js              
├─App.vue             
├─manifest.json     
└─pages.json
  1. 把新的页面文件放在pages下的一个文件夹内
    文件目录如下
┌─components          
│         
├─pages                 页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─other
│     └─other.vue 		创建的新页面
├─static               
├─main.js              
├─App.vue             
├─manifest.json     
└─pages.json

2. 显示新页面

如果想要显示新页面,我们需要在pages.json中进行页面的注册
注:

  1. pages是一个数组
  2. pages中第一项表示应用启动页(在没设置页面跳转之前,我们都把新页面放在第一项,这样才能在应用启动时显示新页面)

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
		    "path" : "pages/other",
		    "style" : {
				"navigationBarTitleText": "新页面"
				
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			} 
		}
	    
    ]

二、事件

1. 注册事件

在页面文件的中template标签内注册事件 @click="handleClick"

样例:

<template>
	<view class="content">
		<view @click="handleClick"> 点我试试</view>
	</view>
</template>

2. 定义事件监听回调函数

methods中定义事件监听回调函数
在页面文件的script标签的导出模块的method中加入该事件监听的回调函数handleClick()
样例:

<script>
	export default {
		methods: {
			handleClick(){
				console.log("你好帅(你好美)!!!");
			}
		}
	}
</script>

3. 事件的传参

我们可以通过事件来传递参数

3.1 简单传参

通过给事件函数加入实参
回调函数中通过event对象来调用

样例:

<template>
	<view class="content">
		<view @click="handleClick(1)"> 点我获取要传递的参数</view>
	</view>
</template>
<script>
	export default {
		methods: {
				handleClick(event){
					console.log(event);
			}
		}
	}
</script>

event为注册函数中传递的参数,可以为数字类型、字符串类型甚至是对象类型
我们可以通过event对象来调用它的属性 ,调用方法: event.propertypropertyevent对象所拥有的其中一个属性
如果有一个属性为transfernum ,可以通过event.transfernum 来调用

event可以简写成e效果是一样的
如下

		handleClick(e){
				console.log(e);
		}

3.2 传入标签内自定义参数

<template>
	<view class="content">
		<view data-pro="11" @click="handleClick(1,$event)"> 点击我获取标签中自定义的数据的值</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			handleClick(index,event){
				console.log(index);
				console.log(event);
				console.log(event.currentTarget.dataset.pro);
		}
	}
	}
</script>

event 返回值是一个对象
如下

event对象
我们通过event.currentTarget.dataset.pro 来获取event对象的currentTarget属性下的pro
pro属于数据集 dataset ,因为我们定义的是data-pro="11"data就相当于是一个前缀,pro作为实际放在数据集中的数据名

当然自定义的数据值也可以是子组件的值,或者是从页面用户输入的值,这些在后面学习了组件获取参数,将获取到的参数放到自定义数据中就可以了

三、组件

组件是视图层的基本组成单元。
一个组件包括开始标签和结束标签,标签上可以写属性,并对属性赋值。
内容写在开始标签和结束标签之内。
页面上内容的变化是通过挂载和销毁组件来完成。
注:
根节点为 <template>,这个 <template> 下只能且必须有一个根<view>组件。这是vue单文件组件规范。

1. 组件的共有属性

属性名类型描述注解
idString组件的唯一标识保持整个页面唯一
classString组件的样式类在对应的 css 中定义的样式类
styleString组件的内联样式可以动态设置的内联样式
hiddenBoolean组件是否隐藏所有组件默认是显示的
data-*Any自定义属性组件上触发的事件时,会发送给事件处理函数(*表示自定义的内容)
@*EventHandler组件的事件用于事件绑定(*表示自定义的内容)

2. 添加组件

component文件夹下创建一个组件文件phoneComp


<template>
	<view>
		<text>这是一个组件</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>

</style>

3. 导入组件

index.vue中的script标签中导入创建的组件文件

<script>
	import textCom from "@/components/phoneComp";
	
</script>

4. 注册组件

将导入的组件注册到页面中

<script>
	import phoneCompfrom "@/components/phoneComp";
	export default {
		components:{
			//注册组件   name:value  当name=value时可以简写成  name  , 全写为 phoneComp:phoneComp
			phoneComp
		}
</script>

5. 使用注册的组件

通过标签的形式来使用组件

<template>
	<view>
		<phoneComp></phoneComp> 
	</view>
</template>

注:
vue推荐用phone-comp的格式来表示组件

但是这个必须是在注册组件时将模块名用驼峰命名法来表示,才能使用

如:注册时使用phoneComp 作为注册时的组件名,那么你可以使用<phone-comp></phone-comp>来使用组件

如果不使用驼峰命名法,如:phonecomp作为注册时的组件名,那么你不可以使用<phone-comp></phone-comp>来使用组件

实际是使用-来代替 驼峰

phoneCompphone-comp

组件的源文件的命名方式不会影响导入模块后的命名

6. 组件传递参数

父向子传递参数通过属性的方式

子向父传递参数通过触发事件的方式

使用全局数据传递参数

  1. 通过挂载vue的原型上
  2. 同通过globalData的方式

6.1 父向子传递数据

父页面向子组件ul-com 通过属性名list 传递了一个数组数据

子组件通过props 进行接收数据

父组件


<transfer-par :list="[1,2,3,4]"></transfer-par>

transfer-par 为导入的组件(模块)的自定义组件名

import transferPar from '@/components/transferPar.vue';

当然我们也可以在父组件上用 导出模块的属性值来代替直接赋值

例如:list="filterList" 这里filterList为在data中定义的一个数组

子组件

<template>
	<view :list="list">
		{{list[2]}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},props:{
			list:Array
		}
	}
</script>

<style>

</style>

6.2 子向父传递数据

子组件


<template>
	<view >
		<text @click="handleClick"> 点击获取子组件的数据</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sr:"来自子组件的数据"
			};
		},
		methods:{
			handleClick(){
				console.log("点击了子组件");
				this.$emit("textChange",this.sr);
			}
		}
	}
</script>

<style>

</style>

父组件


<template>
	<view>
		<!-- <view >{{sr}} </view> -->
		<child-transfer
			@textChange="handleTextChange">
    	</child-transfer>
    </view>
</template>

<script>
	import childTransfer from '@/components/childTransfer.vue';
	export default {
		data() {
			return {
				sr:""
			}
		},
		methods: {
			handleTextChange(e){
				console.log("点击了");
				// this.sr=e;
			}
		},
		components: {
			childTransfer
		}
	}
</script>

<style>

</style>

<think>嗯,用户想了解关于应用(app)培训的教学思路或方法,特别是应用程序开发培训的课程设计。首先,我需要确定用户的具体需求。他们可能是教师或培训机构的人,想要设计有效的课程。用户提到的参考引用里有成果导向教育理论、项目式学习,还有Android微信小程序的开发案例。这些应该作为教学设计的理论基础实际例子。 首先,我得整理教学设计的核心原则。成果导向教育(OBE)很重要,因为它强调以学生最终能达成的能力为目标,反向设计课程。这样能确保学生学完后真正具备开发应用的能力。然后,项目式学习(PBL)也是关键,通过实际项目来整合知识点,提升实践能力。 接下来,课程结构需要分阶段。基础阶段应该包括环境搭建、编程语言基础平台特性,比如Java/Kotlin对于Android,Swift对于iOS,或者跨平台框架如Flutter或uni-app。这部分要确保学生掌握基本工具语法。 然后是核心技术模块,比如UI设计、数据存储、网络通信等。这部分需要结合具体平台,比如Android的Activity生命周期,或者微信小程序页面结构。同时,集成第三方服务如地图、支付等也很重要,这能增强应用的功能性。 高级阶段要涉及性能优化、测试调试、安全机制等。这些内容帮助学生提升应用质量,处理实际问题。跨平台开发也是一个重点,可以介绍Flutter、React Native或uni-app,这些框架能提高开发效率,符合市场需求。 教学方法方面,案例教学项目驱动是关键。通过分解经典应用案例,让学生逐步构建功能模块,最后完成完整项目。团队协作版本控制工具的使用,如Git,也是必须的,培养协作能力。 评价体系需要多元化,结合过程性终结性评价。代码评审、项目答辩、用户测试等能全面评估学生能力。OBE的评价方式确保学生达到预定目标。 最后,持续改进机制很重要,收集学生反馈,更新技术内容,建立资源库,并鼓励参与竞赛开源项目,提升实战经验。参考引用中的例子,比如uni-appSpringMVC框架的应用,可以作为课程中的具体案例,帮助学生理解实际开发流程。 可能还需要考虑学生的不同水平,分层教学,提供个性化指导。同时,结合行业需求,引入最新技术趋势,比如人工智能在app中的应用,保持课程的前沿性。确保理论与实践结合,避免单纯的知识灌输,而是通过项目实践让学生主动学习解决问题。</think>### 应用程序开发培训教学思路与课程设计 #### 一、教学设计核心原则 1. **成果导向教育(OBE)** - 以学生最终能独立开发功能完整的应用程序为目标,反向设计课程模块[^1]。例如,设定“开发一个包含登录、数据存储网络请求的完整App”为阶段性成果。 - 强调实践能力与计算思维,而非单纯语法知识灌输。 2. **项目式学习(PBL)** - 通过真实项目(如电商App、天气应用)串联知识点,整合界面设计、逻辑实现、测试调试等环节[^1]。 #### 二、课程阶段划分 1. **基础阶段(4-6周)** - **环境搭建与工具熟悉** - 开发环境配置(如Android Studio、微信开发者工具、HBuilder等)[^2][^3]。 - 调试工具使用(Logcat、Chrome开发者工具)。 - **编程语言基础** - 根据目标平台选择语言(Java/Kotlin、Swift、JavaScript),重点讲解变量、函数、面向对象等核心概念。 - **平台特性入门** - Android/iOS生命周期、小程序页面结构(WXML+WXSS)。 2. **核心技术模块(8-10周)** - **UI开发与交互设计** - 布局实现(XML/Storyboard/uni-app组件- 事件处理(点击、滑动、网络请求回调) - **数据存储与管理** - 本地存储(SharedPreferences/SQLite) - 云数据库(Firebase、微信云开发) - **网络通信与API集成** - RESTful API调用(Retrofit/Axios) - 第三方服务接入(地图、支付、社交分享) 3. **高级实践(6-8周)** - **性能优化与调试** - 内存泄漏检测、网络请求压缩、图片懒加载 - **跨平台开发框架** - Flutter/React Native/uni-app多端编译原理 - **安全与发布** - 数据加密、代码混淆、应用商店上架流程 #### 三、教学方法设计 1. **案例驱动教学** - 分解经典应用(如TodoList、新闻客户端)为小任务,逐步实现功能模块。 - 示例代码: ```java // Android登录功能核心逻辑 public void onLoginClick(View view) { String username = editTextUsername.getText().toString(); String password = editTextPassword.getText().toString(); if (validateInput(username, password)) { authViewModel.login(username, password); } } ``` 2. **项目实战演练** - 分组开发完整项目,覆盖需求分析、原型设计、代码实现、测试交付全流程。 - 使用Git进行版本控制,模拟企业开发环境。 3. **混合式学习支持** - 提供线上资源(文档、视频)辅助自学,线下重点突破难点(如多线程编程)。 #### 四、评价体系 1. **多元化考核** - 过程性评价(代码规范度、项目进度) - 终结性评价(项目完整度、创新性、答辩表现) 2. **OBE成果验收** - 制定明确的评分标准(如“能独立实现网络请求模块得20分”)。 #### 五、持续改进机制 1. 建立学生反馈渠道,定期优化课程内容(如增加AR/VR开发模块)。 2. 联合企业提供真实项目需求,保持技术前沿性(如AI模型集成到App中)。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值