uniapp指南

开发环境搭建

下载HBuilderX作为官方推荐的开发工具，支持Windows和Mac系统。安装后创建uni-app项目，选择模板（如默认模板、Hello Uni-app等）。确保Node.js版本在12以上，用于依赖管理。

项目结构解析

项目根目录包含pages（页面存放）、static（静态资源）、components（组件）等文件夹。manifest.json配置应用名称、图标等基本信息，pages.json定义页面路由与导航栏样式。

页面与组件开发

页面文件由.vue单文件组件构成，包含template、script、style三部分。使用uni-app内置组件如<view>替代<div>，<text>替代<span>。跨端兼容需注意条件编译：

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

路由与导航

通过pages.json配置路由，示例：

{
  "pages": [
    { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }
  ]
}

跳转使用uni.navigateTo({ url: '/pages/detail/detail' })，返回用uni.navigateBack()。

样式与布局

采用Flex布局，支持rpx响应式单位（1rpx≈0.5px）。全局样式写在App.vue中，局部样式使用scoped。注意部分CSS属性在不同平台需前缀，如-webkit-。

数据请求

封装uni.request进行网络请求：

uni.request({
  url: 'https://api.example.com/data',
  success: (res) => console.log(res.data)
});

推荐使用uni.$emit和uni.$on进行跨页面事件通信。

打包与发布

HBuilderX提供一键打包，生成H5、小程序或App。小程序需配置微信开发者工具路径；Android打包需证书；iOS需开发者账号。H5部署到服务器需配置跨域。

调试技巧

使用Chrome开发者工具调试H5端，小程序端用各自开发者工具。真机调试通过USB连接设备，启用调试模式。日志输出使用uni.showToast或console.log。

性能优化

避免频繁setData，使用图片懒加载，减少DOM节点数量。分包加载配置在pages.json中：

{
  "subPackages": [
    { "root": "subpackage", "pages": [...] }
  ]
}

插件生态

通过uni插件市场扩展功能，如地图、支付等。安装后按文档引入，部分插件需配置原生依赖。