2.uni-app的碎片知识

最新推荐文章于 2023-05-06 11:00:56 发布

小周日记

最新推荐文章于 2023-05-06 11:00:56 发布

阅读量349

点赞数

分类专栏： uniapp的碎片文章标签： uni-app

本文链接：https://blog.csdn.net/actores/article/details/115554099

版权

uniapp的碎片专栏收录该内容

2 篇文章 0 订阅

订阅专栏

注：uniapp和vue几乎一样，学过vue再来学uniapp基本无压力

6.图片的简单上传（拖拽和预览）+注释兼容

7.页面导航跳转的学习

总结

1.view标签中属性的使用

.它是一个视图容器。

.它类似传统html中的div，用于包裹各种元素内容。

.详细请看：https://uniapp.dcloud.io/component/view?id=view

<view class="box1" hover-class="box1-active">
			<view class="box2" hover-class="box2-active" hover-stop-propagation :hover-start-time="2000" :hover-stay-time="2000">我是一个大盒子</view>
			<!-- 
			阻止事件冒泡：hover-stop-propagation加上属性即可
			设置点击的响应时间：:hover-start-time
			设置点击之后响应结束的时间：:hover-stay-time
			 -->
		</view>

2.按钮的使用

<!-- 按钮的使用 -->
	<button>按钮</button>
	<!-- 按钮最小 -->
	<button size="mini">按钮</button>
	<!-- 主页色 -->
	<button type="primary">按钮</button>
	<!-- 是否镂空：是 -->
	<button plain="true">按钮</button>
	<!-- 是否镂空：否 -->
	<button plain="false">按钮</button>
	<!-- 是否禁用 -->
	<button disabled="true">按钮</button>
	<!-- 图片的使用 -->
	<!-- mode的两个属性：fit、fill常使用 -->
	<image src="../../static/logo.png"></image>

3. view中的操作

普通表达：<view class="content">数据绑定的学习~~~</view>
       传值表达（表达式）：<view>{{title}}</view>
       字符串拼接：<view>{{'你好呀'+'世界'}}</view>
       运算符：<view>{{1+1}}</view>
       三目运算：<view>{{1>2?'1比2大':'2比1大'}}</view>
       直接可以赋值：<view>{{zhou?'zhou为假':'zhou为真的'}}</view>

  :key="item.id" -》保持数据不错乱，取唯一值

<template>
	<!-- 必须要有的根节点 -->
	<view>
		<view class="content">数据绑定的学习~~~</view>
		<view>{{title}}</view>
		<view>{{'你好呀'+'世界'}}</view>
		<view>{{1+1}}</view>
		<view>{{1>2?'1比2大':'2比1大'}}</view>
		<view>{{zhou?'zhou为假':'zhou为真的'}}</view>
		<!-- 图片也可以用本地和网上的 -->
		<image :src="Urlmg"></image>
		<!-- 空格很重要 -->
		<!-- 使用v-bind来进行转换为 : -->
		<view v-for="(item,index) in array" :key="item.id">
			序号:{{index}}
			姓名:{{item.name}}
			年龄:{{item.age}}
		</view>
		<!--点击事件的绑定 -->
		<button v-on:click="ButtonFun(30,$event)" type="primary">按钮</button>
	</view>
	<!-- 
		普通表达：<view class="content">数据绑定的学习~~~</view>
		传值表达（表达式）：<view>{{title}}</view>
		字符串拼接：<view>{{'你好呀'+'世界'}}</view>
		运算符：<view>{{1+1}}</view>
		三目运算：<view>{{1>2?'1比2大':'2比1大'}}</view> 
		直接可以赋值：<view>{{zhou?'zhou为假':'zhou为真的'}}</view>
	-->
</template>

<script>
	export default {

		data() {
			return {
				title:'hello world',
				zhou:'false',
				Urlmg:'../../static/logo.png',
				array:[
					{
						id:'1',
						name:'张三',
						age:'20'
					},
					{
						id:'2',
						name:'李四',
						age:'21'
					},
					{
						id:'3',
						name:'王五',
						age:'22'
					},
					{
						id:'4',
						name:'赵六',
						age:'22'
					}
				]
			}
		},
		// 方法模块·
		methods: {
			// 也可以进行传递参数
			ButtonFun(num,e){
				alert('绑定按钮点击事件....')
				
				//传参+拿到事件对象
				//为什么要拿到事件：对事件对象中的属性进行查看以及相关的操作
				console.log('实参传形参',num,e)
			}
		}
	}
