uniapp开发小程序的坑

Uniapp是一个可以同时开发多个小程序平台的框架，它支持微信小程序、支付宝小程序、百度小程序和H5等多个平台，可以大大提高小程序开发的效率。但是在实际开发中，还是会有一些小坑需要避免，下面就介绍一些uniapp开发小程序的坑点。

一、视图渲染问题

1.1 CSS像素问题

在uniapp中使用CSS将会使用物理像素而不是逻辑像素进行渲染，这就导致在不同设备上显示的样式不一样。通过设置viewport的scale让页面按照逻辑像素渲染可以避免这个问题。

1.2 滚动问题

在使用scroll-view组件时，如果在其内部加入子组件，滚动时会导致页面卡顿，可以通过设置scroll-view的inertia属性为false来解决。

1.3 img标签问题

在使用img标签时需要注意它的宽高，如果没有设置，会导致图片变形，同时在小程序平台中，img标签需要设置mode属性，否则图片也会变形。

二、JS逻辑问题

2.1 生命周期问题

在小程序平台中，页面生命周期的函数名称与uniapp中的名称不同，需要进行转换。同时要注意小程序平台和H5平台有些生命周期在方法名称上的差异。例如：小程序onReady生命周期，在H5中需要使用onMounted。

2.2 自定义组件问题

在自定义组件中，需要特别注意父子组件之间的通讯问题。可以使用小程序的triggerEvent方法或Vue的$emit方法进行交互。

2.3 async/await问题

在使用async/await时，需要注意在小程序平台上需要使用promise对象进行封装。同时还要注意async/await可能会导致数据绑定的问题，在await之前需要做数据备份，避免因数据深层嵌套导致的监听丢失问题。

三、小程序API问题

3.1 跳转问题

在小程序中有两种跳转方式：wx.navigateTo和wx.redirectTo。需要根据业务需求与小程序API的限制进行选择。

3.2 tabbar问题

如果使用小程序自带的tabbar，需要在app.json中进行配置。同时在页面中使用uni.setTabBarBadge和uni.removeTabBarBadge可以动态修改tabbar上红点。

以上就是uniapp开发小程序的一些坑点，需要开发者在实际开发中注意避免。总的来说，uniapp的开发还是非常方便快捷的，它的组件库丰富，开发效率高，可以很好地解决多个小程序平台开发的问题。