uniapp 快速开发

uniapp 快速开发指南

环境搭建
安装 HBuilderX（官方 IDE），内置 uniapp 开发环境。支持 Vue.js 语法，无需额外配置 Webpack。通过 HBuilderX 创建项目时选择 uniapp 模板，自动生成基础目录结构。

多端适配
使用条件编译实现代码差异化。语法示例：

// #ifdef H5
console.log('仅在 H5 平台生效');
// #endif

支持编译到微信小程序、App、H5 等平台，通过 manifest.json 配置各平台特性。

组件与 API
调用内置跨端组件如 <scroll-view>、<swiper>，使用 uni. 前缀的 API（如 uni.request）。UI 库推荐使用 uView 或 uni-ui，通过 npm 安装后按需引入。

状态管理
小型项目可用 globalData（在 App.vue 中定义），复杂场景建议搭配 Pinia 或 Vuex。示例：

// store/index.js
import { createPinia } from 'pinia';
const pinia = createPinia();
export default pinia;

调试与发布
HBuilderX 内置真机调试功能。打包时选择对应平台，自动处理依赖和签名。微信小程序需配置 mp-weixin 节点的 appid，App 需生成证书。

性能优化
避免大列表渲染，使用 <list> 组件。静态资源压缩后存放于 static 目录，通过 @/static/ 引用。启用分包加载降低首屏时间，在 pages.json 中配置 subPackages。