1. 条件编译 、跨端兼容(H5、App、微信、支付宝、百度、头条、QQ小程序)

platform.vue

<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="view-style">
			<text>仅在H5编译</text>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="view-style">
			<text>仅在App(Android/IOS)编译</text>			
		</view>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<view class="view-style">
			<text>仅在小程序(微信/支付宝/百度/头条/QQ)编译</text>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="view-style view-wx-style">
			<text>仅在微信小程序编译</text>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			// #ifdef H5
			console.log('仅在H5编译')
			// #endif
			// #ifdef APP-PLUS
			console.log('仅在App(Android/IOS)编译')
			//#endif
			// #ifdef MP
			console.log('仅在小程序(微信/支付宝/百度/头条/QQ)编译')
			// #endif
			// #ifdef MP-WEIXIN
			console.log('仅在微信小程序编译')
			// #endif
		},
		methods: {

		}
	}
</script>

<style>
	.view-style {
		width: 750rpx;
		height: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* #ifdef H5 */
		background-color: #007AFF;
		/* #endif */
		/* #ifdef APP-PLUS */
		background-color: #4CD964;
		/* #endif */
		/* #ifdef MP */
		background-color: #F0AD4E;
		/* #endif */
		color: #FFFFFF;
	}
	.view-wx-style {
		/* #ifdef MP-WEIXIN */
		background-color: #DD524D;
		/* #endif */
	}
</style>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