条件注释实现跨端兼容
官网地址: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 APP-PLUS
需条件编译的代码
#endif仅出现在 App 平台下的代码 #ifndef H5
需条件编译的代码
#endif除了 H5 平台,其它平台均存在的代码 #ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)
<template>
<view>
<!-- #ifdef H5 -->
<view>我希望只在h5</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>微信小程序</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data(){
return {
imgArr:[]
}
},
methods: {
onload () {
//#ifdef H5
console.log('我希望在h5中')
//#endif
console.log('我希望在微信')
}
}
}
</script>
<style>
/* h5 */
/* #ifdef H5 */
view{
color: pink;
}
/* #endif */
/* 微信小程序 */
/* #ifdef MP-WEIXIN */
view{
color: #4CD964;
}
/* #endif */
</style>
二、API的条件编译
// #ifdef %PLATFORM%
平台特有的API实现
// #endif
示例:以下代码仅在app下出现: