Uniapp项目运行到微信小程序、H5、APP等多个平台教程

摘要：Uniapp作为一款基于Vue.js的跨平台开发框架，支持“一次开发，多端部署”。本文将手把手教你如何将Uniapp项目运行到微信小程序、H5、APP等多个平台，并解析常见问题。

---

一、环境准备

在开始前，请确保已安装以下工具🔧：

代码编辑器

• HBuilderX（官方IDE，推荐使用）
  创建项目教程：官方HBuilderX创建项目教程
  下载地址：HbuilderX下载地址
• Vscode（博主推荐使用🌹🌹）
  但是需要自己通过vue-cli创建项目，并配置运营打包命令，我们可以直接下载官方的模版使用，具体的cli创建项目教程可以按照官方的步骤来：Vue-cli创建项目教程
  下载地址：Vscode下载地址

项目环境

• Node.js（需≥14版本）

其他平台模拟器

• 各平台开发工具：
  • 微信开发者工具（小程序）
  • Android Studio（Android App）
  • Xcode（iOS App）

---

二、创建Uniapp项目（我们以HBuilderX 创建项目举例子）

1. 新建项目
   打开HBuilderX → 文件 → 新建 → 项目 → 选择uni-app模板 → 输入项目名称。
   
   

2. 项目结构解析

   ├── pages        // 页面目录
   ├── static       // 静态资源
   ├── App.vue      // 根组件
   ├── main.js      // 入口文件
   ├── manifest.json// 应用配置（如App图标）
   └── pages.json   // 页面路由与样式
   

---

三、运行到不同平台

3.1 微信小程序

1. 配置微信开发者工具路径
   
   配置自己的微信开发者工具路径
   

2. 配置manifest.json
   打开manifest.json → 微信小程序配置 → 输入微信AppID（若无，可跳过但无法真机调试）。
   

3. 运行项目

   • 顶部菜单 → 运行 → 运行到小程序模拟器 → 微信开发者工具
     

   • 首次运行需在微信开发者工具中设置：设置 → 安全 → 开启服务端口
     
     然后就运行成功了
     

常见问题

• 错误提示[error] 项目未配置appid
  在manifest.json中补充微信小程序的AppID，或点击“试用”跳过。

---

3.2 H5网页

1. 浏览器运行
   直接点击HBuilderX工具栏的“运行” → 运行到浏览器 → 选择Chrome。
   
   

2. 自定义配置
   在manifest.json的H5配置中可修改：

   • 路由模式（hash/history）
   • 跨域代理（解决本地开发接口跨域问题）

---

3.3 Android/iOS App

1. 基础配置
   打开manifest.json → App SDK配置 → 选择需要的模块（如地图、支付）。

2. 真机调试

   • 连接手机 → 开启USB调试
   • 点击“运行” → 运行到手机或模拟器
     

3. 云打包
   菜单 → 发行 → 原生App-云打包 → 选择平台并提交。

注意：iOS打包需Apple开发者账号（年费$99），测试阶段可使用免费证书。

---

3.4 其他平台（快应用/支付宝小程序等）

在manifest.json中配置对应平台参数，运行方式与微信小程序类似，需提前安装各平台开发者工具。

---

四、条件编译技巧

通过注释实现多平台差异化代码：
可以参考我之前写的文章了解这部分知识：UniApp如何判断平台的多种方法（2025最新指南）

<!-- #ifdef H5 -->
<div>仅H5平台显示的内容</div>
<!-- #endif --><!-- #ifdef MP-WEIXIN -->
<view>仅微信小程序生效的组件</view>
<!-- #endif -->

---

五、常见问题汇总

问题描述	解决方案
微信开发者工具无法自动打开	检查端口是否开启，或手动导入项目目录
H5页面路由白屏	修改路由模式为history
App启动闪退	检查是否缺少必要模块权限

---

六、总结

Uniapp通过统一的技术栈大幅降低多端开发成本，但需注意：

• 各平台API存在差异，建议使用条件编译
• 复杂功能（如原生插件）需单独适配
• 调试时优先使用真机测试