uni-app在不同平台样式不同以及方法等条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在

#ifndef：if not defined 除了某平台均存在%PLATFORM%：平台名称

条件编译写法	说明
#ifdef APP-PLUS 需条件编译的代码 #endif	仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了 H5 平台，其它平台均存在的代码
#ifdef H5 (或\|\|) MP-WEIXIN 需条件编译的代码 #endif	在 H5 平台或微信小程序平台存在的代码（这里只有 “或(\|\|)”，不可能出现&&，因为没有交集）

%PLATFORM% 可取值如下：

值	平台
APP-PLUS	App
APP-PLUS-NVUE或APP-NVUE	App nvue
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	字节跳动小程序
MP-QQ	QQ小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为

支持的文件

.vue
.js
.css
pages.json
各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

API 的条件编译

// #ifdef MP-WEIXIN
uni.getLocation({
	type: 'wgs84',
	success: function (res) {
		console.log('当前位置的经度：' + res.longitude);
		console.log('当前位置的纬度：' + res.latitude);
	}
});

// #endif

// #ifdef MP-WEIXIN || H5
uni.getLocation({
	type: 'wgs84',
	success: function (res) {
		console.log('当前位置的经度：' + res.longitude);
		console.log('当前位置的纬度：' + res.latitude);
	}
});

// #endif

组件条件编译

<view>
    <view>微信公众号关注组件</view>
    <view>
        <!-- uni-app未封装，但可直接使用微信原生的official-account组件-->
        <!-- #ifdef MP-WEIXIN -->
           <official-account></official-account>
       <!-- #endif -->
    </view>
</view>

样式的条件编译

/* #ifdef H5 */
  uni-page-head { display: none; }
/* #endif */

以上这篇uni-app在不同平台样式不同以及方法等条件编译就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。

uni-app在不同平台 样式不同以及方法等 条件编译

相关推荐

深入理解position sticky 粘性定位

vue3如何解决reactive()响应式对象初始化重新赋值

满屏import优化方案之使用模块重导（Re-export）

微信小程序封装公共弹窗dailog组件-UNIAPP篇

记录几种常用的弹出层动画样式效果

π • 热门

uni-app在不同平台样式不同以及方法等条件编译