uni-app 新手入门到精通1 https://blog.csdn.net/renxiaoxing55/article/details/109073564

uni-app 新手入门到精通3 https://blog.csdn.net/renxiaoxing55/article/details/109103310

uni-app 新手入门到精通完结 https://blog.csdn.net/renxiaoxing55/article/details/109117750

1, uni 基本的数据绑定 v-bind v-for 注册事件和传递函数 和vue 基本是一样的,这里我就不多说了

2, 生命周期 API=>基础=>生命周期
主要作用的话,大家去官网看文档吧
https://uniapp.dcloud.io/api/lifecycle
分为两部分

其一,应用生命周期 在App.vue 运行的时候的控制台可以直接看到打印结果
其二, 页面生命周期 用的比较多的是onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参)
onShow和onHide用途和应用生命周期是样的

点击隐藏这个的时候会触发onHide

3,下拉刷新 API=>界面=>下拉刷新

   首先要在需要下拉刷新页面设置可刷新的属性  pages.json

{ 
	"path": "pages/index/index",
	"style": { 
		"navigationBarTitleText": "首页",
		"enablePullDownRefresh": true
	}
},

<template>
	<view>
		<view class="box-item" v-for="item in list">
			{ { item}}
		</view>
	</view>
</template>
<script>
 export default{ 
	 data(){ 
		 return { 
		 	list: ['张三','李四','王五','小美','张三丰','李二','王八']
		 }
	 },
	 onPullDownRefresh () {     //下拉刷新的监听事件 触发下拉刷新
	 	console.log('触发了下拉刷新')
	 	setTimeout(()=>{ 
	 		this.list = ['张三','李四']   //下拉刷新之后,页面重新渲染
	 		uni.stopPullDownRefresh()    //停止下拉刷新,设置了计时器,两秒后停止刷新
	 	},2000)
	 },
 }
</script>

4, 上拉加载

 首先要设置下 上拉加载 的属性  pages.json
 onReachBottomDistance  页面上拉触底事件触发时距页面底部距离，单位只支持px

{ 
	"path": "pages/product/product",
	"style": { 
	"navigationBarTitleText": "商品",
	"onReachBottomDistance": 200	
	}
},

onReachBottom() { 
	console.log('页面触底了')
    this.list = [...this.list,...['射手','双子','天蝎','双鱼']] //距离底部200后,射手双子这些内容会渲染到页面上
},

5,发送get请求

uni.request   API=>网络=>发起请求

get () { 
	uni.request({ 
	url: "http:/
	
	view{ 
		color: hotpink;
	}
	
	
	
	view{ 
		color: #0000FF;
	}
	
</style>

<script>
onLoad () { 
	// #ifdef H5
	console.log('我希望h5中打印')
	// #endif
	// #ifdef MP-WEIXIN
	console.log('我希望微信小程序中打印')
	// #endif
}
<script>

8,两种方式导航跳转与传参

第一种

<navigator url="/pages/detail/detail?id=80&age=19">跳转至详情页</navigator>
<navigator url="/pages/message/message" open-type="switchTab">跳转至信息页</navigator>
<navigator url="/pages/detail/detail" open-type="redirect">跳转至详情页</navigator>

open-type="redirect"   把当前页面关闭跳转到另一个页面  可以触发onUnload事件(属于监听事件)
open-type="switchTab" 正常跳转

第二种

<template>
	<view>
		<view>导航跳转的学习</view>
		<button @click="goDetail">跳转之详情页</button>
		<button @click="goMessage">跳转至信息页</button>
		<button type="primary" @click="redirectDetail()">跳转到详情页并关闭当前页面</button>
	</view>
</template>

<script>
	export default { 
		onUnload() { 
			console.log('导航页面卸载了')
		},
		methods: { 
			goDetail () { 
				uni.navigateTo({ 
					url: '/pages/detail/detail?id=80&age=19'//向跳转页面传递参数id=80和age=19
				})
			},
			goMessage () { 
				uni.switchTab({   //跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
					url: '/pages/message/message'
				})
			},
			redirectDetail () { 
				uni.redirectTo({    //关闭当前页面，跳转到应用内的某个页面。
					url: '/pages/detail/detail'
				});
			},
		}
	}
</script>
<style>
</style>

向跳转页面detail 传递参数id=80和age=19

第三篇接下篇文章了