uniapp运行项目到 Android Studio

原创

mob649e81543e41 2023-09-07 19:57:14 ©著作权

文章标签 Android 提示框代码示例 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者mob649e81543e41的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 Uniapp 运行项目到 Android Studio

Uniapp 是一个使用 Vue.js 开发跨平台应用的框架，可以将同一份代码运行在不同的平台上，包括 Android、iOS、H5 等。本文将介绍如何将 Uniapp 项目运行到 Android Studio，并提供相应的代码示例。

环境准备

在开始之前，确保你已经安装了以下工具：

Node.js：用于运行 npm 命令。
Android Studio：用于运行 Android 模拟器或真机。

创建 Uniapp 项目

首先，我们需要创建一个 Uniapp 项目。打开终端，执行以下命令：

npm install -g @vue/cli
vue create my-uniapp-project
cd my-uniapp-project
vue add uni-app

以上命令将全局安装 Vue CLI，并创建一个名为 "my-uniapp-project" 的 Uniapp 项目。

运行到 Android Studio

在项目根目录下执行以下命令，将项目编译为 Android 平台的源码：

npm run build:app-plus

打开 Android Studio，选择 "Open an existing Android Studio project"，然后选择刚刚生成的 "my-uniapp-project" 目录。
在 Android Studio 的项目结构树中，找到 "app/src/main/assets/apps" 目录，右键点击该目录，选择 "Show in Explorer"，然后将 Explorer 中的 "dist" 目录复制到 "apps" 目录中。
切换回 Android Studio，点击 "Sync Project with Gradle Files"，等待同步完成。
在 Android Studio 的工具栏中选择 "app"，然后点击 "Run" 按钮，选择模拟器或真机进行运行。

代码示例

以下是一个简单的 Uniapp 页面，用于展示一个按钮，点击按钮后显示一个提示框：

<template>
  <view>
    <button @click="showDialog">点击我</button>
  </view>
</template>

<script>
export default {
  methods: {
    showDialog() {
      uni.showModal({
        title: '提示',
        content: 'Hello, Uniapp!',
        showCancel: false
      })
    }
  }
}
</script>

以上示例代码定义了一个按钮，并通过 @click 绑定了一个点击事件，点击按钮时调用 showDialog 方法，显示一个提示框。

运行效果

以下是一个使用 Uniapp 运行到 Android Studio 后的效果图：

sequenceDiagram
  participant A as User
  participant B as Button
  participant C as Android Studio

  A ->> B: 点击按钮
  B ->> C: 调用 showDialog 方法
  C ->> C: 显示提示框
  C ->> A: 显示 "Hello, Uniapp!" 提示框