原生求生记：揭秘UniApp的原生能力限制

<template>
  <div class="container">
    <div :class="['box', {'ios-style': isIOS, 'android-style': isAndroid}]"></div>
  </div>
</template>
<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 200px;
  height: 200px;
  background-color: gray;
}
.ios-style {
  background-color: lightblue;
}
.android-style {
  background-color: lightgreen;
}
</style>
<script>
export default {
  data() {
    return {
      isIOS: false,
      isAndroid: false
    };
  },
  mounted() {
    this.checkPlatform();
  },
  methods: {
    checkPlatform() {
      // 检测当前运行平台
      this.isIOS = uni.getSystemInfoSync().platform === 'ios';
      this.isAndroid = uni.getSystemInfoSync().platform === 'android';
    }
  }
};
</script>

<template>
  <div class="container" ref="container">
    <div class="list-wrapper" :style="{height: listHeight + 'px'}">
      <div class="list-item" v-for="item in virtualList" :key="item.id">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<style>
.container {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.list-wrapper {
  position: relative;
  border: 1px solid #ccc;
  overflow: hidden;
}
.list-item {
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
}
</style>
<script>
export default {
  data() {
    return {
      list: [], // 传入的原始数据列表
      virtualList: [], // 用于展示的虚拟列表
      listHeight: 0, // 列表的高度
      visibleCount: 10, // 可见的列表项数量
      itemHeight: 50, // 单个列表项的高度
      scrollTop: 0 // 滚动的距离
    };
  },
  mounted() {
    this.getListData(); // 获取数据，可从服务器或本地获取
    this.setListHeight(); // 设置列表高度
    this.setVirtualList(); // 设置虚拟列表展示的数据
    this.addScrollEvent(); // 监听滚动事件
  },
  methods: {
    getListData() {
      // 从服务器或本地获取数据列表
      // 示例：this.list = axios.get('api/list');
      this.list = [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        // ...
        { id: 1000, name: 'Item 1000' }
      ];
    },
    setListHeight() {
      // 计算列表的高度
      this.listHeight = this.list.length * this.itemHeight;
    },
    setVirtualList() {
      // 根据滚动位置和可见数量设置虚拟列表展示的数据
      const start = Math.floor(this.scrollTop / this.itemHeight);
      const end = start + this.visibleCount;
      this.virtualList = this.list.slice(start, end);
    },
    addScrollEvent() {
      // 监听滚动事件，实时更新虚拟列表展示的数据
      this.$refs.container.addEventListener('scroll', () => {
        this.scrollTop = this.$refs.container.scrollTop;
        this.setVirtualList();
      });
    }
  }
};
</script>

export default {
  methods: {
    // 调用原生分享功能
    share() {
      #ifdef APP-PLUS
        // 在APP-PLUS环境下，调用原生分享功能
        plus.share.sendWithSystem({ content: 'Hello, World!' });
      #endif
      #ifdef H5
        // 在H5环境下，提示用户无法使用原生分享功能
        alert('抱歉，当前环境不支持原生分享功能！');
      #endif
    }
  }
};

<template>
  <div>
    <div v-if="isPluginSupported">
      <!-- 在支持插件的平台下渲染插件内容 -->
      <plugin-component />
    </div>
    <div v-else>
      <!-- 在不支持插件的平台下提供替代方案 -->
      <p>当前环境不支持该插件，请使用其他功能替代。</p>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    isPluginSupported() {
      #ifdef APP-PLUS
        // 在APP-PLUS环境下，检查插件是否可用
        return typeof uni.requireNativePlugin !== 'undefined';
      #endif
      #ifdef H5
        // 在H5环境下，检查插件是否可用
        return typeof window.PluginComponent !== 'undefined';
      #endif
      // 其他平台默认支持插件
      return true;
    }
  }
};
</script>

<template>
  <div>
    <div v-if="isComponentSupported">
      <!-- 在支持组件库的平台下渲染组件 -->
      <third-party-component />
    </div>
    <div v-else>
      <!-- 在不支持组件库的平台下提供替代方案 -->
      <p>当前环境不支持该组件库，请使用其他方式实现相同的功能。</p>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    isComponentSupported() {
      #ifdef APP-PLUS
        // 在APP-PLUS环境下，检查第三方组件库是否可用
        return typeof uni.component.isDefined !== 'undefined' && uni.component.isDefined('third-party-component');
      #endif
      #ifdef H5
        // 在H5环境下，检查第三方组件库是否可用
        return typeof window.ThirdPartyComponent !== 'undefined';
      #endif
      // 其他平台默认支持第三方组件库
      return true;
    }
  }
};
</script>

// 使用IIFE（Immediately Invoked Function Expression）在函数作用域中定义变量，避免全局变量污染
(function() {
  // 在函数作用域内定义变量
  var localVariable = '局部变量';
  // 将需要暴露给外部的变量或方法赋值给全局对象
  window.myObject = {
    globalVariable: '全局变量',
    getLocalVariable: function() {
      return localVariable;
    },
    // ...其他方法和属性
  };
})();

#ifdef H5
// H5环境特定代码
#endif
#ifdef APP-PLUS
// APP-PLUS环境特定代码
#endif
// 其他平台默认代码

/* H5平台特定样式 */
@media (min-height: 500px) {
  /* H5平台下的样式处理 */
}
/* APP-PLUS平台特定样式 */
#ifdef APP-PLUS
/* APP-PLUS平台下的样式处理 */
#endif
/* 其他平台默认样式 */