uni-app 新手入门到精通2

Bertha 。 2021-09-02 07:29 430阅读 0赞

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

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

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

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

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

> 其一,应用生命周期 在App.vue 运行的时候的控制台可以直接看到打印结果  
> 其二, 页面生命周期 用的比较多的是onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参)  
> onShow和onHide用途和应用生命周期是样的  
> ![在这里插入图片描述][20201014192117517.png_pic_center]  
> 点击隐藏这个的时候会触发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://**************",
    	success (res) { 
    		console.log(res)
    	}
    })
    },

6,图片的上传和预览 API=>媒体 =>图片

<template>
    	<view>
    		<button type="primary" @click="chooseImg">上传图片</button>
    		<image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				imgArr: []
    			}
    		},
    		methods: { 
    			chooseImg() { 
    				uni.chooseImage({    //图片上传的API
    					count: 5,    //count 最多可以选择的图片张数，默认9
    					success: res => { 
    						this.imgArr = res.tempFilePaths 
    					}
    				})
    			},
    			previewImg(current) {    
    				uni.previewImage({    //图片预览API current 点击哪个预览哪张图片 所以在图片的点击事件需要传一个参数item
    					current:current,
    					urls: this.imgArr,
    					loop: true,
    					indicator: 'default'
    				})
    			}
    		}
    	}
    </script>

7,条件编译跨端兼容

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
    写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾

<view>我希望只在h5页面中看见</view>
    
    
    <view>我希望只在微信小程序页面中看见</view>

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center]

## 第三篇接下篇文章了 ##

[https_blog.csdn.net_renxiaoxing55_article_details_109073564]: https://blog.csdn.net/renxiaoxing55/article/details/109073564
[https_blog.csdn.net_renxiaoxing55_article_details_109103310]: https://blog.csdn.net/renxiaoxing55/article/details/109103310
[https_blog.csdn.net_renxiaoxing55_article_details_109117750]: https://blog.csdn.net/renxiaoxing55/article/details/109117750
[https_uniapp.dcloud.io_api_lifecycle]: https://uniapp.dcloud.io/api/lifecycle
[20201014192117517.png_pic_center]: /images/20210724/710202fea0d34daaa87ab3ec22ab4938.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/7ed3cb9d895047b893927650a5f96bec.png