uniapp 条件编译跨平台执行

你的名字 2021-07-24 17:12 490阅读 0赞

跨平台编译
    	使得能让指定平台执行指定代码,其他平台不执行
    	
    	html
    			  #ifndef效果和#ifdef相反
    				...
    			
    			
    	js
    			// #ifdef 平台名称
    				...
    			// #endif
    			
    	css
    			/* #ifdef 平台名称 */
    				...
    			/* #endif */
    			
    平台名称
    
    	APP-PLUS 	App
    	APP-PLUS-NVUE 	App nvue
    	H5 	H5
    	MP-WEIXIN 	微信小程序
    	MP-ALIPAY 	支付宝小程序
    	MP-BAIDU 	百度小程序
    	MP-TOUTIAO 	字节跳动小程序
    	MP-QQ 	QQ小程序
    	MP 	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序

[文档][Link 1]

代码示例:

<template>
    	<view>
    		<view class='box'>
    			
    		</view>
    		
    	
    		
    			<view>h5</view>
    		
    		
    		
    			<view>微信小程序</view>
    		
    		
    		<button type="primary" @click="get">按钮</button>
    		<button type='primary' @click='set'>按钮2</button>
    		<button type='primary' @click='remv'>按钮3</button>
    	</view>
    </template>
    
    <script>
    export default{ 
    	data()
    	{ 
    		return{ 
    			imgArr:['a']
    		}
    	},
    	methods:{ 
    		get()
    		{ 
    
    		},
    		set()
    		{ 
    
    		},
    		remv()
    		{ 
    
    		}
    	},
    
    		onLoad()
    		{ 
    			// #ifdef H5
    				console.log("h5")
    			// #endif
    			// #ifdef MP-WEIXIN
    				console.log("小程序")
    			// #endif
    			
    		}
    
    
    }
    </script>
    
    <style scoped>
    	@import url("../css/a.css");
    	.box{ 
    
    		height: 375rpx;
    		width: 375rpx;
    		/* #ifdef H5 */
    		background-color: #4CD964;
    		/* #endif */
    		/* #ifdef APP-PLUS */
    		background-color: #007AFF;
    		/* #endif */
    	}
    
    	.box1{ 
    		background-color: #007AFF;
    	}
    </style>

[Link 1]: https://uniapp.dcloud.io/platform?id=%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91