官网:https://uniapp.dcloud.io/platform?id=%e8%b7%a8%e7%ab%af%e5%85%bc%e5%ae%b9
写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。
ifdef:if defined 仅在某平台存在
ifndef:if not defined 除了某平台均存在
%PLATFORM%:平台名称
平台标识:常用的。
ifdef:if defined 仅在某平台存在
代码如下:
<view>
<!-- #ifdef H5 -->
天涯何处无芳草。
这行文字只在H5界面出现,微信小程序是看不到的。
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
我与春风皆过客。
这行文字只在微信小程序出现,H5界面是不可能看到的哟!
<!-- #endif -->
</view>
H5界面:
微信小程序界面:
我们发现使用了条件编译后,因为每个平台都有独属于自己特定的平台标识,别的平台是没有权限去解读的,所以呈现了H5界面和微信小程序界面分离效果,有了条件编译后,H5解读H5的内容,小程序解读属于小程序的内容,大家输出的内容谁也不影响谁,或者说谁也见不到谁。
API中写条件编译。
onLoad:function(){
// #ifdef H5
console.log('似此星辰非昨夜')
// #endif
// #ifdef MP-WEIXIN
console.log('昨夜星辰昨夜风')
// #endif
},
H5界面:
微信小程序界面:
可见API也是互不影响的,加上特定的标识后,只显示属于自己的那一部分。
样式的条件编译
<style>
/*H5呈现的样式*/
/* #ifdef H5 */
view {
color: #007AFF;
}
/* #endif */
/*微信小程序呈现的样式*/
/* #ifdef MP-WEIXIN */
view {
color: #4CD964;
}
/* #endif */
</style>
H5界面:
微信小程序界面:
也是各自呈现属于自己标识平台的样式。