uniapp中打包应用后，组件在微信小程序和其他平台实现不同的样式

上趣工作室2024-12-14 16:16

今天，我们来介绍一下，uniapp中如何实现打包应用后，组件在微信小程序和其他平台不同的样式，在这里，我们使用背景颜色进行演示，使用 UniApp 提供的 uni.getSystemInfoSync() 方法来获取系统信息，包括平台类型。以下是代码示例：

javascript 复制代码

<template>
  <view :class="bgClass"></view>
</template>

<script>
export default {
  data() {
    return {
      isWx: false,
    };
  },
  created() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    this.isWx = systemInfo.platform === 'devtools' || systemInfo.platform === 'wechat'; // 判断是否为微信小程序
  },
  computed: {
    bgClass() {
      return this.isWx ? 'bg-wx' : 'bg-other';
    },
  },
};
</script>

<style>
.bg-wx {
  background-color: #ff0000; /* 微信小程序的背景颜色 */
}

.bg-other {
  background-color: #00ff00; /* 其他平台的背景颜色 */
}
</style>

解释：

获取系统信息 ：在 created 生命周期钩子中，使用 uni.getSystemInfoSync() 方法获取系统信息，并判断平台是否为微信小程序。
计算属性 ：根据 isWx 的值来决定使用哪个 CSS 类。
样式定义 ：在 <style> 中定义了两个不同的背景颜色类。