logo
0
0
Login

uni-app CLI 项目

这是一个使用 CLI 方式开发的 uni-app 项目,支持 App 和微信小程序平台,完全不需要 HBuilderX

开发命令

微信小程序开发

npm run dev:mp-weixin

运行后,在微信开发者工具中导入项目,选择 dist/dev/mp-weixin 目录。

App 开发(纯 CLI 方式)

方式一:使用 Android Studio(推荐)

npm run dev:app
  1. 运行命令后,会生成开发资源到 dist/dev/app 目录
  2. 打开 Android Studio
  3. 选择 FileOpen → 选择 dist/dev/app 目录
  4. 连接 Android 设备或启动模拟器
  5. 点击运行按钮即可在设备上运行

方式二:真机调试(无需 Android Studio)

npm run dev:app
  1. 运行命令生成开发资源
  2. 使用 USB 连接 Android 设备并开启 USB 调试
  3. 安装 Android SDK Platform Tools(如果还没有)
  4. 使用以下命令安装到真机:
    # 进入生成的目录 cd dist/dev/app # 使用 adb 安装(需要先打包成 APK,或使用 Android Studio)

注意npm run dev:app 命令会显示 "打开 HBuilderX" 的提示,这是 uni-app CLI 的默认提示,可以忽略。实际上你不需要 HBuilderX,直接使用 Android Studio 或真机调试即可。

打包命令

微信小程序打包

npm run build:mp-weixin

打包完成后,在 dist/build/mp-weixin 目录生成小程序代码,可直接上传到微信公众平台。

App 打包

生成资源包

npm run build:app

打包完成后,在 dist/build/app-plus 目录生成 App 资源包(注意:这不是 APK,只是资源包)。

生成 APK 安装包(四种方式)

⚠️ 重要提示npm run build:app 只生成资源包,不会直接生成 APK
详细步骤请查看 BUILD_APK.md

方式一:使用命令行工具自动打包(推荐)

  1. 安装打包工具:

    npm install -g @xzcoder/pack-cli
  2. 配置打包参数:

    # 复制示例配置文件 cp pack-config.json.example pack-config.json # 编辑 pack-config.json,填写你的 Android SDK 路径和签名信息
  3. 执行打包:

    npm run build:app:apk # 或者直接使用 pack-cli --config pack-config.json

    打包完成后,APK 文件会在 dist/release/apk 目录。

方式二:使用 Android Studio 打包

  1. 运行 npm run build:app 生成资源包
  2. 打开 Android Studio
  3. 选择 FileOpen → 选择 dist/build/app-plus 目录
  4. 等待项目同步完成
  5. 点击菜单 BuildBuild Bundle(s) / APK(s)Build APK(s)
  6. 等待构建完成,APK 文件在 app/build/outputs/apk/release/ 目录

方式三:使用 uni-app 云打包服务

  1. 访问 https://dev.dcloud.net.cn/ 注册并登录
  2. 创建应用,上传 dist/build/app-plus 目录
  3. 配置打包参数(应用名称、包名、签名等)
  4. 点击打包,等待完成后下载 APK

方式四:使用 uni-app 官方云打包 API(高级)

如果你有 DCloud 开发者账号,可以使用 API 进行自动化打包,详情参考:https://dev.dcloud.net.cn/docs/api/

项目结构

  • src/ - 源代码目录
  • src/pages/ - 页面文件
  • src/manifest.json - 应用配置
  • src/pages.json - 页面路由配置
  • dist/ - 构建输出目录
    • dist/dev/app - App 开发资源(用于 Android Studio)
    • dist/build/app-plus - App 打包资源(用于最终打包)

技术栈

  • Vue 3
  • TypeScript
  • uni-app
  • Vite

重要说明

⚠️ 关于 HBuilderX 提示:运行 npm run dev:app 时可能会看到 "打开 HBuilderX" 的提示,这是 uni-app CLI 的默认消息,可以完全忽略。你不需要安装或使用 HBuilderX,直接使用 Android Studio 或其他原生开发工具即可。

About

No description, topics, or website provided.
Language
Vue42%
CSS26.9%
JavaScript19.1%
TypeScript11.4%
Others0.6%