uni-app的条件编译跨端兼容

素颜马尾好姑娘i 2021-07-24 17:01 352阅读 0赞

# 一 点睛 #

1 官网

[http://uniapp.dcloud.io/platform?id=%E8%B7%A8%E7%AB%AF%E5%85%BC%E5%AE%B9][http_uniapp.dcloud.io_platform_id_E8_B7_A8_E7_AB_AF_E5_85_BC_E5_AE_B9]

# 二 代码 #

1 修改 phone.vue

<template>
    	<view>
    		<button type="primary" @click="updatePhoto">上传图片</button>
    		<image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>
    		
    		<view>在H5中可见</view>
    		
    		
    		<view>在微信小程序中可见</view>
    		
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				imgArr: []
    			}
    		},
    		methods: {
    			updatePhoto() {
    				uni.chooseImage({
    					count: 5, //默认9
    					success: res => {
    						this.imgArr = res.tempFilePaths
    					}
    				});
    			},
    			previewImg(current) {
    				uni.previewImage({
    					current: current,
    					urls: this.imgArr,
    					loop: true,
    					indicator: 'number'
    				})
    			}
    
    		},
    		onLoad() {
    			// #ifdef H5
    			console.log('在h5中打印')
    			// #endif
    			// #ifdef MP-WEIXIN
    			console.log('在微信小程序中打印')
    			// #endif
    		}
    	}
    </script>
    
    <style>
    	/* h5中的样式 */
    	/* #ifdef H5 */
    	view {
    		color: #0000FF;
    	}
    
    	/* #endif */
    	/* 微信小程序样式 */
    	/* #ifdef MP-WEIXIN */
    	view {
    		color: #008000;
    	}
    
    	/* #endif */
    </style>

# 三 效果 #

1 H5条件编译效果

![20200910194047655.png][]

2 微信小程序编译效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[http_uniapp.dcloud.io_platform_id_E8_B7_A8_E7_AB_AF_E5_85_BC_E5_AE_B9]: http://uniapp.dcloud.io/platform?id=%E8%B7%A8%E7%AB%AF%E5%85%BC%E5%AE%B9
[20200910194047655.png]: /images/20210724/71e46b4ce5b94113afcd01eaa0f21fcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/31c4f003d6904be18dea8eee62598618.png