uniapp ios 图片保存到指定 uniapp图片缓存方案

uni-app

• 数据缓存

• uni.setStorage
• uni.setStorageSync
• uni.getStorage
• uni.getStorageSync
• uni.removeStorage
• uni.removeStorageSync

• 图片的上传和预览

• 上传图片
• 预览图片

• 条件编译跨端兼容

• 组件的条件注释
• api的条件注释
• 样式的条件注释

---

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

---

数据缓存

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

在这里只介绍三组用法。

---

uni.setStorage

官方文档

将数据存储在本地缓存中指定的 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>

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

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

---

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>

---

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>

---

图片的上传和预览

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

---

上传图片

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

官方给出提示：

• 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>

---

预览图片

演示代码：

<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 结尾。

平台标识

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

官方文档

---

组件的条件注释

演示代码：

<!-- #ifdef H5 -->
<view>
  h5页面会显示
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>
  微信小程序会显示
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>
  app会显示
</view>
<!-- #endif -->

---

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>
		<!-- #ifdef H5 -->
		<view>
		  h5页面会显示
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view>
		  微信小程序会显示
		</view>
		<!-- #endif -->
	</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页面：

小程序：

---

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