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。






