uniapp的知识点
Uniapp 基础知识
Uniapp 是一个基于 Vue.js 的跨平台开发框架，支持一次开发，多端发布（如 iOS、Android、H5、小程序等）。以下是其核心知识点：
开发环境搭建
安装 HBuilderX（官方推荐的 IDE），配置相关插件和 SDK。创建项目时选择 Uniapp 模板，支持 Vue2 或 Vue3 语法。
项目结构
pages：存放页面文件，每个页面需在pages.json中注册。static：存放静态资源（图片、字体等）。components：存放可复用的组件。manifest.json：配置应用名称、图标等原生信息。pages.json：全局配置页面路由、导航栏样式等。
核心特性
条件编译
通过注释语法实现多平台差异化代码，例如：
// #ifdef H5
console.log("仅在 H5 平台生效");
// #endif生命周期
- 应用生命周期：
onLaunch、onShow、onHide（在App.vue中定义）。 - 页面生命周期：
onLoad、onShow、onReady（在页面中定义）。 - 组件生命周期：与 Vue 相同（如
created、mounted）。
路由与导航
- 使用
uni.navigateTo跳转页面，uni.redirectTo重定向。 - 路由参数通过
onLoad(options)的options对象传递。
跨平台适配
样式适配
- 使用
rpx单位（响应式像素），根据屏幕宽度自动缩放。 - 通过条件编译适配不同平台的样式文件。
API 调用
- 统一 API：如
uni.request、uni.getLocation，框架会自动转换为各平台原生 API。 - 平台特有 API：通过条件编译调用，例如微信小程序的
wx.login。
组件兼容性
部分组件（如 <scroll-view>）在不同平台表现可能不同，需测试并调整参数。
性能优化
代码分包
在 pages.json 中配置 subPackages，将非首屏页面拆分为子包，减少初始加载时间。
图片压缩
使用工具压缩静态资源，或通过云服务动态调整图片尺寸。
懒加载
对长列表使用 <uni-list> 或第三方组件实现懒加载，减少内存占用。
发布与打包
H5 发布
配置 manifest.json 中的 H5 选项，运行 npm run build:h5 生成 dist 目录。
小程序发布
在开发者工具中导入项目，调试后提交审核。
App 打包
使用 HBuilderX 的“原生 App-云打包”或本地打包，生成 APK/IPA 文件。
常见问题
跨域问题（H5）
开发时配置代理，或让后端开启 CORS；生产环境使用同域请求。
真机调试
通过 HBuilderX 的“真机运行”功能，直接连接设备调试。
平台差异处理
利用 uni.getSystemInfo 获取平台信息，动态调整逻辑或 UI。
