常见问题FAQ ​

本节介绍在开发过程当中遇到的部分 常见问题 以及 解决办法

目前支持哪些平台？ ​

目前支持APP-vue、微信小程序和h5，在1.0.0版本之前都是支持这三个平台。当我们升级到1.0.0版本时会新增支持支付宝小程序和钉钉小程序，虽然当前目前基本也是支持这两个平台的，但是有部分组件存在样式差异，这一点因为时间问题还没有修复，所以这里也是不推荐在支付宝小程序和钉钉小程序中使用Wot Design Uni组件库。

如何开启暗黑模式？ ​

Wot Design Uni支持深色模式、主题定制等能力，详见ConfigProvider 全局配置组件。

小程序样式隔离 ​

在页面中使用 Wot Design Uni 组件时，可直接在页面的样式文件中覆盖样式 ​

<wd-button type="primary">主要按钮</wd-button>

/* 页面样式 */
:deep(.wd-button) {
  color: red !important;
}

在自定义组件中使用 Wot Design Uni 组件时，需开启styleIsolation: 'shared'选项 ​

<wd-button type="primary">主要按钮</wd-button>

<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared'
  }
}
</script>

/* 组件样式 */
:deep(.wd-button) {
  color: red !important;
}

小程序使用外部样式类 ​

Wot Design Uni 开放了大量的自定义样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。需要注意的是普通样式类和自定义样式类的优先级是未定义的，因此使用时请添加!important以保证外部样式类的优先级。

<wd-button custom-class="custom-button" type="primary">主要按钮</wd-button>

/* 组件样式 */
:deep(.custom-button) {
  color: red !important;
}

小程序自定义组件渲染问题 ​

微信/QQ/百度/抖音这四家小程序，自定义组件在渲染时会比App/H5端多一级节点，下面以divider组件举例：

<!-- 使用 -->
<wd-divider></wd-divider>

<!-- h5渲染 -->
<view class="wd-divider"></view>

<!-- 微信小程序渲染 -->
<wd-divider>
  <view class="wd-divider"></view>
</wd-divider>

解决办法 ​

在微信端可以使用virtualHost解决，virtualHost设为true之后会将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签，启用后还可以通过 mergeVirtualHostAttributes 合并合并组件虚拟节点外层属性。

// vue2使用virtualHost
export default {
  data(){ return { } },
  options: {
    virtualHost: true
  }
}

// vue3 script setup 使用virtualHost
<script lang="ts">
export default {
  // 将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签
  options: {
    virtualHost: true
  }
}
</script>
<script lang="ts" setup>
</script>

启用virtualHost效果 ​

这里我们还是以divider组件举例：

<!-- 使用 -->
<wd-divider></wd-divider>

<!-- h5渲染 -->
<view class="wd-divider"></view>

<!-- 微信小程序渲染 -->
<view class="wd-divider"></view>

关于我们 ​

如果您的问题不在上述列表中或您有更好的建议，请联系我们 Moonofweisheng