uniapp 支付宝小程序扩展组件 component 节点的class不生效uniapp 支付宝小程序扩展组件 c

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

uniapp 支付宝小程序 扩展组件 component 节点的class不生效