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+)

再看看支付版官方怎么说的

1. styleIsolation默认值为 apply-shared，我们需要设置为shared

页面样式隔离 默认情况下，页面的样式将对外产生影响。从基础库版本2.7.2开始，可以在页面的 .json 文件中配置 styleIsolation，避免页面的样式影响到外部。例如：

{
  "styleIsolation": "apply-shared"
}

该选项支持以下取值： ● apply-shared 表示 app.acss 样式以及其他（设置了 shared 的其他页面和自定义组件）的样式将影响到当前页面，但当前页面 acss 中指定的样式不会影响外部。 ● shared（默认）表示 app.acss 样式以及其他（设置了 shared 的其他页面和自定义组件）的样式将影响到当前页面，当前页面 acss 中指定的样式也会影响到外部。

2. 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，全局改变节点样式，根据自己的项目实际情况来设置。