uniapp工程

Uniapp 工程简介

Uniapp 是一款基于 Vue.js 的跨平台开发框架，支持一次开发，多端发布（如 H5、小程序、App 等）。其工程结构清晰，开发效率高，适合快速构建多端应用。

创建 Uniapp 工程

通过 HBuilderX（官方 IDE）或命令行工具创建：

• HBuilderX：新建项目 → 选择 Uniapp 模板（默认模板、自定义模板等）。
• 命令行：

  npm install -g @vue/cli
  vue create -p dcloudio/uni-preset-vue my-project

工程目录结构

典型 Uniapp 工程目录如下：

├── pages           # 页面目录，每个页面一个子目录
│   └── index.vue   # 示例页面
├── static          # 静态资源（图片、字体等）
├── App.vue         # 应用根组件
├── main.js         # 入口文件
├── manifest.json   # 应用配置（如 AppID、启动页）
└── pages.json      # 页面路由与样式配置

核心配置文件

• pages.json：定义页面路由、导航栏样式、底部 Tab 等。

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

• manifest.json：配置应用名称、图标、权限等，区分各平台设置。

开发与调试

• 运行到浏览器：HBuilderX 中选择“运行 → 浏览器”，或命令行执行：

  npm run dev:h5

• 运行到小程序：需安装对应开发者工具（如微信开发者工具），HBuilderX 选择“运行 → 小程序”。

多端适配技巧

• 条件编译：通过注释实现不同平台代码差异化。

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

• 通用 API：使用 uni. 前缀的 API（如 uni.request）跨平台调用功能。

打包与发布

• H5：生成静态文件部署到服务器。

  npm run build:h5

• 小程序：通过开发者工具上传代码。
• App：生成原生安装包（需配置证书和签名）。

常见问题

• 跨域问题：H5 开发时需配置代理或后端支持 CORS。
• 样式兼容：部分 CSS 属性需加前缀（如 -webkit-）。
• 性能优化：减少大图加载，合理使用分包加载。

通过以上步骤，可快速上手 Uniapp 工程开发与发布。