uniapp学习笔记

奋斗小于

已于 2023-01-01 00:47:41 修改

阅读量300

点赞数

文章标签： uni-app 学习前端

于 2022-12-28 17:36:29 首次发布

本文链接：https://blog.csdn.net/weixin_45868184/article/details/128468136

版权

2022.12.28

1、表单

<template>
	<view>
		<form @submit="onsubmit">
			<view class="row">
				<input placeholder="请输入电话" name="username"/>
			</view>
			<view class="row">
				<textarea placeholder="请输入一段话" name="content"></textarea>
			</view>
			<view class="row">
				<radio-group name="gender">
					<radio value="男">男</radio>
					<radio value="女">女</radio>
					<radio value="保密" checked>保密</radio>
				</radio-group>
			</view>
			<view class="row">
				<picker :range="options" name="school" @change="gitnum">
					<view>点我选择学历：{{options[num]}}</view>
				</picker>
			</view>
			<view class="row">
				<button form-type="submit" type="primary">提交</button>
				<button form-type="reset">清除</button>
			</view>
			
			{{obj}}
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				obj:null,
				options:['高中','大学','研究所','博士'],
				num:2
			};
		},
		methods:{
			onsubmit(e){
				this.obj=e.detail.value                  //显示返回数据
				this.obj.school=this.options[this.num]  //将返回后台的数据改成文字
				console.log(e)
			},
			gitnum(e){
				this.num=e.detail.value              //动态绑定
			}
		}
	}
</script>

<style lang="scss">
input,textarea{border: 1px solid #000;}
.row{
	padding: 10px;
}
</style>

使用到form、form-type、picker

运行结果：

2、组件compons/父组件传值给子组件

props传值：这里是index页面使用pubTitle组件，并向组件里传值，这个就是父向子传值（index父，pubTitle子）

在页面引用组件时直接写组件名字就能使用

props绑定动态类型及默认值

type表示数据类型

default表示默认值

3、子组件父组件传值

子组件代码：

<template>
	<view>
		<view class="item">
			<input type="text" placeholder="请输入..."  @input="oninput"/>  <!-- 定义触发事件@input -->
			{{num}}
		</view>
	</view>
</template>

<script>
	export default {
		// props:["num"],
		props:{
			num:{
				type:String,
				default:"默认标题"
			}
		},
		name:"chanzhi",
		data() {
			return {
				
			};
		},
		methods:{
			oninput(e){
				this.$emit("myenv",e.detail.value) //this.$emit传值，myenv是新定义的事件，在父组件调用
			}
		}
	}
</script>

<style lang="scss">
.item{
	height: 100px;
	width: 100px;
	background-color: gold;
}

</style>

父组件代码：

<template>
	<view>
		<chanzhi :num="num" @myenv="onmyenv"></chanzhi>  <!-- 定义事件@myenv用于传值 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:"1545676"
			};
		},
		methods:{
			onmyenv(e){          //定义事件
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">

</style>

4、自定义事件

.sync 修饰符
当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。 .sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器。

父组件引用子组件时加.sync---- :title.sync

子组件定义时加update ---- update:title



	<!-- 父组件 -->
	<template>
		<view>
			<syncA :title.sync="title"></syncA>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					title:"hello vue.js"
				}
			}
		}
	</script>


	<!-- 子组件 -->
	<template>
		<view>
			<view @click="changeTitle">{{title}}</view>
		</view>
	</template>
	<script>
		export default {
			props: {
				title: {
					default: "hello"
				},
			},
			methods:{
				changeTitle(){
					//触发一个更新事件
					this.$emit('update:title',"uni-app")
				}
			}
		}
	</script>

2022.12.29

5、跳转页面的两种方法

直接用navigator或定义点击事件用uni.navigateTo

6、弹出窗口uni.showModal

success成功后获取输入框的值

7、uni.showActionSheet(OBJECT)从底部向上弹出操作菜单

对比两个图，实现的是同一种功能---获取选择到选项下标

上图使用let将this赋值给that，使用function和that.arr获取到数组arr，

下图直接使用箭头=>，直接使用this.arr获取到数组arr

8、导航栏和iconfont

