uni-app 条件编译
条件编译 、跨端兼容(H5、App、微信、支付宝、百度、头条、QQ小程序)platform.vue<template><view><!-- #ifdef H5 --><view class="view-style"><text>仅在H5编译</text></view>...
·
- 条件编译 、跨端兼容(H5、App、微信、支付宝、百度、头条、QQ小程序)
platform.vue
<template>
<view>
<!-- #ifdef H5 -->
<view class="view-style">
<text>仅在H5编译</text>
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class="view-style">
<text>仅在App(Android/IOS)编译</text>
</view>
<!-- #endif -->
<!-- #ifdef MP -->
<view class="view-style">
<text>仅在小程序(微信/支付宝/百度/头条/QQ)编译</text>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="view-style view-wx-style">
<text>仅在微信小程序编译</text>
</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
// #ifdef H5
console.log('仅在H5编译')
// #endif
// #ifdef APP-PLUS
console.log('仅在App(Android/IOS)编译')
//#endif
// #ifdef MP
console.log('仅在小程序(微信/支付宝/百度/头条/QQ)编译')
// #endif
// #ifdef MP-WEIXIN
console.log('仅在微信小程序编译')
// #endif
},
methods: {
}
}
</script>
<style>
.view-style {
width: 750rpx;
height: 750rpx;
display: flex;
justify-content: center;
align-items: center;
/* #ifdef H5 */
background-color: #007AFF;
/* #endif */
/* #ifdef APP-PLUS */
background-color: #4CD964;
/* #endif */
/* #ifdef MP */
background-color: #F0AD4E;
/* #endif */
color: #FFFFFF;
}
.view-wx-style {
/* #ifdef MP-WEIXIN */
background-color: #DD524D;
/* #endif */
}
</style>
更多推荐
已为社区贡献5条内容
所有评论(0)