上传预览图片 条件注释实现跨段兼容

上传图片

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

<template>
	<view>
		<view>hello-uni</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({
					count:5,
					success:res=> {
						this.imgArr = res.tempFilePaths
					}
				})
			},
	}
</script>

预览图片

• 预览图片
• 预览的methods

previewImg(current){
	console.log(current)
	uni.previewImage({
		current,
		urls:this.imgArr,
		loop:true, //app中有效
		indicator:'Number'
	})
}

条件注释实现跨段兼容

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

选中要注释的代码段，ctr+alt+/

• 条件编译

组件的条件注释

<template>
	<view>
		<!-- #ifdef H5 -->
		<view>我只希望在H5中出现</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view>我只希望在小程序中出现</view>
		<!-- #endif -->
		
	</view>
	
</template>

api的条件注释

<script>
	export default{
		methods:{
			onLoad(){
				// #ifdef H5
				console.log("我希望在H5中打印")
				// #endif
				// #ifdef MP-WEIXIN
				console.log("我希望在小程序中打印")
				// #endif
			}
		}
	}
</script>

样式的条件注释

<style>
	/* #ifdef H5 */
	view{
		color: hotpink;
	}
	/* #endif */
	/* #ifdef MP-WEIXIN */
	view{
		color: #007AFF;
	}
	/* #endif */
</style>