uniapp -- 跨端兼容问题

不仅仅是平台的选择，我们还可以再很多文件中使用，最多使用到的就是 HTML、CSS、JavaScript，当然还有pages.json 文件，以及各预编译语言文件：.scss、.less、.stylus、.ts、.pug。uniapp 可以一套代码编译并运行到不同的平台，比如各种小程序，H5页面，APP等等，这也就引出了一个问题，我们想在不同的平台中显示不同的样式或者交互，我们该怎么做？

Brave-AirPig

2548人浏览 · 2022-09-02 20:22:39

Brave-AirPig · 2022-09-02 20:22:39 发布

uniapp 可以一套代码编译并运行到不同的平台，比如各种小程序，H5页面，APP等等，这也就引出了一个问题，我们想在不同的平台中显示不同的样式或者交互，我们该怎么做？ 🤔

uniapp 官方给出了我们答案，官方根据 C语言通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码的方法，也为 uniapp 做出了这样一套解决方案：

跨端兼容

官方其实以及写的非常明白且易懂了：

跨端兼容2

不仅仅是平台的选择，我们还可以再很多文件中使用，最多使用到的就是 HTML、CSS、JavaScript，当然还有pages.json 文件，以及各预编译语言文件：.scss、.less、.stylus、.ts、.pug

<!-- #ifdef H5 -->
	<view class="test">
		这段话只能在H5页面中显示
	</view>
<!-- #endif -->
		
<!-- #ifdef H5 || MP-WEIXIN -->
	<view class="test2">
		这段话可以在微信小程序和H5页面中同时显示
	</view>
<!-- #endif -->

onLoad() {
	// #ifdef H5
		console.log('只在H5页面中打印')
	// #endif
			
	// #ifdef MP
		console.log('只在微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序中打印')
	// #endif
}