Uni-app的学习Ⅲ（事件、生命周期、上下拉刷新、网络请求、数据缓存、图片操作、条件注释）

ゝ一纸荒年。 2022-12-10 14:41 88阅读 0赞

# 一、事件 #

### 事件绑定 ###

在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@

事件函数定义在methods中

methods: { 
      tapHandle () { 
        console.log('真的点我了')
      }
    }

### 事件传参 ###

*  默认如果没有传递参数，事件函数第一个形参为事件对象
    
        // template
        <button @click="tapHandle">点我啊</button>
        
        // script
        methods: {
          tapHandle (e) {
            console.log(e)
          }
        }
 *  如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据
    
        // template
        <button @click="tapHandle(1)">点我啊</button>
        // script
        methods: {
          tapHandle (num) {
            console.log(num)
          }
        }
 *  如果获取事件对象也想传递参数
    
        // template
        <button @click="tapHandle(1,$event)">点我啊</button>
        
        // script
        methods: {
          tapHandle (num,e) {
            console.log(num,e)
          }
        }

# 二、生命周期 #

### 应用的生命周期 ###

**生命周期**的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。

**生命周期函数**：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

`uni-app` 支持如下应用生命周期函数：

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLaunch</td> 
   <td>当<code>uni-app</code> 初始化完成时触发（全局只触发一次）</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>当 <code>uni-app</code> 启动，或从后台进入前台显示</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>当 <code>uni-app</code> 从前台进入后台</td> 
  </tr> 
  <tr> 
   <td>onError</td> 
   <td>当 <code>uni-app</code> 报错时触发</td> 
  </tr> 
 </tbody> 
</table>

### 页面的生命周期 ###

`uni-app` 支持如下页面生命周期函数：

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>说明</th> 
   <th>平台差异说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLoad</td> 
   <td>监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考<a href="https://uniapp.dcloud.io/api/router?id=navigateto" rel="nofollow">示例</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onReady</td> 
   <td>监听页面初次渲染完成。</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>监听页面隐藏</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onUnload</td> 
   <td>监听页面卸载</td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

# 三、下拉刷新事件 #

### 开启下拉刷新 ###

在uni-app中有两种方式开启下拉刷新

*  需要在 `pages.json` 里，找到的当前页面的pages节点，并在 `style` 选项中开启 `enablePullDownRefresh`
 *  通过调用`uni.startPullDownRefresh`方法来开启下拉刷新

##### 通过配置文件开启 #####

通过pages.json文件中找到当前页面的pages节点，并在 `style` 选项中开启 `enablePullDownRefresh`

{ 
      "path":"pages/list/list",
        "style":{ 
          "enablePullDownRefresh": true
        }
    }

##### 通过API开启 #####

[官方传送门][Link 1]

uni.startPullDownRefresh()

### 监听下拉刷新 ###

通过**onPullDownRefresh**可以监听到下拉刷新的动作

export default { 
      data () { 
        return { 
          arr: [……]
        }
      },
      methods: { 
      	startPull () { 				
          uni.startPullDownRefresh()	// 开启下拉刷新
        }
      },
      onPullDownRefresh () { 			// 下拉刷新事件
        console.log('触发下拉刷新了')
        // 一些列操作
        uni.stopPullDownRefresh()		// 结束当前刷新事件
      }
    }

##### 关闭下拉刷新 #####

uni.stopPullDownRefresh()

案例演示

