uniapp 支付宝小程序 扩展组件 component 节点的class不生效
uniapp 支付宝小程序 扩展组件 component 节点的class不生效
项目中使用了uniapp 的扩展组件 uni-easyinput
<template><view class="container"><view class="btn-group"><button class="btn">这是一个按钮</button><button class="btn" @click="navigateTo('single')">单页拖拽</button><button class="btn" @click="navigateTo('multi')">多页拖拽</button><uni-easyinput prefixIcon="phone" placeholder="请输入手机号" :trim="true"></uni-easyinput></view></view>
</template><script setup lang="ts">
const navigateTo = (type: 'single' | 'multi') => {const pages = {single: '/pages/single-page/index',multi: '/pages/multiple-page/index'}uni.navigateTo({url: pages[type]})
}
</script><style>
.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;
}.btn-group {display: flex;flex-direction: column;gap: 20px;width: 80%;
}.btn {width: 100%;height: 80px;line-height: 80px;text-align: center;background-color: #4a8cff;color: white;border-radius: 10px;font-size: 16px;border: none;
}.btn:active {opacity: 0.8;
}
</style>
编译运行之后
微信小程序没有问题
支付宝小程序 扩展组件 component 节点的class不生效
如图效果
微信小程序：
支付宝小程序：
解决方案一、
修改组件源码
在uni-icons外层加一个层view 并把uni-icons的class添加至view节点
<view class="content-clear-icon"><uni-icons v-if="prefixIcon" :type="prefixIcon" color="#c0c4cc" @click="onClickIcon('prefix')" size="22"></uni-icons>
</view>
这个方案不是特别好，如果使用的自定义组件或者扩展组件多了，就需要修改每个组件的源码，比较麻烦
而且修改源码对项目的影响比较大，维护升级迭代也不好，所以不建议使用这种方案。
解决方案二、
我们通过工程化配置去实现兼容效果，修改manifest.json 应用配置
我们看看uniapp官方的mp-alipay 应用配置
| 属性 | 类型 | 说明 |
|---|---|---|
| plugins | Object | 使用到的插件，详见 |
| component2 | Boolean | 是否启用 component2 编译，默认为true，查看详情 |
| enableAppxNg | Boolean | 是否启用 enableAppxNg 小程序基础库 2.x 构建，默认为true，查看详情，HBuilderX 3.2.10+ |
| axmlStrictCheck | Boolean | 是否启用 axml 严格语法检查，默认为false |
| enableParallelLoader | Boolean | 是否启用多进程编译，默认为false |
| enableDistFileMinify | Boolean | 是否压缩编译产物（仅在真机预览/真机调试时生效），默认为false |
| enableNodeModuleBabelTransform | Boolean | appx 2.0 特性，对 node_modules 中的模块做 babel 编译，默认值：true |
| uniStatistics | Object | 支付宝小程序是否开启 uni 统计，配置方法同全局配置 |
| scopedSlotsCompiler | String | Vue2 作用域插槽编译模式，uni-app 3.1.19+ 开始支持，可选：legacy、auto、augmented，默认：auto |
| mergeVirtualHostAttributes | Boolean | 合并由 Vue 组件编译而成的小程序组件虚拟节点外层属性，目前仅支持 id（v4.42+）、style（v3.5.1+）、class（v3.5.1+）以及 v-show 指令生成的 hidden（v4.41+） 属性 |
| slotMultipleInstance | Boolean | 模拟单个作用域插槽渲染为多个实例，此配置仅限 Vue2 环境 3.7.12+，Vue3 环境已默认支持 |
| lazyCodeLoading | String | 是否开启代码按需执行 |
| styleIsolation | String | 组件样式隔离方式，默认值为 apply-shared，具体配置 详见。 uni-app 3.99+ 开始支持 |
| nativeTags | Array | 支付宝小程序平台的原生组件 (4.81+) |
再看看支付版官方怎么说的
styleIsolation默认值为apply-shared，我们需要设置为shared
页面样式隔离
默认情况下，页面的样式将对外产生影响。从基础库版本2.7.2开始，可以在页面的 .json 文件中配置 styleIsolation，避免页面的样式影响到外部。例如：
{"styleIsolation": "apply-shared"
}
该选项支持以下取值：
● apply-shared 表示 app.acss 样式以及其他（设置了 shared 的其他页面和自定义组件）的样式将影响到当前页面，但当前页面 acss 中指定的样式不会影响外部。
● shared（默认）表示 app.acss 样式以及其他（设置了 shared 的其他页面和自定义组件）的样式将影响到当前页面，当前页面 acss 中指定的样式也会影响到外部。
mergeVirtualHostAttributes设置为true
uniapp官方说明
其他配置
Vue 组件编译到小程序平台的时候会编译为对应平台的组件，部分小程序平台支持 options 选项（具体选项参考对应小程序平台文档的自定义组件部分），一般情况默认即可，如有特殊需求可在 Vue 组件中增加 options 属性。
| 属性 | 类型 | 默认值 | 描述 | 平台兼容性 |
|---|---|---|---|---|
| multipleSlots | Boolean | true | 在组件定义时的选项中启动多slot支持 | |
| styleIsolation | String | apply-shared | 组件样式隔离方式，具体配置选项参见：组件样式隔离 | 微信小程序 |
| addGlobalClass | Boolean | true | 这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation | 微信小程序 |
| virtualHost | Boolean | false | 将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定，启用后可以通过 mergeVirtualHostAttributes 合并合并组件虚拟节点外层属性 | 支付宝小程序（默认值为 true）、微信小程序、抖音小程序（4.02+） |
例如：
export default {props: ['data'],data(){ return { } },options: {virtualHost: true}
}
支付宝小程序方案二效果
我的manifest.json 配置
"mp-alipay": {"usingComponents": true,"styleIsolation": "shared","mergeVirtualHostAttributes": true},
效果图：
注意：调试这两个属性的时候需要注意全局样式，以及调试支付宝小程序的时候编译之后需要先清除缓存。还有第三种就是只设置styleIsolation，全局改变节点样式，根据自己的项目实际情况来设置。