做項目的時候，請求數據接口時發現eval函數在H5和APP端是可以渲染出來的，但是運行在小程序時頁面報錯。然後換JSON.parse()方法，又發現小程序是可以渲染的，但H5和APP端又報錯了。結果在網上一頓搜索，終於找到了一個解決的辦法，可以跨端兼容，就是我們接下里要講的條件編譯。
條件編譯其實就是if判斷，以#ifdef或 #ifndef加%PLATFORM%開頭，以 #endif結尾。個人感覺這是uniapp把自己的js封裝到框架中，只要按照 uni-app 規範開發即可保證多平臺兼容。只是用特殊的註釋作爲標記，編譯時根據這些特殊的註釋，將註釋裏面的代碼編譯到不同平臺。
條件編譯是利用註釋實現的，在不同語法裏註釋寫法不一樣，js使用 // 註釋、 css 使用 / 註釋 / **、 vue/nvue 模板裏使用 <!–註釋 – >
js使用：
// #ifdef APP-PLUS
this.swiperList = JSON.parse(res.data).postss;
// #endif
vue頁面中使用：
<!-- #ifdef APP-PLUS -->
<view :style="{ height: iStatusBarHeight + 'px'}" class="stat"></view>
<!-- #endif -->
css使用：
/* #ifdef APP-PLUS */
width: 60rpx;
height: 60rpx;
/* #endif */
有時候因爲需求只讓某兩個平臺存在某些代碼。那麼就用這 || ，不能用&&，因爲沒出現交集。代碼示例如下方：
<!-- #ifdef H5 || MP-WEIXIN -->
<view :style="{ height: iStatusBarHeight + 'px'}" class="stat"></view>
<!-- #endif -->
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
<view :style="{ height: iStatusBarHeight + 'px'}" class="stat"></view>
<!-- #endif -->
<!-- #ifdef H5 || APP-PLUS -->
<view :style="{ height: iStatusBarHeight + 'px'}" class="stat"></view>
<!-- #endif -->
swiper() {
uni.request({
url: 'https://www.fastmock.site/mock/745d/shop/api/swiper',
method: 'GET',
dataType: 'JSON',
data: {
text: 'uni.request'
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: (res) => {
console.log(res.data);
// #ifdef APP-PLUS || H5
this.swiperList = res.data.postss;
// #endif
// #ifdef MP-WEIXIN
this.swiperList = JSON.parse(res.data).postss;
// #endif
}
});
},
以上就是條件編譯的使用方法，只是個人理解，做個筆記。如有不足，多多指正。