⑤ uni-app 数据缓存、图片的上传和预览、条件编译跨端兼容

系统管理员 2022-12-28 07:30 212阅读 0赞

### uni-app ###

*  数据缓存
 *   *  uni.setStorage
     *  uni.setStorageSync
     *  uni.getStorage
     *  uni.getStorageSync
     *  uni.removeStorage
     *  uni.removeStorageSync
 *  图片的上传和预览
 *   *  上传图片
     *  预览图片
 *  条件编译跨端兼容
 *   *  组件的条件注释
     *  api的条件注释
     *  样式的条件注释

--------------------

**写下博客主要用来分享知识内容，便于自我复习和总结。  
如有错误之处，望各位指出。**

--------------------

# 数据缓存 #

有些数据我们只是想存在本地，而不是存在数据库，所以就需要数据缓存。

在这里只介绍三组用法。

--------------------

## uni.setStorage ##

[官方文档][Link 1]

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

代码演示：

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

我们可以在这里看到效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]  
小程序中同样可以看到效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]

--------------------

## 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="setStorage">存储数据</button>
    		<button type="primary" @click="getStorage">获取数据</button>
    	</view>
    </template>
    
    <script> export default { methods:{ setStorage(){ uni.setStorage({ key: 'id', data: 100, success () { console.log('存储成功') } }) }, getStorage(){ uni.getStorage({ key: 'id', success: res=>{ console.log(res.data) } }) } } }; </script>
    
    <style> </style>

![在这里插入图片描述][20201215162022183.png]

--------------------

## 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="setStorage">存储数据</button>
    		<button type="primary" @click="getStorage">获取数据</button>
    		<button type="primary" @click="removeStorage">删除数据</button>
    	</view>
    </template>
    
    <script> export default { methods:{ setStorage(){ uni.setStorage({ key: 'id', data: 100, success () { console.log('存储成功') } }) }, getStorage(){ uni.getStorage({ key: 'id', success: res=>{ console.log(res.data) } }) }, removeStorage(){ uni.removeStorage({ key: 'id', success: function () { console.log('删除成功') } }) } } }; </script>
    
    <style> </style>

--------------------

## uni.removeStorageSync ##

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

代码演示

<template>
    	<view>
    		<button type="primary" @click="removeStorage">删除数据</button>
    	</view>
    </template>
    <script> export default { methods: { removeStorage () { uni.removeStorageSync('id') } } } </script>

--------------------

# 图片的上传和预览 #

这部分内容比较简单，只需要按照文档使用用法即可，更多具体内容参考[官方文档][Link 2]。

--------------------

## 上传图片 ##

uni.chooseImage方法从本地相册选择图片或使用相机拍照。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]  
官方给出提示：

*  count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。

演示代码：

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

--------------------

## 预览图片 ##

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

演示代码：

<template>
    	<view>
    		<button @click="chooseImg" type="primary">上传图片</button>
    		<view>
    			<image v-for="(item, index) in imgArr" :src="item" :key="index" @click="previewImg(item)"></image>
    		</view>
    	</view>
    </template>
    
    <script> export default { data () { return { imgArr: [] } }, methods: { chooseImg () { uni.chooseImage({ count: 3, // h5中count数限制不住上传数量 success: res=>{ this.imgArr = res.tempFilePaths } }) }, previewImg(current){ uni.previewImage({ urls: this.imgArr, current }) } } } </script>
    
    <style> </style>

--------------------

# 条件编译跨端兼容 #

学习到现在应该可以发现，其中的很多内容，可能只有某个平台才能用，所以跨端兼容十分关键。在uni-app中的解决办法就是：条件编译。

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

**写法**：以 \#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>

[官方文档][Link 3]

--------------------

## 组件的条件注释 ##

演示代码：

<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 */

--------------------

整体看一下效果：

<template>
    	<view>
    		
    		<view>
    		  h5页面会显示
    		</view>
    		
    		
    		<view>
    		  微信小程序会显示
    		</view>
    		
    	</view>
    </template>
    
    <script> export default { onLoad(){ //#ifdef MP-WEIXIN console.log('微信小程序') //#endif //#ifdef H5 console.log('h5页面') //#endif } } </script>
    
    <style> /* #ifdef H5 */ view{ height: 100px; line-height: 100px; background: red; } /* #endif */ /* #ifdef MP-WEIXIN */ view{ height: 100px; line-height: 100px; background: green; } /* #endif */ </style>

h5页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][20201215165807987.png]

小程序：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][20201215165823893.png]

--------------------

至此，uni-app的基本内容，到此就算告一段落了，相信各位已经能够快速上手uni-app项目了，希望各位都有所收获。更多的复杂内容和属性值，在官方文档中有更详细的叙述和一切注意事项，而且也有演示代码，在使用的时候去查阅就可以了。

[Link 1]: https://uniapp.dcloud.io/api/storage/storage?id=setstorage
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]: /images/20221120/fe2c56c41c854b888d346cda281bdc7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]: /images/20221120/d029b9340db24e39aaee3fe58a4d98e6.png
[20201215162022183.png]: /images/20221120/e49349c312d6476fb9a99a4834d71f7f.png
[Link 2]: https://uniapp.dcloud.io/api/media/image?id=chooseimage
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]: /images/20221120/e743d6ec71ac41d79dcbd244183aa2f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]: /images/20221120/02ac1bf42ff94a31b0b9fe9758718860.png
[Link 3]: https://uniapp.dcloud.io/platform?id=%E8%B7%A8%E7%AB%AF%E5%85%BC%E5%AE%B9
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 4]: /images/20221120/d124a54003654519a64e8525b966eb87.png
[20201215165807987.png]: https://img-blog.csdnimg.cn/20201215165807987.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201215165818655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[20201215165823893.png]: https://img-blog.csdnimg.cn/20201215165823893.png