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

news2025/3/9 17:17:54

摘要：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 创建项目举例子）

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

项目结构解析

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

三、运行到不同平台

3.1 微信小程序

配置微信开发者工具路径

配置自己的微信开发者工具路径
配置manifest.json
打开manifest.json → 微信小程序配置 → 输入微信AppID（若无，可跳过但无法真机调试）。
运行项目
- 顶部菜单 → 运行 → 运行到小程序模拟器 → 微信开发者工具
- 首次运行需在微信开发者工具中设置：设置 → 安全 → 开启服务端口
  
  然后就运行成功了

常见问题

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

3.2 H5网页

浏览器运行
直接点击HBuilderX工具栏的“运行” → 运行到浏览器 → 选择Chrome。
自定义配置
在manifest.json的H5配置中可修改：
- 路由模式（hash/history）
- 跨域代理（解决本地开发接口跨域问题）

3.3 Android/iOS App

基础配置
打开manifest.json → App SDK配置 → 选择需要的模块（如地图、支付）。
真机调试
- 连接手机 → 开启USB调试
- 点击“运行” → 运行到手机或模拟器
云打包
菜单 → 发行 → 原生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启动闪退	检查是否缺少必要模块权限