uni-app 条件注释实现跨端兼容

最新推荐文章于 2024-09-28 11:28:20 发布

浩浩小哥哥

最新推荐文章于 2024-09-28 11:28:20 发布

阅读量365

点赞数

分类专栏：前端文章标签： uni-app

本文链接：https://blog.csdn.net/zero881/article/details/115123451

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这个博客展示了如何在uni-app中实现图片上传和预览功能。通过`uni.chooseImage`方法选择图片，并利用`uni.previewImage`进行图片预览。代码还包含了条件编译，使得不同平台（H5、微信小程序）能展示特定内容。同时，博客讨论了在不同平台上的样式调整。

摘要由CSDN通过智能技术生成

<template>
	<view>
		<view>我最帅</view>
		<button type="primary" @click="chooseImg">上传图片</button>
	     <!-- 数组循环，绑定路径 -->
		<image v-for="item in image" :src="item" @click="previewImg(item)"></image>
		<!-- #ifdef H5-->
		<view>我希望只在h5页面中看见</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN-->
		<view>我希望只在微信小程序页面中看见</view>
		<!-- #endif-->
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				image:[]
			}
		},
		methods:{
			// 选择图片
			chooseImg(){
				uni.chooseImage({
					// 浏览器限制不住数量，微信小程序可以
					count: 5,
					success:res=>{
						// 注意：这里箭头函数才能拿到this
						this.image=res.tempFilePaths
				}
				}
				)
			},
			// 预览图片
			previewImg(current){
				uni.previewImage({
					current,
					urls: this.image,
					// loop 使得最后一个图片可以滚动，只在app中
					loop: true,
					// 顶端数字显示，只在app中
					indicator: 'number'
				})
		    }  
	},
	onLoad() {
		// #ifdef H5
		console.log('我希望h5中打印');
		// #endif
		// #ifdef MP-WEIXIN
		console.log('我希望微信小程序中打印');
		// #endif
	}
	}
</script>

<style>
	/* h5中的样式8 */
	/* #ifdef H5 */
	view{
		color: hotpink;
	}
	/* #endif */
	/* 微信小程序中的样式*/
	/* #ifdef  MP-WEIXIN*/
	view{
		color: #0000FF;
	}	
	/* #endif */
</style>