uniapp中的平台判断有两种场景,分别是编译期判断和运行期判断。
编译期判断可以写在script、template和style标签内。编译期一般就是用ifdef,在我们的代码中多次用到,但需要注意控制条件编译的个数,按照之前约定的规则:
同一个函数里面最多 1 个条件编译(要求)
同一个vue组件最多 3 处条件编译(要求)
积极拆分函数、文件(建议)
运行期判断代码环境,需要用uni.getSystemInfoSync().platform判断客户端环境是Android、IOS还是小程序开发者工具,但需要注意的是,无论是微信、百度还是支付宝下程序,其返回值均为devtools,不能直接细分
一般认为view组件与div组件完全等价,其实view组件自带一些效果属性,如hover-class等属性,如果有需要用到这些效果,可以直接用view
使用scroll-view组件可以解决滚动容器的问题,与传统div的overflow相比,其好处是封装了很多滚动相关的方法。在设置竖直方向滑动时,如果需要实现滚动到顶部,需要分位两步:
1. 将监听到的滚动位置的值赋值给竖向滚动条位置
2. 然后再使用setTimeout或者nextTick异步延迟将竖向滚动条设置为0
与原生小程序相比,多了第一步,在uniapp官网的示例中也是这么写的,代码注释是解决view层不同步的问题,
![](http://tiebapic.baidu.com/forum/w%3D580/sign=06dc613a805c1038247ececa8210931c/465ae5096e061d95e5f756183df40ad162d9ca3f.jpg?tbpicau=2025-03-01-05_c46d87d53605fb9b5ded77677af72b27)
为什么要这么做?做了个实验,当滑动时,scrollTop的值不会跟着变,只能通过event事件获取scrollTop,所以在设置时,需要先设置下scrollTop,避免不同步
需要注意,在webview渲染的H5中,scroll-view容器更重,其性能比不上页面滑动
在微信小程序中input组件较多时会卡顿,属于底层问题,没有好的解决方案,只能少用input,比如用text代替input,然后在用户实际输入时才展示input
swiper已封装直接使用,需要注意的是swiper-item内部使用的是image组件,而不是img标签
mobile-view和mobile-ares是对移动组件的封装,后续有拖动需求时,如发布器的九宫格、我关注的吧模块可能会用到
text和rich-text都是用来展示内容的,不同之处在于rich-text可以展示富文本内容,类似于v-html,需要注意的时,这两个节点的内容输入是数组,而服务端通常是字符串,所以需要调用html-parser进行解析
编译期判断可以写在script、template和style标签内。编译期一般就是用ifdef,在我们的代码中多次用到,但需要注意控制条件编译的个数,按照之前约定的规则:
同一个函数里面最多 1 个条件编译(要求)
同一个vue组件最多 3 处条件编译(要求)
积极拆分函数、文件(建议)
运行期判断代码环境,需要用uni.getSystemInfoSync().platform判断客户端环境是Android、IOS还是小程序开发者工具,但需要注意的是,无论是微信、百度还是支付宝下程序,其返回值均为devtools,不能直接细分
一般认为view组件与div组件完全等价,其实view组件自带一些效果属性,如hover-class等属性,如果有需要用到这些效果,可以直接用view
使用scroll-view组件可以解决滚动容器的问题,与传统div的overflow相比,其好处是封装了很多滚动相关的方法。在设置竖直方向滑动时,如果需要实现滚动到顶部,需要分位两步:
1. 将监听到的滚动位置的值赋值给竖向滚动条位置
2. 然后再使用setTimeout或者nextTick异步延迟将竖向滚动条设置为0
与原生小程序相比,多了第一步,在uniapp官网的示例中也是这么写的,代码注释是解决view层不同步的问题,
![](http://tiebapic.baidu.com/forum/w%3D580/sign=06dc613a805c1038247ececa8210931c/465ae5096e061d95e5f756183df40ad162d9ca3f.jpg?tbpicau=2025-03-01-05_c46d87d53605fb9b5ded77677af72b27)
为什么要这么做?做了个实验,当滑动时,scrollTop的值不会跟着变,只能通过event事件获取scrollTop,所以在设置时,需要先设置下scrollTop,避免不同步
需要注意,在webview渲染的H5中,scroll-view容器更重,其性能比不上页面滑动
在微信小程序中input组件较多时会卡顿,属于底层问题,没有好的解决方案,只能少用input,比如用text代替input,然后在用户实际输入时才展示input
swiper已封装直接使用,需要注意的是swiper-item内部使用的是image组件,而不是img标签
mobile-view和mobile-ares是对移动组件的封装,后续有拖动需求时,如发布器的九宫格、我关注的吧模块可能会用到
text和rich-text都是用来展示内容的,不同之处在于rich-text可以展示富文本内容,类似于v-html,需要注意的时,这两个节点的内容输入是数组,而服务端通常是字符串,所以需要调用html-parser进行解析