607 uniapp条件编译、页面布局

---

<template>
  <view>
    <!-- 条件编译 -->
    <!-- 编译到H5端 -->
    <!-- #ifdef H5 -->
    <btn></btn>
    <!-- #endif -->

    <!-- 编译到H5端、app端 -->
    <!-- #ifdef H5 || APP-PLUS -->
    <btn backgroundColor="yellowgreen"></btn>
    <!-- #endif -->

    <!-- 编译到除了H5端的平台，这样就不会在H5端显示 -->
    <!-- #ifndef H5 -->
    <btn backgroundColor="pink"></btn>
    <!-- #endif -->
  </view>
</template>

<script>
  import btn from '@/components/btn/btn.vue'

  export default {
    components: {
      btn
    },
    onLoad() {
      // #ifdef H5
      // #endif
      uni.getSystemInfo({
        success(res) {
          console.log('success---', res);
        },
        fail(rej) {
          console.log('fail---', rej);
        },
        complete(msg) {
          console.log('complete---', msg);
        }
      })
    },
    methods: {

    }
  }
</script>

<style scoped>
  /* #ifdef H5 */
  /* #endif */

  /* 页面布局 */
  /* 导入外部css文件 */
  @import './index.css';

  /* body：在uniapp中是没有body的，用page代替body */
  page {
    background-color: lightskyblue;
  }

  /* 尺寸单位 */
  .content {
    /* px rpx rem vw vh */
    font-size: 66rpx;
  }
</style>