uniapp的知识点
uniapp 的核心概念
uniapp 是一个使用 Vue.js 开发跨平台应用的框架,支持编译到 iOS、Android、H5 以及各种小程序平台。其核心思想是“一次开发,多端发布”,通过条件编译和平台差异化处理实现跨端兼容。
开发环境搭建
安装 HBuilderX 作为官方推荐的 IDE,内置 uniapp 项目模板和调试工具。通过 npm 或 yarn 全局安装 @vue/cli,可使用 vue-cli 创建 uniapp 项目。需配置各平台开发者工具(如微信开发者工具)用于真机调试。
目录结构规范
项目根目录包含 pages 存放页面组件,static 放置静态资源,components 为公共组件。manifest.json 配置应用名称、图标等原生信息,pages.json 定义页面路由与窗口样式。App.vue 是应用入口文件,main.js 初始化 Vue 实例。
生命周期管理
应用生命周期包含 onLaunch、onShow、onHide,在 App.vue 中定义。页面生命周期包括 onLoad、onShow、onReady 等,与小程序规范一致。组件生命周期遵循 Vue 标准,如 created、mounted。
样式与布局适配
采用 rpx 作为响应式单位,可根据屏幕宽度自适应缩放。支持 Flex 布局和条件编译样式,通过 /* #ifdef MP-WEIXIN */ 实现平台专属样式。建议使用 SCSS/Less 预处理增强样式复用。
数据绑定与状态管理
沿用 Vue 的响应式数据绑定机制,模板中使用 {{}} 插值表达式。复杂状态推荐使用 Vuex,需注意持久化存储时各端差异。通过 uni.setStorageSync 实现本地数据缓存。
路由与导航
pages.json 配置页面路径,通过 uni.navigateTo 实现跳转。TabBar 页面需使用 uni.switchTab 切换。路由传参通过 URL 拼接或全局事件总线实现,接收方在 onLoad 中解析参数。
原生能力调用
封装了统一的 API 调用原生功能,如 uni.request 发起网络请求,uni.chooseImage 选择图片。设备相关功能通过 uni.getSystemInfo 获取系统信息。支付、定位等需配置权限并处理各端差异。
条件编译策略
通过注释语法实现多端差异化代码:
// #ifdef H5
console.log('仅在H5环境执行');
// #endif
支持平台标识符(APP-PLUS、MP-WEIXIN 等)和文件后缀编译(如 file.weixin.vue)。
插件生态与扩展
使用 uni_modules 规范管理插件,官方市场提供现成功能模块。原生功能扩展需开发原生插件,Android 需编写 Java 代码,iOS 使用 Objective-C/Swift。支持引入第三方 npm 包,但需注意兼容性。
性能优化要点
避免过度使用 v-if,优先采用 v-show。长列表使用 uni-list 组件或实现虚拟滚动。图片资源进行压缩并使用懒加载。分包加载策略减少主包体积,预下载规则提升用户体验。

调试与发布流程
开发阶段使用真机调试并开启 Chrome 开发者工具。发布前需配置各平台签名证书,H5 部署注意路由模式兼容性。小程序需上传代码至对应平台审核,App 打包生成安装包提交应用商店。






