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

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


一、环境准备

在开始前,请确保已安装以下工具🔧:

代码编辑器

项目环境

  • Node.js(需≥14版本)

其他平台模拟器

  • 各平台开发工具:
    • 微信开发者工具(小程序)
    • Android Studio(Android App)
    • Xcode(iOS App)

二、创建Uniapp项目(我们以HBuilderX 创建项目举例子)

  1. 新建项目

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

  2. 项目结构解析

    markdown 复制代码
    ├── 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最新指南)

html 复制代码
<!-- #ifdef H5 -->
<div>仅H5平台显示的内容</div>
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<view>仅微信小程序生效的组件</view>
<!-- #endif -->

五、常见问题汇总

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

六、总结

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

  • 各平台API存在差异,建议使用条件编译
  • 复杂功能(如原生插件)需单独适配
  • 调试时优先使用真机测试
相关推荐
程知农7 小时前
uniapp_微信小程序_根据胶囊按钮计算出的导航栏高度为什么不是44px?
微信小程序·小程序·uni-app
2501_9159090610 小时前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
The_era_achievs_hero10 小时前
UniappDay04
vue.js·微信小程序·uni-app
2501_9151063212 小时前
iOS WebView 调试实战,第三方脚本加载失败与内容安全策略冲突问题排查指南
android·ios·小程序·https·uni-app·iphone·webview
paopaokaka_luck17 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
前端程序猿-秦祥17 小时前
uniapp拦截返回事件
uni-app
雪芽蓝域zzs21 小时前
uniapp input 如何只读禁用输入可点击
uni-app
xw51 天前
uni-app项目跑APP报useStore报错
前端·uni-app
!win !1 天前
uni-app项目跑APP报useStore报错
前端·uni-app
iOS阿玮1 天前
为什么独立开发者都在AppStore而不去安卓市场?
uni-app·app·apple