uniapp的前端技术
Uniapp 的核心前端技术
Uniapp 基于 Vue.js 框架构建，开发者可使用 Vue 的语法和组件化开发模式。支持 Vue 2 和 Vue 3（需通过 HBuilderX 3.4.0+ 版本开启）。
跨平台编译通过条件编译实现，不同平台的代码可通过预处理指令区分：
// #ifdef H5
console.log('仅在H5平台生效');
// #endif样式与布局方案
采用 Flex 布局作为基础方案，支持 rpx 响应式单位（1rpx=屏幕宽度/750）。样式编写遵循 CSS 标准，同时支持 Sass/Less 预处理器。
平台差异样式可通过条件编译处理：
/* #ifndef APP-PLUS */
.header { height: 44px; }
/* #endif */原生能力调用机制
通过 uni 对象提供跨平台 API，如：
uni.getLocation({
type: 'wgs84',
success: res => console.log(res)
});原生插件扩展需通过 uni.requireNativePlugin 引入，各平台插件需按规范封装。
性能优化策略
页面预加载通过 uni.preloadPage 实现，组件按需加载使用 easycom 自动导入。图片优化推荐使用 image 组件的 lazy-load 属性。
启动速度优化建议：
- 减少首包体积
- 使用分包加载
- 避免同步 API 阻塞
多端适配方案
平台差异处理方式：
- 组件差异：通过
@platform目录区分 - API 兼容：检查 uni.canIUse 判断支持情况
- 界面适配：使用 uni.getSystemInfo 获取设备信息
自定义组件应遵循 props/events/slots 标准接口，避免直接操作平台特有 API。
调试与发布流程
开发阶段可使用各平台开发者工具：
- 微信开发者工具（小程序）
- Safari/Chrome（H5）
- Android Studio/Xcode（App）
发布时通过 HBuilderX 云打包或本地打包生成不同平台产物，需注意各应用商店的审核规范差异。
