uni-app开发注意事项

资源目录与编译问题

• 静态资源目录：static目录下的JavaScript文件不会被编译，ES6代码需经过转换。CSS、LESS或SCSS等样式资源也不应放在此目录下，建议使用common目录。

• 模板内资源引用：在template中引用静态资源时，可以使用相对或绝对路径。

• 模块引用方式：JS文件不支持使用/开头的引用方式。

路径与环境判断

• CSS和样式文件：引用时只能使用相对路径。

• 编译期与运行期环境判断：分别使用条件编译和uni.getSystemInfoSync().platform。

单位与样式

• Rpx单位：使用时要注意屏幕宽度变化带来的影响，固定尺寸建议使用px。

• App端单位：pages.json中的titleNView或plus api只支持px单位。

• 小程序CSS：不支持本地文件使用，需使用base64编码。

• 背景图片路径：微信小程序不支持相对路径。

安全与兼容性

• 网络资源：字体图标的网络路径必须包含协议头https。

• 非H5端：不支持操作dom、window的Vue组件和JS模块，确保使用的API是uni-app提供的。

小程序组件使用

• 组件目录：小程序组件需放在项目特殊文件夹wxcomponents中。

• Vue组件中使用小程序组件：在pages.json的globalStyle中配置usingComponents。

样式与事件处理

• 内联样式：:style绑定的像素值不会被编译器转换。

• 禁止页面滚动：使用@touchmove.stop.prevent="moveHandle"。

平台特定支持与限制

• v-html支持：仅限于App端和H5端。

• plus API使用：uni-app中无需plus ready。

• 原生扩展事件监听：使用plus.globalEvent.addEventListener。

App端特殊要求

• 操作window、document的库：通过renderjs实现。

• tabbar渲染：首次加载可能不及时，可在onLoad生命周期中先显示等待提示。

配置与路径问题

• 分包加载配置：subPackages适用于小程序分包加载，App端不支持。

• 启动封面：App端的splash是必须的，应使用标准png格式。

开发最佳实践

• 组件命名：所有组件与属性名应小写，并用连字符-连接。

• scroll-view使用：不适合放长列表，应使用页面级的滚动和下拉刷新。

• 节点选中：除文本节点外，其他节点无法长按选中。

• 性能优化：对于复杂的页面结构，使用will-change属性优化样式生效速度。

视频组件与Webview

• App端视频组件：打包时需勾选VideoPlayer模块权限，本地视频路径需配置资源释放模式。

• Webview使用：App端支持网络和本地网页，小程序仅支持网络网页。

H5端特殊行为

• onBackPress：只能监听页面导航栏的返回按钮点击事件。