uni-app小坑吐槽，专业技术博文解读

在H5端、App端、微信小程序端都使用过uni-app之后，一些坑踩过，有些还历历在目。之前，尝试将一个H5项目通过uni-app迁移为微信小程序，考虑的当然是整个H5项目直接迁移过来，省事又放心。使用vue开发H5项目，把vue替换为uni-app的核心，这是最简单的想法，然而在使用过程中还是遇到了一些问题。

别把H5项目直接迁移为微信小程序

H5项目直接迁移为微信小程序往往会出现以下情况：

• 布局错乱：H5项目中的布局可能不适用于微信小程序，需要进行调整。
• 组件不兼容：H5项目中使用的组件可能不兼容微信小程序，需要替换为微信小程序专用的组件。
• 接口不兼容：H5项目中使用的接口可能不兼容微信小程序，需要替换为微信小程序专用的接口。
• 样式不兼容：H5项目中的样式可能不兼容微信小程序，需要进行调整。

解决方法

1. 优化H5代码

• 移除不必要的代码
• 简化代码结构
• 优化代码性能

2. 使用uni-app组件库

• uni-app提供了一系列组件库，可以帮助您快速构建微信小程序
• 这些组件库经过优化，适用于微信小程序开发

3. 使用uni-app提供的API

• uni-app提供了一系列API，可以帮助您调用微信小程序的原生功能
• 这些API经过封装，使用起来更加简单方便

图片资源使用

在uni-app中使用图片资源，需要注意以下几点：

• 图片资源大小不能超过2MB
• 图片资源必须是PNG、JPG或JPEG格式
• 图片资源必须放在项目目录下的static文件夹中
• 在代码中引用图片资源时，必须使用相对路径

解决方法

1. 压缩图片资源

• 使用在线工具或软件压缩图片资源
• 减少图片资源的分辨率

2. 使用CDN加速图片加载

• 将图片资源上传到CDN服务器
• 在代码中使用CDN的URL引用图片资源

网络请求

在uni-app中进行网络请求，需要注意以下几点：

• 请求地址必须是绝对路径
• 请求方法必须是GET或POST
• 请求数据必须是JSON格式
• 响应数据必须是JSON格式

解决方法

1. 使用uni-app提供的网络请求库

• uni-app提供了一个网络请求库，可以帮助您轻松进行网络请求
• 这个网络请求库封装了微信小程序的网络请求API，使用起来更加简单方便

2. 使用Promise或async/await处理网络请求

• 使用Promise或async/await可以帮助您更轻松地处理网络请求
• 这些技术可以帮助您避免回调函数的嵌套，使代码更加简洁易读

App端与H5端切换报错

在uni-app中，App端和H5端之间切换时，可能会出现以下报错：

• 未找到模块
• 找不到导出变量

解决方法

1. 在App端和H5端分别定义入口文件

• 在App端，入口文件为main.js
• 在H5端，入口文件为index.js

2. 在main.js中引入index.js

• 在main.js中，使用require()函数引入index.js
• require('./index.js')

3. 在index.js中导出变量

• 在index.js中，使用export导出变量
• export const variable = value

频繁刷新引起的页面错乱

在uni-app中，如果频繁刷新页面，可能会出现以下情况：

• 页面错乱
• 页面加载失败

解决方法

1. 避免频繁刷新页面

• 尽量减少页面的刷新频率
• 使用其他方式来更新页面数据

2. 使用uni-app提供的页面缓存功能

• uni-app提供了一个页面缓存功能，可以帮助您避免频繁刷新页面
• 使用这个功能可以提高页面的加载速度，并减少服务器的压力

3. 使用uni-app提供的懒加载功能

• uni-app提供了一个懒加载功能，可以帮助您延迟加载页面中的图片和视频
• 使用这个功能可以提高页面的加载速度，并减少网络流量的消耗