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

阅读量：3965 次

发布时间：2019-05-24

本文共 1964 字，大约阅读时间需要 6 分钟。

uni-app

写下博客主要用来分享知识内容，便于自我复习和总结。

如有错误之处，望各位指出。

数据缓存

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

在这里只介绍三组用法。

uni.setStorage

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

代码演示：

我们可以在这里看到效果：

小程序中同样可以看到效果：

uni.setStorageSync

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

代码演示

uni.getStorage

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

代码演示：

在这里插入图片描述

uni.getStorageSync

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

代码演示

uni.removeStorage

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

代码演示

uni.removeStorageSync

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

代码演示

图片的上传和预览

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

上传图片

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

在这里插入图片描述

官方给出提示：

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

演示代码：

预览图片

在这里插入图片描述

演示代码：

条件编译跨端兼容

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

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

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

平台标识

值	平台	参考文档
APP-PLUS	5+App
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	头条小程序
MP-QQ	QQ小程序	（目前仅cli版支持）
MP	微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序

组件的条件注释

演示代码：


   
   
      h5页面会显示
   
   
   
   
      微信小程序会显示
   
   
   
   
      app会显示

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

整体看一下效果：