uniapp 跨端兼容 条件编译

背景

我们项目中的一些配置，布局和交互有部分，在微信和 h5 端有一些兼容问题，可能需要不一样的接口，等等。

uniapp官网跨端兼容逻辑

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

• 大量写 if else，会造成代码执行性能低下和管理混乱。
• 编译到不同的工程后二次修改，会让后续升级变的很麻烦。

在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

实现

既然uniapp 给我们提供了方法，我们只需要按照他的逻辑去书写即可，下面是他的语法：

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

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

常用平台名称

值	生效条件
APP-PLUS	App
APP-PLUS-NVUE或APP-NVUE	App nvue 页面
H5	H5
MP-WEIXIN	微信小程序

示例：

不同平台请求不同接口

    getAll(keyword = '', pagenum = '') {
        // #ifdef APP-PLUS
        uni.request({
            url: `/search1/keyword?keyword=${this.keywordNow}&type=&pageNum=${pagenum}&pageSize=10`,
            success: (res) => {
                //console.log(res.data, this.list.length, res.data.total);
                this.total = res.data.total
                if (this.list.length < res.data.total) {
                    this.list.push(...res.data.courseList)
                }
            }
        });
        // #endif
        // #ifdef H5
        uni.request({
            url: `/search2?keyword=${this.keywordNow}&type=&pageNum=${pagenum}&pageSize=10`,
            success: (res) => {
                //console.log(res.data, this.list.length, res.data.total);
                this.total = res.data.total
                if (this.list.length < res.data.total) {
                    this.list.push(...res.data.courseList)
                }
            }
        });
        // #endif
    }

除了js也支持 html 和 css，只是注释不一样：

html
<!-- #ifdef MP-WEIXIN -->
        <view class='box'>weixin</view>
<!-- #endif -->

css
/*  #ifdef  MP-WEIXIN  */
.box{样式}
/*  #endif  *

static 目录的条件编译

比如我们使用不同平台，展示不同的图片

 这样只有微信平台才会出现的图片静态就放置好了

参考文档：什么是编译器 | uni-app官网 (dcloud.net.cn)