uniapp 在进行多端适配的时候，需要使用到条件编译来完成。
例如最常见的头部导航栏，在不同端的展现高度有所不同，会对页面效果产生影响，就需要进行顶部适配。
uniapp 条件编译
条件编译是出于对程序代码优化的考虑，在程序中加上条件，只对其中一部分内容进行编译
#ifdef / #ifndef 平台名称
- #ifdef：if defined 仅在某平台存在
- #ifndef：if not defined 除了某平台均存在
- 如果需要多平台同时编译，使用 || 来分隔
不同代码位置的写法：
- 在 css 中：
/* #ifdef MP-WEIXIN*/
.navbar-custom {
height: 80rpx;
}
/* #endif */
- 在 template 中：
<!-- #ifdef MP-WEIXIN -->
<view class="navbar-custom"></view>
<!-- #endif -->
- 在 js / ts / json 中：
//#ifndef H5
代码段...
//#endif
各平台名称取值如下：
注：条件编译无法区分 Android 和 iOS ，可以使用 uni.getSystemInfo() 来获取平台信息,具体可参考：获取系统信息
getSystem() {
const port = uni.getSystemInfoSync().platform
uni.setStorageSync('平台', port)
console.log(port)
}
在 App.vue 文件中引入公共样式文件，将需要配适的代码通过条件编译语句的形式加入刚刚文件中。
页面的剩余高度适配
页面适配剩余高度的场景很常见，比如固定视区对数据进行滚动。实现方案也不止一种，比如可以通过计算剩余高度来实现。思路是：
- 获取页面总体高度 h
- 获取组件距离页面顶部的距离 h1
- 计算剩余高度 h2 = h - h1
.myContainer 当前标签的 class，query.exec() 获取布局位置信息， result[0].top 为当前组件距离顶部高度。（同理这种方式也可以适配页面宽度）
实现代码如下：
let that=this;
uni.getSystemInfo({
success: res => {
const query = uni.createSelectorQuery();
query.select('.myContainer').boundingClientRect();
query.exec(result => {
that.myHeight = res.windowHeight - result[0].top;
});
},
fail: res => {}
});
最终设置计算好的高度：
<view class="myContainer" :style="{ height: myHeight }">
</view>
