前端笔记 —— uni-app踩坑记录

一、生命周期注意事项

1. 页面生命周期onLoad和onInit函数无法使用async await。
2. composition API中，onLoad函数只能写在setup同一级，无法由setup代替。

二、ts开发注意事项

1. 拆分引用组件时，引用路径一定要完整引用到.vue，无法用index.ts形式转发。
2. vue3的初始模版类型声明有问题，更新typescript或者vue的版本即可。

三、样式开发注意事项

1. 深度选择器需要加上一个配置才会起作用

//@ts-ignore
@Component({
options: { styleIsolation: 'shared' },
})
export default class demo extends Vue {}



export default defineComponent({

options: { styleIsolation: 'shared' },

setup() {},
})

2. 动态改变主题色功能只能使用css变量，无法使用scss变量。uni-app中，绑定根元素样式中不能直接绑定整个对象，必须把每一个选项列出来，且在使用时要用横杠不能用驼峰。
3. 每个页面组件最外层都要包一层view，尽量不要直接使用原生组件，不然在高度方面会出现问题。
4. position: sticky只针对于父级元素的滚动，必须得把组件外面包一层view才能生效。
5. scroll-view中子元素无法基于该scroll-view元素绝对定位，必须包一层。
6. 微信小程序scroll-view使用下拉刷新组件，必须先给定一个固定高度值，calc也不行，后续可以动态赋值。

四、微信小程序相关

1. websocket地址需要把wss写成wxs。
2. mqtt版本修改为4.1.0，微信小程序安卓真机解释器的Bug，它把host+port作为Host，能发出有效访问请求才怪。开发工具跟iOS真机解释器就没有这个问题，所以都能正确访问。
3. 小程序直播流使用flv会出现音画不同步，小程序只支持rtmp和flv。
4. 使用uni-ui的popup封装插槽时，输入框和文本框会出现placeholder的样式问题，可通过延时加载解决。
5. 微信小程序原生组件camera、canvas、input、live-player、live、pusher、map、textarea、video都已经实现同层渲染，可以通过定位设置z-index去覆盖。
6. 分享onShareAppMessage函数只能在页面触发，组件按钮分享传值可通过data-set方式传递信息。vue3中该函数无法使用this，原因未知。
7. video组件使用v-show时会导致进度条丢失。
8. 微信小程序没有dom API，自定义了选取页面节点的API，在操作结尾要加上exec()去执行操作，且只能在最后的操作上加，内嵌会引起循环，导致不停的获取。
9. 使用mqtt时，在微信开发者工具中不会显示心跳包，设置keepalive之后会一直保持连接。
10. ios小屏幕微信小程序计算高度会包含顶部刘海，大屏则不会。
11. 使用live-player组件时，暂停不要使用pause()方法，使用stop()方法，不然ios系统上暂停后无法再次播放。

五、输入框相关

1. uniapp开发微信小程序中，input输入框偶尔会出现v-model绑定的值已经清空，但是视图不更新，解决办法，使用$set，并包一层$nextTick，缺一不可。
2. ios的微信小程序输入框要键盘完全弹起才会触发focus事件，如果还没弹起来就点击了空白处失焦，会先触发blur事件，意思就是聚焦事件还没出发，失焦事件先触发了，解决方案，给input加个click事件，绑定focus变量控制获取焦点。
3. 微信小程序安卓输入框在绑定focus变量之后，输入文字，placeholder不会消失。
4. uniapp的input标签 type="number"在移动端打开键盘不能输入小数点，type得改成digit。
5. 包裹input的view上动态添加class，input会自动失焦。
6. 输入框在聚焦失焦时动态改变长度，会导致焦点和placeholder有问题，解决办法，动态赋予焦点focus为true时，加个延时0.1s。

六、滚动相关

1. 只有页面组件自带滚动，其余滚动必须使用scroll-view。
2. scroll-view组件在自定义下拉刷新时，通过refresher-triggered来控制加载状态的显示隐藏,但实际使用时会遇到问题，下拉刷新执行事件直接将refresher-triggered绑定的值改为false不会关闭加载状态。解决方案：刚开始如果refresher-triggered在data里为false，则要先将它变为true。
3. scroll-view外层也有滚动的时候，滚动到底部，会偶尔出现滚动到底部事件不生效。

七、vue3相关

1. 微信小程序中获取实例无法使用template ref，需使用getCurrentInstance().refs获取。
2. 无法使用