uniapp+vue3开发微信小程序踩坑集

news2024/12/26 11:24:57

本文主要记录使用uniapp+vue3开发微信小程序遇见的各种常见问题及注意点。（持续更新）

问题：

自定义组件为什么有些样式加不上去

给自定义组件增加class的时候，有时候不生效有时候生效，一度让我怀疑自己记忆错乱。后来突然想到自定义组件可能默认是display: inline，所以才导致的 width/margin-top/margin-bottom 等块属性不生效。一试果然如此，那么直接更改自定义组件样式加个display: block即可： <NoData class="block pt-160">

如何解决使用各种dialog组件导致的滚动穿透问题

本质上是禁用touchmove默认的滚动行为，uniapp用.stop修饰符可阻止默认行为

小程序写法

html复制代码  <view catchtouchmove="true">
    <dialog .../>
  </view>

uniapp写法

html
复制代码  <uni-popup @touchmove.stop />

禁用touchmove会同时禁掉dialog组件内部的滚动，所以如果内部也需要滚动，则需要借助 page-meta 标签（page-meta须为根标签）

html复制代码<page-meta :page-style="`overflow:${pageScrollFlag?'visible':'hidden'}`">
  ...
</page-meta>

unplugin-vue-components 不生效，仍需手动导入

vite.config.ts文件中需要把unplugin-vue-components插件提前到uni之前！！！需要把unplugin-vue-components插件提前到uni之前！！！需要把unplugin-vue-components插件提前到uni之前！！！

正确写法：

js复制代码  Components({
    dirs: ['src/components'],
    dts: 'typings/components.d.ts',
  }),
  uni(),

错误写法：

js复制代码  uni(),
  Components({
    dirs: ['src/components'],
    dts: 'typings/components.d.ts',
  }),

官方好大的坑：官方issue

子组件使用onShow、onPullDownRefresh、onReachBottom 导致接口重复触发

在页面子组件中使用onShow等是挺高频的需求，但是在 v-if 的子组件中使用了onShow等，在子组件状态来回切换时，会出现闭包导致子组件的onShow等无法被销毁，从而在onShow时回调函数中的逻辑重复执行，严重时甚至可能会造成内存溢出假死。为了解决这个问题，我封装了几个方法，本质上都是在 onunmounted 中将回调函数要执行的逻辑重置为空函数，这样虽然闭包还在但是不会再重复触发回调的逻辑：

封装 onShow：

js复制代码export const initOnshow = async (cb: () => Promise<void>) => {
  let isFirstOnShow = true
  onMounted(() => {
    cb().finally(() => {
      isFirstOnShow = false
    })
  })
  onUnmounted(() => {
    // 卸载闭包，防止内存泄漏
    onShowFn = () => {}
  })
  let onShowFn = () => {
    if (isFirstOnShow) {
      isFirstOnShow = false
      return
    }
    cb()
  }
  onShow(() => onShowFn())
}

封装 onPullDownRefresh：

js复制代码export const initRefresh = async (cb: () => Promise<void>) => {
  onUnmounted(() => {
    // 卸载闭包，防止内存泄漏
    pullDownRefresh = async () => {}
  })
  let pullDownRefresh = async () => {
    await cb()
    uni.stopPullDownRefresh()
    uni.showToast({ title: '刷新成功', icon: 'success' }).then()
  }
  onPullDownRefresh(() => pullDownRefresh())
}

封装 onReachBottom

js复制代码export const initReachBottom = async (cb: () => Promise<void>) => {
  onUnmounted(() => {
    // 卸载闭包，防止内存泄漏
    onReachFn = () => {}
  })
  let onReachFn = () => {
    cb()
  }
  onReachBottom(() => onReachFn())
}

input数据改变后页面没有实时更新

js复制代码const price = ref(0)
const handleInput = () => {
  nextTick(() => {
    if (price.value > 100) {
      price.value = 100
    }
  })
}

showLoading 和 showToast 不能同时存在

真机上如果使用 hideLoading 会立马把 toast 取消掉，所以同时出现时使用setTimeout延迟toast的时机。

怎么做状态管理和持久化

vue3 推荐使用 pinia 做全局状态管理，使用体验比 vuex 好不知道多少倍。pinia 本身相当于sessionStorage，如果要做持久化缓存需要使用 uni.setStorageSync()。而如果有大量持久化需求则需要引入另一个插件 pinia-plugin-unistorage。

关于使用 unocss

原子化CSS是一种将css用class书写出来的方式，很好的解决了关注点分离带来的痛处。在vue的单文件开发模式中，经常烦恼的一件事就是template和style中切来切去，写起来时有不畅。而原子化css则解决了这个麻烦，可以在开发时少写大量代码，较大程度提升开发体验并节省开发时间。（推荐同时使用vscode插件UnoCSS，可以显示class实际属性）

同为原子化工具，UnoCSS 相较于 Tailwind CSS 较大的优势是class都是按需生成，且规则编写更加灵活（只需要会一点点正则）。最重要的是unocss完全兼容Tailwind CSS。