uni-app跨端兼容、条件编译

官网：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界面：

微信小程序界面：

也是各自呈现属于自己标识平台的样式。