五、跨平台适配
5.1 多端兼容设计
Wot Design Uni采用统一的代码架构，支持多个平台：
5.2 小程序样式隔离问题及解决
在小程序中使用组件时，常常会遇到样式隔离导致样式不生效的问题。解决方法如下：
方法一：使用:deep()伪类覆盖
/* 页面样式 */
:deep(.wd-button) {
color: red !important;
}
方法二：开启styleIsolation共享
在Vue 3.3+中，可以通过defineOptions开启样式共享：
<script lang="ts" setup>
defineOptions({
options: {
styleIsolation: 'shared'
}
})
</script>
5.3 自定义组件渲染差异
不同平台对自定义组件的渲染方式存在差异。例如，微信小程序中自定义组件会比App/H5端多一层包裹节点：
<!-- 使用 -->
<wd-divider></wd-divider>
<!-- H5渲染 -->
<view class="wd-divider"></view>
<!-- 微信小程序渲染 -->
<wd-divider>
<view class="wd-divider"></view>
</wd-divider>
解决方案：设置virtualHost: true可以去除多余的外层标签：
<script lang="ts">
export default {
options: {
virtualHost: true
}
}
</script>
5.4 支付宝小程序样式隔离配置
在uni-app较新版本中，支付宝小程序的styleIsolation默认值被设置为apply-shared，这可能导致自定义组件样式穿透无法生效。需要在manifest.json中将其设置为shared：
{
"mp-alipay": {
"styleIsolation": "shared"
}
}
5.5 各平台配置要点汇总
六、性能优化
6.1 虚拟列表优化
Wot Design Uni 1.14.0版本提供的虚拟列表组件是处理大数据量列表的核心工具：
<template>
<wd-virtual-list
:data="largeData"
:item-size="60"
:buffer-size="5"
>
<template #default="{ item }">
<div class="list-item">{
{ item.text }}</div>
</template>
</wd-virtual-list>
</template>
虚拟列表的原理是只渲染可视区域内的元素，随着滚动动态加载和回收节点。这种方式可以将DOM节点数量从10000+减少到20个左右，性能提升非常显著。
6.2 按需引入
按需引入是减小包体积的核心手段。通过easycom机制，Wot Design Uni支持自动按需引入：
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
"^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
}
}
}
按需引入可以有效减小应用的初始包体积，加快小程序启动速度。
https://zlpow.cn
6.3 图片懒加载
使用Image组件时，开启懒加载可以延迟加载非可视区域的图片，提升首屏渲染性能：
<wd-image
src="{
{ item.url }}"
width="100"
height="100"
lazy-load
/>
6.4 避免频繁更新
对于徽标等频繁变化的数据，建议使用节流处理，避免频繁触发视图更新：
// 使用节流函数控制更新频率
import { throttle } from 'lodash-es'
const updateBadge = throttle((count) => {
this.badgeValue = count
}, 500)
七、国际化
7.1 内置语言包
Wot Design Uni内置了超过15种语言包，支持多语言切换：
import { createI18n } from 'vue-i18n'
import { Locale } from 'wot-design-uni'
// 引入中文和英文语言包
import zhCN from 'wot-design-uni/locale/lang/zh-CN'
import enUS from 'wot-design-uni/locale/lang/en-US'
const i18n = createI18n({
locale: 'zh-CN',
messages: {
'zh-CN': zhCN,
'en-US': enUS
}
})
// 切换语言
Locale.use('en-US')
7.2 自定义语言包
开发者也可以扩展自定义语言包：
// 自定义语言包
const customLang = {
wd: {
button: {
confirm: '确认',
cancel: '取消'
}
}
}
// 注册自定义语言
Locale.add('custom', customLang)
Locale.use('custom')
7.3 动态切换语言
<script setup>
import { ref } from 'vue'
import { Locale } from 'wot-design-uni'
const currentLang = ref('zh-CN')
const switchLanguage = (lang) => {
currentLang.value = lang
Locale.use(lang)
}
</script>
<template>
<wd-button @click="switchLanguage('zh-CN')">中文</wd-button>
<wd-button @click="switchLanguage('en-US')">English</wd-button>
</template>
八、常见问题与解决方案
8.1 组件样式覆盖不生效
问题：在页面中覆盖Wot Design Uni组件样式不生效。
解决方案：
使用:deep()伪类穿透组件样式隔离
使用组件提供的custom-class外部样式类
在自定义组件中开启styleIsolation: 'shared'
8.2 自定义组件渲染差异
问题：微信小程序中组件渲染时多出一层包裹节点。
解决方案：设置virtualHost: true去除多余的外层标签：
<script lang="ts">
export default {
options: {
virtualHost: true
}
}
</script>
8.3 支付宝小程序样式穿透失败
问题：支付宝小程序中样式穿透不生效。
解决方案：在manifest.json中配置样式隔离级别：
{
"mp-alipay": {
"styleIsolation": "shared"
}
}
8.4 表单校验失败
问题：启用了链式校验后，某些字段未显示。
解决方案：确认字段的校验状态已经通过后再显示下一级字段：
<wd-input
name="phone"
v-model="formData.phone"
:rules="[{ required: true, message: '必填' }]"
/>
<wd-input
name="code"
v-model="formData.code"
v-if="formData.phone.valid" // 手机号校验通过后才显示
/>
