Uniapp项目运行到微信小程序H5APP等多个平台教程
Uniapp项目运行到微信小程序、H5、APP等多个平台教程
摘要 ：Uniapp作为一款基于Vue.js的跨平台开发框架，支持“一次开发，多端部署”。本文将手把手教你如何将Uniapp项目运行到微信小程序、H5、APP等多个平台，并解析常见问题。
一、环境准备
在开始前，请确保已安装以下工具🔧：
代码编辑器
HBuilderX （官方IDE，推荐使用）
创建项目教程：
下载地址：
Vscode （博主推荐使用🌹🌹）
但是需要自己通过vue-cli创建项目，并配置运营打包命令，我们可以直接下载官方的模版使用，具体的cli创建项目教程可以按照官方的步骤来：
下载地址：
项目环境
- 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
中配置对应平台参数，运行方式与微信小程序类似，需提前安装各平台开发者工具。
四、条件编译技巧
通过注释实现 多平台差异化代码 ：
可以参考我之前写的文章了解这部分知识：
<!-- #ifdef H5 -->
<div>仅H5平台显示的内容</div>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>仅微信小程序生效的组件</view>
<!-- #endif -->五、常见问题汇总
| 问题描述 | 解决方案 |
|---|---|
| 微信开发者工具无法自动打开 | 检查端口是否开启，或手动导入项目目录 |
| H5页面路由白屏 | 修改路由模式为 history |
| App启动闪退 | 检查是否缺少必要模块权限 |
六、总结
Uniapp通过统一的技术栈大幅降低多端开发成本，但需注意：
- 各平台API存在差异，建议使用条件编译
- 复杂功能（如原生插件）需单独适配
- 调试时优先使用真机测试