UniApp简介

UniApp 是一款基于 Vue.js 的跨平台开发框架，由国内公司 DCloud 推出，旨在帮助开发者通过一套代码同时构建 iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ 小程序、快应用等多端应用。其核心目标是实现“一次开发，多端发布”，显著降低多端适配的复杂度。

1. 跨平台能力：支持编译到 iOS、Android、H5、微信/支付宝/百度/字节/QQ 小程序、快应用等 10+ 平台，通过条件编译可针对不同平台进行代码适配，解决平台差异问题。

2. 基于 Vue.js 语法：开发者使用 Vue.js 的语法、组件化开发和数据绑定模式，学习成本低，支持 Vue 2.x 和 Vue 3.x（需搭配 HBuilderX 3.4.0+）。

3. 高性能与原生体验：通过原生渲染（非 WebView）提升性能，接近原生应用的体验，支持调用原生 API（如摄像头、GPS），通过 uni. 前缀的统一 API 简化开发。

4. 丰富的组件与插件生态：内置大量跨平台组件（如 uni-list、uni-swiper）和 API（如网络请求、本地存储），提供插件市场（ext.dcloud.net.cn），可快速集成第三方功能（支付、地图、UI 库等）。

5. 开发工具链完善：官方 IDE HBuilderX 提供代码提示、真机调试、一键打包等功能，支持 CLI 命令行工具，可集成到其他开发环境（如 VS Code）。

6. 运行机制：UniApp 将 Vue 代码通过编译器转换为各平台原生代码（如小程序 WXML、Android/iOS 原生组件），使用 JavaScript 引擎（如 V8、JSCore）处理逻辑层，视图层由各平台原生组件渲染。

7. 跨端原理： 通用语法层：Vue 模板 + JavaScript + CSS（通过条件编译适配多端）；统一 API 层：通过 uni 对象封装各平台 API，屏蔽底层差异；原生渲染桥接：通过中间层将 Vue 组件映射为原生组件。

8. 开发工具使用HBuilderX（官方IDE，内置UniApp模板），一键环境搭建，自动识别并配置各平台开发环境（微信开发者工具、Android Studio 等路径），实时预览、真机调试、条件编译可视化，云打包，iOS 包无需 Mac 电脑，自动处理证书配置，云存储直接上传静态资源到 CDN

9. 微信小程序费用

学习资料：

xuni-app官网，B站：3小时UniApp零基础到上线，从零到发布：UniApp小程序全流程

UniApp特点：

跨平台开发效率高，组件库丰富（如<uni-list>、<uni-card>），支持调用原生API（如摄像头、定位）

.vue结构与Vue一致，但需遵循小程序规范（如页面路径需在pages.json注册）

使用rpx单位，避免固定像素；通过uni.getSystemInfoSync()获取设备信息动态布局

本地存储：uni.setStorageSync替代localStorage，兼容小程序缓存机制

打包前配置

• AppID绑定：在manifest.json→微信小程序配置填入AppID。
• 代码压缩：勾选“上传时压缩代码”减少包体积。
• 域名白名单：确保接口域名已在微信公众平台备案。

打包与上传

• HBuilderX发行：菜单栏选择发行→小程序-微信，自动生成/dist/build/mp-weixin目录。
• 微信开发者工具：导入上述目录，点击“上传”按钮提交审核。
• 自动化脚本：进阶可使用miniprogram-ci实现CI/CD（需配置私钥文件）。

常见问题

• 包体积超限：分包加载（subPackages配置）、静态资源CDN化。
• 真机调试：通过微信开发者工具生成预览二维码，扫码测试。