<template>
    	<view>
    		<button type="primary" @click="startPull">开启下拉刷新</button>
    		杭州学科
    		<view v-for="(item,index) in arr" :key="index">
    			{
       {item}}
    		</view>
    	</view>
    </template>
    <script> export default { data () { return { arr: ['涂涂','吉吉','熊大','毛毛'] } }, methods: { startPull () { uni.startPullDownRefresh() // 立即触发下拉事件 } }, onPullDownRefresh () { // 下来刷新事件处理 this.arr = [] setTimeout(()=> { this.arr = ['前端','java','ui','大数据'] uni.stopPullDownRefresh() // 结束当前下拉事件 }, 1000); } } </script>

# 四、上拉加载事件 #

通过在pages.json文件中找到当前页面的pages节点下style中配置**onReachBottomDistance**可以设置距离底部开启加载的距离，默认为**50px**

通过**onReachBottom**监听到触底的行为

<template>
    	<view>
    		<button type="primary">开启下拉刷新</button>
    		杭州学科
    		<view v-for="(item,index) in arr" :key="index">
    			{ { item}}
    		</view>
    	</view>
    </template>
    <script>
    	export default { 
    		data () { 
    			return { 
    				arr: ['涂涂','吉吉','熊大','毛毛','熊二','翠花','光头强','李老板']
    			}
    		},
    		onReachBottom () { 
    			console.log('触底了')
    		}
    	}
    </script>
    
    <style>
    </style>

# 五、网络请求 #

[官网传送门][Link 2]  
在uni中可以调用`uni.request`方法进行请求网络请求

**需要注意的是**：在小程序中网络相关的 API 在**使用前需要配置域名白名单**。

### 发送get（post）请求 ###

<template>
    	<view>
    		<button @click="sendGet">发送请求</button>
    	</view>
    </template>
    <script>
    	export default { 
    		methods: { 
    			sendGet () { 
    				uni.request({ 
    					url: 'http://localhost:8082/api/getlunbo',
    					success(res) { 
    						console.log(res)
    					}
    				})
    			}
    		}
    	}
    </script>

# 六、数据缓存 #

### uni.setStorage ###

[官方文档][Link 3]

将数据存储在本地缓存中**指定的 key** 中，会**覆盖掉原来key** 对应的内容，这是一个**异步接口。**

代码演示

<template>
    	<view>
    		<button type="primary" @click="setStor">存储数据</button>
    	</view>
    </template>
    
    <script>
    	export default { 
    		methods: { 
    			setStor () { 
    				uni.setStorage({ 
    				 	key: 'id',
    				 	data: 100,
    				 	success () { 
    				 		console.log('存储成功')
    				 	}
    				 })
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

##### uni.setStorageSync #####

将 data 存储在本地缓存中**指定的 key** 中，会覆盖掉**原来key 对应的内容**，这是一个**同步接口。**

代码演示

<template>
    	<view>
    		<button type="primary" @click="setStor">存储数据</button>
    	</view>
    </template>
    
    <script>
    	export default { 
    		methods: { 
    			setStor () { 
    				uni.setStorageSync('id',100)
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

### uni.getStorage ###

从本地缓存中**异步获取指定 key** 对应的内容。

代码演示

<template>
    	<view>
    		<button type="primary" @click="getStorage">获取数据</button>
    	</view>
    </template>
    <script> export default { data () { return { id: '' } }, methods: { getStorage () { uni.getStorage({ key: 'id', success: res=>{ this.id = res.data } }) } } } </script>

### uni.getStorageSync ###

从本地缓存中**同步获取指定 key 对应的内容。**

代码演示

<template>
    	<view>
    		<button type="primary" @click="getStorage">获取数据</button>
    	</view>
    </template>
    <script> export default { methods: { getStorage () { const id = uni.getStorageSync('id') console.log(id) } } } </script>

### uni.removeStorage ###

从本地缓存中**异步移除指定 key。**

代码演示

<template>
    	<view>
    		<button type="primary" @click="removeStorage">删除数据</button>
    	</view>
    </template>
    <script> export default { methods: { removeStorage () { uni.removeStorage({ key: 'id', success: function () { console.log('删除成功') } }) } } } </script>

### uni.removeStorageSync ###

从本地缓存中**同步移除指定 key。**

代码演示

# 七、上传图片、预览图片 #

### 上传图片 ###

[官网传送门][Link 4]  
**uni.chooseImage**方法从本地相册**选择图片或使用相机拍照。**

案例代码

<template>
    	<view>
    		<button @click="chooseImg" type="primary">上传图片</button>
    		<view>
    			<image v-for="item in imgArr" :src="item" :key="index"></image>
    		</view>
    	</view>
    </template>
    
    <script> export default { data () { return { imgArr: [] } }, methods: { chooseImg () { uni.chooseImage({ count: 9, success: res=>{ this.imgArr = res.tempFilePaths } }) } } } </script>

### 预览图片 ###

例如：

</template>
    	<view>
    		<image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
    	</view>
    <template>
    
    <script> export default { data () { return { imgArr: [] } }, methods: { previewImg (current) { uni.previewImage({ urls: this.imgArr, current }) } } } </script>

# 八、条件注释实现跨段兼容 #

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

**写法**：以 `#ifdef` 加平台标识 开头，以 `#endif` 结尾。

### 平台标识 ###

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>平台</th> 
   <th>参考文档</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>APP-PLUS</td> 
   <td>5+App</td> 
   <td><a href="http://www.html5plus.org/doc/" rel="nofollow">HTML5+ 规范</a></td> 
  </tr> 
  <tr> 
   <td>H5</td> 
   <td>H5</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>MP-WEIXIN</td> 
   <td>微信小程序</td> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/api/" rel="nofollow">微信小程序</a></td> 
  </tr> 
  <tr> 
   <td>MP-ALIPAY</td> 
   <td>支付宝小程序</td> 
   <td><a href="https://docs.alipay.com/mini/developer/getting-started" rel="nofollow">支付宝小程序</a></td> 
  </tr> 
  <tr> 
   <td>MP-BAIDU</td> 
   <td>百度小程序</td> 
   <td><a href="https://smartprogram.baidu.com/docs/develop/tutorial/codedir/" rel="nofollow">百度小程序</a></td> 
  </tr> 
  <tr> 
   <td>MP-TOUTIAO</td> 
   <td>头条小程序</td> 
   <td><a href="https://developer.toutiao.com/dev/cn/mini-app/develop/framework/basic-reference/introduction" rel="nofollow">头条小程序</a></td> 
  </tr> 
  <tr> 
   <td>MP-QQ</td> 
   <td>QQ小程序</td> 
   <td>（目前仅cli版支持）</td> 
  </tr> 
  <tr> 
   <td>MP</td> 
   <td>微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

<view>
      h5页面会显示
    </view>
    
    
    
    <view>
      微信小程序会显示
    </view>
    
    
    
    <view>
      app会显示
    </view>

# 九、api的条件注释 #

onLoad () { 
      //#ifdef MP-WEIXIN
      console.log('微信小程序')
      //#endif
      
      //#ifdef H5
      console.log('h5页面')
      //#endif
    }

**样式的条件注释**

代码演示

/* #ifdef H5 */
    view{ 
      height: 100px;
      line-height: 100px;
      background: red;
    }
    /* #endif */
    
    /* #ifdef MP-WEIXIN */
    view{ 
      height: 100px;
      line-height: 100px;
      background: green;
    }
    /* #endif */

[Link 1]: https://uniapp.dcloud.io/api/ui/pulldown
[Link 2]: https://uniapp.dcloud.io/api/request/request?id=request
[Link 3]: https://uniapp.dcloud.io/api/storage/storage?id=setstorage
[Link 4]: https://uniapp.dcloud.io/api/media/image