
醉梦
2023/02/12阅读:55主题:Obsidian
uniapp踩坑点
最近公司在用 mPaaS 搞小程序,uniapp 模板那一套,记录一下使用中的一些踩坑点。
说明:
文章中提到的小程序mini program统一简称MP。
运行小程序 props 传值,对象方法丢失
uniapp 的 prop 传递的变量为对象时,对象内部含有函数属性,该函数属性会直接被删除。
了解更多,详见
运行 H5 时 v-if、v-for 值更细渲染异常
mPaaS + uniapp 框架下,会复现。
解决方法:
-
通过条件编译,H5 时用 html5 标签 -
有 v-if、v-for 的地方直接 div 代替 view,运行小程序时,div 会自动编译为 view,详见
运行小程序 image 标签@error 事件直接替换 src 值,渲染无效
只能通过条件渲染,如下:
<template>
<image v-if="!isError" :src="item.img" @load="onLoadImg" @error="onErrorImg" /></image>
<image v-else :src="errorImg" @load="onLoadImg" /></image>
</template>
<script>
export default {
props: {
errorImg: {
type: String,
default: ''
}
},
data() {
return {
isError: false // 图片加载状态,默认错误
}
},
methods: {
onErrorImg() {
this.isError = true;
},
onLoadImg() {
// ...
}
}
}
</script>
小程序无法通过 document 获取 DOM 节点信息
如果有获取元素距离顶部的间距这样一个场景,小程序无法通过 document 来获取相关信息,需要用到uni.createSelectorQuery()
。用法以下几点需要注意:
-
使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。 -
默认需要使用到 selectorQuery.in(this) 方法,因为 this,如需公共写法,只能 Vue 的 mixins 混入写法,可挂载到全局。 -
支付宝小程序不支持 in(component),使用无效果
兼容实现方案:
getRect(selector, all) {
return new Promise(resolve => {
let query = uni.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this);
// #endif
query[all ? 'selectAll' : 'select'](selector)
.boundingClientRect(rect => {
if (all & Array.isArray(rect) && rect.length) {
resolve(rect);
}
if(!all && rect) {
resolve(rect);
}
})
.exec();
})
}
更多,详见
顶部搜索下面的吸顶总会有间距
解决方案:吸顶时,外层元素增加padding-top
,可以根据需求设置背景色;同时,下方加个占位高度的元素,防止吸顶时,下面的开头部分内容被遮住。
onHide()和onUnload()触发时机
onHide()触发的场景
-
导航页1 => 导航页2,会触发导航页1 onHide() -
? 导航页 => 子页面,会触导航页 onHide() -
子页面1 => 子页面2,会触发子页面1 onHide()
onUnload触发的场景
-
子页面2返回子页面1,会触发子页面2 onUnload() -
子页面返回导航页,会触发子页面 onUnload()
注意:
-
导航页之间的切换不会触发onUnload() -
页面2返回到(页面1或者导航页)时,页面2只会触发onUnload(),并不会触发onHide()
页面路由跳转
使用uni.navigateTo(OBJECT)时,url可以是相对路径,也可以是绝对路径,注意文件目录层级关系。
v-if、v-show编译到小程序中的坑
v-if
编译的时候,小程序那边成了display:none\block控制,并不是DOM的创建和移除。
使用定位会造成盒子错乱,距离尺寸不好把控,在使用v-if的时候尽量多套一个盒子去适配好一点。
v-show
编译的时候,小程序那边也成了display:none\block控制,但是多了一个CSS权重问题,可能会照成控制盒子不生效问题,尽量避免使用。
总结:
在使用自定义组件tab选项卡时会有使用 v-if/v-show的时候需要多套一个盒子,来避免造成css的样式在其他端(H5、mini program)不兼容等问题。
图片错误展示占位图兼容H5/MP
需要通过import引入展位图,data赋值,然后用v-if判断展示展位图。
作者介绍
