Uni-app跨平台开发：项目创建与多端发布全攻略

本文详细介绍了Uni-app项目的两种创建方式：使用HBuilderX可视化工具和Vue CLI命令行。内容涵盖多端运行配置、核心配置文件修改以及发布流程，帮助开发者快速掌握跨平台开发的核心技能。

项目创建方式

HBuilderX可视化工具创建

步骤如下：

1. 下载并安装 HBuilderX（推荐使用App开发版），可从官方网站获取。
2. 创建项目：在HBuilderX中，选择“文件” → “新建” → “项目”，然后选择“uni-app”类型。
3. 选择模板：
   • Hello uni-app：官方示例模板，适合初学者。
   • uni-ui项目模板：推荐用于日常开发，内置常用组件。

Vue CLI命令行创建

首先，安装环境：

npm install -g @vue/cli@4

然后，创建项目：

vue create -p dcloudio/uni-preset-vue my-project

选择默认模板后，进入项目目录并运行H5开发环境：

cd my-project
npm run serve

完成后，访问 http://localhost:8080 查看效果。

多端运行配置

平台参数说明

Uni-app支持多平台运行，常用平台参数如下：

• app-plus：App平台打包资源
• h5：H5网页
• mp-weixin：微信小程序
• mp-alipay：支付宝小程序
• quickapp-webview：快应用(webview)

运行命令

开发环境：

使用命令 npm run dev:%PLATFORM%，将 %PLATFORM% 替换为目标平台参数。例如，运行微信小程序开发环境：

npm run dev:mp-weixin

生产环境：

生产环境命令类似，通常为 npm run build:%PLATFORM%，具体请参考项目配置。

核心配置文件

Uni-app的核心配置文件是 pages.json，用于配置路由和导航栏。示例配置如下：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {"navigationBarTitleText": "首页"}
    }
  ],
  "tabBar": {
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "/static/tabs/home.png"
      }
    ]
  }
}

发布流程

H5发布

1. 在 manifest.json 中配置基础路径。
2. 在HBuilderX中点击“发行” → “网站-H5手机版”进行发布。

小程序发布

1. 生成代码后，在对应的开发者工具（如微信开发者工具）中上传代码。
2. 提交到相应平台（微信、百度、支付宝等）进行审核。

App发布

支持两种方式：

• 云端打包：无需本地环境，直接在HBuilderX中操作。
• 离线打包：需要配置Android或iOS开发环境。