跨端兼容

本节讲解跨端兼容，因为各大平台都有自身的特点，有时我们需要针对不同的平台写不同的代码。

控制页面元素

需求描述：写两个 view 标签，一个在 H5 端显示，另一个在小程序端显示。跨端兼容就可以实现上述功能，打开官网，找到 “介绍”→“条件编译”。

使用 #ifdef 和 #endif 进行条件编译，代码如下。

<template>
    <view class="content">
        <!--#ifdef H5-->
        <view>这里的文字在H5端显示</view>
        <!--#endif-->

         <!--#ifdef MP-WEIXIN-->
        <view>这里的文字在小程序端显示</view>
        <!--#endif-->
    </view>
</template>

运行发现浏览器只显示 H5 端的内容，小程序端的内容会被隐藏掉，如图 13-10 所示。

Figure 1. 图13-10　视图层条件编译

控制CSS样式

条件编译可以分别控制 CSS 样式，例如在 H5 端使用红色字，在小程序端使用黑色字，代码如下。

/*#ifdef H5*/
.newmain{
    color: red;
}
/*#endif*/
/*#ifdef MP-WEIXIN*/
.newmain{
    color: black;
}
/*#endif*/

控制JS

条件编译还可以控制 JS，例如单击同一个按钮，在 H5 端输出 “hello h5”，而在小程序端输出 “hello小程序”，代码如下。

methods: {
    getData() {
        //#ifdef H5
        console.log('hello h5')
        //#endif
        //#ifdef MP-WEIXIN
        console.log('hello 小程序')
        //#endif
    },
}

总结：

可以通过条件编译分别控制 HTML、CSS 以及 JS。
#ifdef 后面是平台名，在官网取值即可，当前已有 13 个平台。