stm32做网站服务器,ckeditor 转wordpress,会员视频网站建设,wordpress 优化数据库本文主要记录使用uniappvue3开发微信小程序遇见的各种常见问题及注意点。#xff08;持续更新#xff09;
问题#xff1a;
自定义组件为什么有些样式加不上去
给自定义组件增加class的时候#xff0c;有时候不生效有时候生效#xff0c;一度让我怀疑自己记忆错乱。后来…本文主要记录使用uniappvue3开发微信小程序遇见的各种常见问题及注意点。持续更新
问题
自定义组件为什么有些样式加不上去
给自定义组件增加class的时候有时候不生效有时候生效一度让我怀疑自己记忆错乱。后来突然想到自定义组件可能默认是display: inline所以才导致的 width/margin-top/margin-bottom 等块属性不生效。一试果然如此那么直接更改自定义组件样式加个display: block即可 NoData classblock pt-160
如何解决使用各种dialog组件导致的滚动穿透问题
本质上是禁用touchmove默认的滚动行为uniapp用.stop修饰符可阻止默认行为
小程序写法
html复制代码 view catchtouchmovetruedialog ...//view
uniapp写法
html
复制代码 uni-popup touchmove.stop /
禁用touchmove会同时禁掉dialog组件内部的滚动所以如果内部也需要滚动则需要借助 page-meta 标签page-meta须为根标签
html复制代码page-meta :page-styleoverflow:${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: () Promisevoid) {let isFirstOnShow trueonMounted(() {cb().finally(() {isFirstOnShow false})})onUnmounted(() {// 卸载闭包防止内存泄漏onShowFn () {}})let onShowFn () {if (isFirstOnShow) {isFirstOnShow falsereturn}cb()}onShow(() onShowFn())
}封装 onPullDownRefresh
js复制代码export const initRefresh async (cb: () Promisevoid) {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: () Promisevoid) {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。 注意点
不支持vue的render、inline-template、X-Templates、keep-alive、transition
relaunch redirectTo navigateTo 区别和用法
redirectTo 关闭当前页面销毁了当前页面在路由栈中的历史记录跳转到应用内的某个页面。
reLaunch 关闭所有页面打开到应用内的某个页面。清空了路由栈此时调用getCurrentPages()得到空数组
navigateTo 跳转到某个页面保留当前页面的历史记录在下个页面可使用navigateBack()返回到当前页面。
建议跳转登录页等使用redirectTo登录后再使用redirectTo跳回原页面。建议跳转到首页、我的等等一级页面使用reLaunch这样可以避免路由栈缓存的页面过多导致栈溢出。小程序最多打开20个页面建议跳转有返回按钮的页面使用navigateTo保留栈历史。
事件修饰符
以下为uniapp官方文档小程序只支持.stop .native两个修饰符
.stop: 各平台均支持使用时会阻止事件冒泡在非 H5 端同时也会阻止事件的默认行为.native: 监听原生事件各平台均支持.prevent: 仅在 H5 平台支持.capture: 仅在 H5 平台支持.self: 仅在 H5 平台支持.once: 仅在 H5 平台支持.passive: 仅在 H5 平台支持
生命周期
uniapp小程序除了小程序自己的页面生命周期还有vue的组件生命周期。
onLoad 当页面加载时触发回调接收来自上个页面传递的参数onShow 当 uni-app 启动或从后台进入前台显示onHide 当 uni-app 从前台进入后台onPullDownRefresh 当下拉刷新时触发onReachBottom 当页面滚动到底部时触发
注意onLoad生命周期只会在页面加载时触发所以如果用在组件中当组件v-if重新加载时不会重新触发。如果要重新触发需要使用onMounted等vue组件生命周期。
好文推荐
uniapp小程序开发的超长实践总结最全笔记收藏-CSDN博客
