uniapp踩坑记(一)

1,220 阅读1分钟

一、样式兼容问题

1.1 rpx单位问题 Uniapp中使用rpx作为单位进行布局,但在不同平台上,rpx的表现方式可能会有所不同。在小程序中,1rpx等于屏幕宽度的1/750,而在App中,1rpx等于屏幕宽度的1/2。所以在开发过程中,需要根据不同平台进行单位的换算,可以使用uni.$bem.px2rpx()方法进行转换。

1.2 样式兼容问题 不同平台对于某些CSS样式的支持程度不同,例如flex布局在小程序中表现可能会有问题。在开发过程中,需要注意样式的兼容性,可以使用条件编译的方式,针对不同平台编写不同的样式代码。

二、组件兼容问题

2.1 组件差异问题 不同平台对于某些组件的支持程度不同,例如小程序中不支持video组件。在使用组件时,需要注意组件在不同平台上的兼容性,可以使用条件编译的方式,针对不同平台编写不同的组件代码。

2.2 组件参数问题 不同平台对于组件参数的支持程度也有差异,例如小程序中的textarea组件不支持placeholder参数。在使用组件时,需要注意组件参数的兼容性,可以使用条件编译的方式,针对不同平台编写不同的组件参数代码。

三、API兼容问题

3.1 API差异问题 不同平台对于某些API的支持程度不同,例如小程序中的request方法和App中的request方法参数不一样。在使用API时,需要注意API在不同平台上的兼容性,可以使用条件编译的方式,针对不同平台编写不同的API代码。

3.2 API返回值问题 不同平台对于API的返回值可能会有差异,例如小程序中的request方法返回的是一个Promise对象,而App中的request方法返回的是一个回调函数。在使用API时,需要注意API的返回值,在不同平台上进行相应的处理。

四、生命周期问题

4.1 生命周期差异问题 不同平台对于生命周期的执行顺序和时机可能会有差异,例如小程序中的onShow生命周期在页面加载时不会触发。在使用生命周期时,需要注意生命周期在不同平台上的执行顺序和时机,可以使用条件编译的方式,针对不同平台编写不同的生命周期代码。

4.2 生命周期参数问题 不同平台对于生命周期的参数可能会有差异,例如小程序中的onLoad生命周期的参数是一个对象,而H5中的onLoad生命周期的参数是一个路由参数。在使用生命周期时,需要注意生命周期的参数,在不同平台上进行相应的处理。

五、打包问题

5.1 图片路径问题 在Uniapp中,图片路径可以使用绝对路径或相对路径,但在打包时,需要注意图片路径的问题。在小程序中,需要将图片路径转换为相对路径,可以使用uni.$bem.relativePath()方法进行转换。

5.2 打包大小问题 在Uniapp中,打包后的文件大小可能会比较大,影响应用的加载速度。可以使用uni.$bem.compress()方法对文件进行压缩,减小文件大小。

六、性能优化问题

6.1 频繁更新问题 在Uniapp中,频繁更新数据可能会导致页面卡顿。可以使用uni.$bem.debounce()方法对数据更新进行节流,减少更新的频率。

6.2 资源加载问题 在Uniapp中,加载大量的资源可能会导致页面加载缓慢。可以使用uni.$bem.lazyload()方法对资源进行懒加载,减少页面加载时间。