uniapp编译成微信小程序问题

露酱
1,113 阅读4分钟

1. uniapp发布微信小程序css不支持var变量问题

uniapp，css使用var设置动态样式，在h5模式下运行没有问题，在微信小程序模式下运行不生效

:root {
    --primary-color: #1296DB;
}
.box {
    color: var(--primary-color);
}

小程序中使用

  • web开发中全局变量是定义在:root，小程序使用时在page中定义变量
:root, page {
    --primary-color: #1296DB;
    ......
}

2. uniapp解决style绑定css变量，支持var()使用

  • 在开发中遇到一个问题，就是一个使用uniapp开发的h5项目内嵌到微信小程序中需要将navBar隐藏掉，方案是将一些自定义css变量绑定到页面根元素上
  • uniapp 官方内置css变量

动态设置css自定义变量

  onShow(() => {
      // 动态设置自定义 css变量
      document.documentElement.style.setProperty('--test-color', red)
  })
  
  <style>
  .box {
      color: var(--test-color);
  }
  </style>

1731995870879.png

3.第三方ui组件或者自定义组件上添加class类名或者style样式修改样式在微信小程序端不生效，h5端正常，小程序端类名会被吃掉

4.uniapp（微信小程序端）使用::v-deep修改组件样式不生效问题

问题描述：使用uniapp开发微信小程序时使用::v-deep强制更新组件样式不生效

1732265356431.png

1732265431101.png

原因分析：

在微信小程序平台上。这是因为微信小程序对于组件样式的处理具有一定的隔离性，旨在防止样式冲突，这被称为样式隔离。 styleIsolation是uniapp提供的配置项，用于控制组件样式的作用域。可选值：

  • isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）
  • apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
  • shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件
解决方案：

使用styleIsolation属性来解决小程序样式隔离

1732266012478.png

5.uniapp页面跳转刷新与不刷新问题

1.1 前言：uni.navigateTo()页面跳转到某个页面，在该页面进行操作后再使用uni.navigateTo()携带操作后的数据返回原来的页面，页面会自动刷新，导致之前在页面填写的表单数据丢失问题；
解决方案：uni.navigateTo()换成uni.navigateBack()
1.2 uni.navigateBack()会导致页面不刷新

解决方案：

  • uni.emit和uni.emit和uni.on监听通知数据变更
// 子页面
uni.navigateBack({
    delta: 1,
    success: () => {
        // 发送数据通知
        uni.$emit('update', {})
    }
})

// 父页面
onLoad(() => {
    uni.on('update', () => {
        // 监听触发更新
    })
})

6.uniapp中showTotast在真机模式下一闪而过的问题

问题描述： 请求接口前调用uni.showLoading(),请求完成调用uni.hideLoading()，满足条件调用uni.showToast()弹出提示信息，在开发环境正常，真机模式下提示信息回一闪而过。

产生原因： uni.showLoading()和uni.showToast()调用的是同一个框，都受uni.hideLoaidng()和uni.hideToast()的影响。

1735883322823.png

7.uniapp页面跳转时uni.showToast()提示不显示问题

解决方案：定时器

uni.showToast({
    title: '提示信息,
    icon: 'none',
    duration: 2000,
})
// 延时跳转
setTimeout(() => {
    uni.redirectTo({ url: '' })
}, 2000)

8.uniapp编译成微信小程序，自定义组件会多一级父级节点

背景：

uniapp自定义组件节点如下：

1749088310490.png 编译成微信小程序之后的节点如下：

1749088456193.png

原因：

微信小程序的编译机制导致的，微信小程序的自定义组件要求组件必须有且只有一个根节点，且会自动包裹一层<view>

1749088025161.png

解决方案：

方案1：通过添加类名写样式条件编译处理

1749088786492.png

1749088837399.png

方案2： 在 自定义组件 中加入如下 virtualHost: true 属性(vue2版本)

export default {
  options: {
    // 微信小程序中 options 选项
    multipleSlots: true, //  在组件定义时的选项中启动多slot支持，默认启用
    styleIsolation: "isolated",  //  启动样式隔离。当使用页面自定义组件，希望父组件影响子组件样式时可能需要配置。具体配置选项参见：微信小程序自定义组件的样式
    addGlobalClass: true, //  表示页面样式将影响到自定义组件，但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared
    virtualHost: true,  //  将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
  },
}
avatar
文章
阅读
粉丝