"tabBar": {
		"iconfontSrc": "static/iconfont.ttf",
		"list": [{
			"text":"首页",
			"pagePath":"pages/index/index",
			"iconfont": {
				"text": "\ue602",
				"selectedText": "\ue602",
				"color": "#333",
				"selectedColor": "#007AFF"
			}
		},{
			"text":"联系人",
			"pagePath":"pages/demo1/demo1",
			"iconfont": {
				"text": "\ue600",
				"selectedText": "\ue600",
				"color": "#333",
				"selectedColor": "#007AFF"
			}
			
		},{
			"text":"菜单",
			"pagePath":"pages/demo2/demo2",
			"iconfont": {
				"text": "\ue601",
				"selectedText": "\ue601",
				"color": "#333",
				"selectedColor": "#007AFF"
			}
			
		},{
			"text":"个人",
			"pagePath":"pages/demo3/demo3",
			"iconfont": {
				"text": "\ue604",
				"selectedText": "\ue604",
				"color": "#333",
				"selectedColor": "#007AFF"
			}
			
		}
			
		]
	},

注意画框地方，在iconfont下载.ttf的文件到static，把路径写到"iconfontSrc"里，在iconfont里定义图text和颜色，图的名称原来是&#xe601，要改为\ue601

9、uni.request网络请求API接口

10、页面跳转传递参数

传递页面

~函数传参在函数名后加括号，里面填上需要传递的参数 -

~在函数里面定义一个值用于接收参数

~uni.navigateTo({
url:"/pages/detail/detail?id="+e //页面跳转传递参数？后加需要传递的值
})

<template>
	<view  class="out">
		<view  class="row" v-for="item in arr" :key="item.id" @click="godetail(item.id)">  <!-- 函数传参在函数名后加括号，里面填上需要传递的参数 -->
			<view class="title">{{item.title}}</view>
			<view class="content">{{item.body}}</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:[]
			};
		},
		methods:{
			getdata(){
				uni.request({
					url:"http://jsonplaceholder.typicode.com/posts",
					success:res=>{
						console.log(res)
						this.arr=res.data
					}
				})
			},
			godetail(e){       //在函数里面定义一个值用于接收参数
				console.log(e)   //可以用console.log（）来查看是否传递参数成功
				
				uni.navigateTo({
					url:"/pages/detail/detail?id="+e  //页面跳转传递参数？后加需要传递的值
				})
			}
		},
		onLoad() {
			this.getdata();
			
		}
		
	}
</script>

<style lang="scss">
.out{
	padding:50rpx 30rpx;
//	width: 100%;
	.row{
		padding: 30rpx 0 ;
		border-bottom: 1px dotted #e4e4e4;
		.title{
			font-size: 36rpx;
			padding-bottom: 15rpx;
			color: #333;
		}
		.content{
			font-size: 28rpx;
			color:#888;
		}
	}
}
</style>

接收页面

~为接收参数定义的变量，默认值为1

~在onload生命周期里接收页面传过来的参数

~定义一个变量去接收参数

<template>
	<view class="out">
		<view class="row" >
			<view class="title">{{arrtitle.title}}</view>
			<view class="body">{{arrtitle.body}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arrtitle:[],
				id:1    //为接收参数定义的变量，默认值为1
			};
		},
		onLoad(e) {  //在onload生命周期里接收页面传过来的参数
			this.id=e.id    //定义一个变量去接收参数
			this.getdetail();
		},
		methods:{
			getdetail(){
				uni.request({
					url:"http://jsonplaceholder.typicode.com/posts/"+this.id,  //调用直接拼接
					success: (res) => {
						console.log(res)
						this.arrtitle=res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.out{
	padding: 10rpx 10rpx;
	.row{
		padding: 10rpx 0;
		border-bottom: 1rpx dotted #e4e4e4;
		.title{
			font-size: 36rpx;
			color: #000;
		}
		.body{
			font-size: 26rpx;
			color: #888;
		}
	}
}

</style>

11、获取评论

12、对象语法点击高亮效果

<template>
	<view class="content">
		<view class="top"> 
		 <!-- 对象语法,通过三元表达式判断绑定css样式 -->
			<view class="titil" :class="topnum==index ? 'active' : '' "   
			v-for="(item,index) in toptext" :key="index" 
			@click="onclick(index)">   <!-- 绑定点击事件传递index，index是顶部选择栏选项的序号 -->
				
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				toptext:[
					{title:"热点"},
					{title:"体育"},
					{title:"游戏"},
					{title:"生活"},
					{title:"金融"}
					],
				topnum:0
				
			}
		},
		onLoad() {

		},
		methods: {
			onclick(e){
				console.log(e)
				this.topnum=e
			}

		}
	}
</script>

<style lang="scss">
	.top{
		display: flex;
		justify-content: space-around;
		align-items: center;
		// padding-top: 10rpx;
		// width: 100%;
		.titil{
			flex: 1;
			line-height: 90rpx;
			background: #ccc;
			text-align: center;
			&.active{
				background: #1AA034;
				color: #fff;
			}
		}
		
		
	}
</style>