</script>

4.创建组件并且使用组件

components——>定义一个组件test.vue(子组件）——>pages中定义一个父组件index.vue——>通过import test from '../../components/test.vue'引入定义好的组件 ——>components:{"test":test} 组件使用声明——><test></test>组件的使用
——>然后可以进行传值（https://mp.csdn.net/editor/html/115403081）

5.页面刷新+网络请求+数据存储本地

<template>
	<view class="content">
		<view>这是列表页</view>
		
		<!-- uni.request()网络请求:发送get请求 -->
		<button type="primary" @click="get">点击发送get请求</button>
		
		<!-- 数据存储:-->
		<button type="warn" @click="setStor">点击存储数据</button>
		
		<!-- 数据获取:-->
		<button type="primary" @click="getStor">点击获取数据</button>
		
		<button type="primary" @click="reMove">点击移除数据</button>
		
		<!-- 遍历数组 -->
		<view v-for="item in list">{{item}}</view>
		
		<!-- <button @click="Pulldown" type="primary">点击下拉刷新</button> -->
	</view>
	
	<!-- 
	 页面刷新的方法：
		1.在page.json中进行style属性的配置进行当前页面刷新（"enablePullDownRefresh":true）
		2.在当前需要的页面进行页面刷新（onPullDownRefresh() {}）监听下拉刷新
		3.点击事件进行刷新（设置一个按钮）
	 -->
	
</template>

<script>
	export default {

		data() {
			return {
				list:['web前端','UI设计','后端','PS使用','Uniapp','后端','闪电','打雷']
			}
		},
		
		// 和页面生命周期同级使用
		// 1.刷新事件
		onPullDownRefresh() {
			console.log('触发了下拉刷新~~~~')
			//数据刷新
			this.list=['后端','web前端','UI设计','PS使用','Uniapp']
			//一直再转，使用方法实现快速刷新效果，但是因为结束的比较快，我们可以用定时器来讲解决这一个效果
		// 定时：箭头函数+时间（毫秒）
			// setTimeout(()=>{
			// 	uni.stopPullDownRefresh()
			// 	},2000)
		//使用普通函数也可以解决
			setTimeout(function(){
				// 停止下拉刷新函数的使用
				uni.stopPullDownRefresh()
			},2000)
		//语法setTimeout(函数,time)
		// console.log('让我来看看uni是什么',uni)
		// console.log('让我来看看uni是什么类型',typeof uni)//Object
		// 所以uni是什么？是一个实例对象，里面含有大量的API来使用
		},
		
		
		
		
		//2.页面触底函数事件
		onReachBottom() {
			console.log('页面触底了')
		},
		
		
		
		
		
		// 方法模块
		methods: {
			//在按钮当中绑定下拉刷新事件的监听；也可以关闭下拉刷新
			Pulldown(){
				// 下拉刷新点击事件
				uni.startPullDownRefresh()
			},
		//网络请求
			get(){
				uni.request({
					// 获取url的地址
					url:"https://api.apiopen.top/singlePoetry",
					//执行成功之后的回调函数
					//method:"POST",//默认为get
					success(res) {
						console.log('接口数据',res)
					}
				})
			},
			
		// 数据存储setStorage
			setStor(){
				uni.setStorage({
					key:'id',//名字
					data:100,
					success() {
						console.log('存储成功')
					}
				})
			},
		// 将数据存储到本地缓存中指定的key中会覆盖掉原来该key对应的内容，这是一个异步接口
		// 暂时还不知道有什么作用：请各位大佬指导
		
		// 数据获取getStorage
			getStor(){
				uni.getStorage({
					key:'id',
					success(res) {
						console.log('获取成功',res)
						console.log('获取成功',res.data1	)
					}
				})
			},
		// 数据的移除
			reMove(){
				uni.removeStorage({
					key:'id',
					success() {
						console.log('移除成功')
					}
				})
			}
		
			
		}
	}
</script>

<!-- scss和less差不多 -->
<style lang="scss">
	.content{
		view{
				height: 100px;
				line-height: 100px;
			}
	}
</style>

页面刷新

页面刷新的方法：
       1.在page.json中进行style属性的配置进行当前页面刷新（"enablePullDownRefresh":true）
       2.在当前需要的页面进行页面刷新（onPullDownRefresh() {}）监听下拉刷新
       3.点击事件进行刷新（设置一个按钮）

网络请求

数据存储本地

6.图片的简单上传（拖拽和预览）+注释兼容

图片的简单上传（参数index改为item更正确一些）

拖拽和预览

注释兼容（和、、和常用）

/* 2.在API中进行注释兼容：显示 */
		onLoad() {
			// #ifdef H5
			console.log('只在h5中进行显示')
			// #endif
			
			// #ifdef MP-WEIXIN
			console.log('只在微信小程序中显示')
			// #endif
		},

<!--1.在html中-->	
		<!-- 3-31注释兼容：可以操作哪些是在不同的平台进行的兼容显示 -->
		<!-- #ifdef H5 -->
		<view>我只希望在h5页面中看见</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view>我只希望在微信小程序页面中看见</view>
		<!-- #endif -->

7.页面导航跳转的学习

<template>
	<view class="content">
		<view>导航跳转的学习</view>
	<!-- 一、声明式导航 -->
		<!-- 1.直接跳转非tabbar的页面：可返回 -->
		<navigator url="../detail/detail?id=800&age=18">点击跳转至详情页</navigator>
		
		<!-- 传参：?id=800&age=16，使用页面的生命周期进行传值onLoad(options),option就是传递来获取到的值-->
		
		<!-- 2.不能直接跳转到含有tabbar的页面，添加直接的属性（open-type="switchTab"）就可以跳到相关的页面 -->
		<navigator url="../message/message" open-type="switchTab">点击跳转至信息页</navigator>
	
		<!-- 3. open-type="redirect"表示重定向，不可以返回上一级页面。。。。也就是说把当前页面进行关闭然后再跳转到下一个页面，并且不能返回关闭的页面了-->
		<navigator url="../detail/detail" open-type="redirect">点击跳转至详情页</navigator>
	
	<!-- 二、编程式导航来实现跳转页面  -->
		<!-- 使用API来实现 -->
		<!-- 实现普通跳转 -->
		<button type="primary" @click="goDetail">跳转至详情页</button>
		
		<button type="warn" @click="goMessage">跳转至信息页</button>
	
		<button type="default" @click="goClose">跳转到详情页并关闭当前页</button>
	</view>
	
</template>

<script>
	export default {

		data() {
			return {
				
			}
		},
		onUnload() {
			// 效验详情页加上open-type="redirect"的效果
			console.log('详情页页面卸载了')
		},
		
		
		
	// 编程式:API的方式
		methods: {
			goDetail(){
				uni.navigateTo({
					url:'../detail/detail?id=700&age=25'
				})
			},
			goMessage(){
				// 跳转到tabBar页面，并关闭其他所有的非tabBar页面（只要不是tabbar页面都给你卸载了）
				uni.switchTab({
					url:'../message/message'
				})
			},
			goClose(){
				// 重定向：跳转到详情页并关闭当前页
				uni.redirectTo({
					url:'../detail/detail'
				})
			}
		}
	}
</script>

<style>
	.content{

	}
	/* 详细请看 */
	/* https://blog.csdn.net/ljy950914/article/details/91384311?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control */
</style>

补充

<template>
	<view>
		<view class="box1">样式的学习</view>
		<view class="box2"></view>
		<view class="iconfont icon-biaoqiankuozhan_shouye-386"></view>
	</view>
</template>

<script>
</script>

<style>
	/* 引用外部的css文件 */
	@import url("./a.css");
	.box2{
		/* 刚刚好能占满屏幕 
		width: 750rpx;
		height: 750rpx;*/
		/* 也就是说：px>rpx 2倍关系：rpx即响应式的px */
		width: 375rpx;
		height: 375rpx;
		background-color: #007AFF;
	}
</style>

总结

加油，未完待续

小周日记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.uni-app的碎片知识

文章目录1.view标签中属性的使用.它是一个视图容器。.它类似传统html中的div，用于包裹各种元素内容。.详细请看：https://uniapp.dcloud.io/component/view?id=view<view class="box1" hover-class="box1-active"> <view class="box2" hover-class="box2-active" hover-stop-propagation :..
复制链接

扫一扫