如何使用 Vue 设置、构建和部署本机应用程序

介绍

Vue Native是一个 Javascript 框架，旨在提供跨平台的移动原生应用程序。它的灵感来自React Native项目。

Vue Native 最初是React-Vue 的一个分支，React-Vue是一个编译器，它使开发人员能够在同一代码库中编写 Vue 和 React。

在本教程中，您将构建一个应用程序来了解 Vue Native 中可用的 API 和组件。

您构建的应用程序将在 Giphy 平台上显示趋势 gif。该Giphy API将用于获取关联的gif图片，标题和类型，每个热门GIF。图像和细节将使用Vue的本地组件等显示ScrollView，Text和Image。

注意：本教程末尾记录的部署过程是特定于 Android 的。然而，对于那些对 iOS 部署感兴趣的人来说，这个过程可能仍然具有教育意义。

先决条件

要完成本教程，您需要：

  • Node.js 安装在本地，您可以按照如何安装 Node.js 并创建本地开发环境来完成。本教程需要 Node 6.0.0 或更高版本。
  • 一个 Node 包管理器，比如npm（它与 Node 一起打包）或Yarn。本教程将使用npm. 如果您更喜欢使用yarn，则需要替换这些步骤。
  • 一些 JavaScript 和 Vue 的知识也很有帮助。您可以按照Vue 官方文档来熟悉一些核心 Vue 概念和组件。
  • 要使用 Giphy API，您需要创建或登录Giphy 帐户。

Expo将用于构建和运行新应用程序。Expo 是一个围绕 React Native 构建的开源工具链，用于构建 Android 和 iOS 应用程序。它提供对系统功能的访问，如相机和存储。

如果您尚未expo-cli全局安装，则可以在终端中运行以下命令：

注意：如果您有兴趣稍后部署您的应用程序，则需要一个 Expo 帐户。

步骤 1 — 设置项目

首先，您需要设置一个项目并安装一些依赖项。Vue Native CLI 将用于引导应用程序。

vue-gifs通过在终端中运行以下命令来初始化一个新项目npx：

运行此命令将使用 Expo CLI 为该项目启动一个应用程序。

要为 iOS 和 Android 平台构建，请更新文件中的scripts对象package.json：

包.json
{
  "name": "vue-gifs",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    ...
    "build:ios": "expo build:ios",
    "build:android": "expo build:android",
  },
  ...
}

然后更新sdkVersion中app.json的文件到您的配合世博会的版本package.json。打开app.json文件并像下面的代码片段一样更新它：

应用程序.json
{
  "expo": {
    "name": "vue-gifs",
    "description": "This project is really great.",
    ...
    "sdkVersion": "37.0.3",
    ...
  }
}

注意：在测试本教程时，Vue Native CLI 需要 React Native 版本37.0.1和 Expo 版本37.0.3。稍后，您可能需要手动修改您的app.json和package.json文件并运行npm install. 请参阅 Expo 文档以升级 SDK。

现在您已经设置了项目，您可以开始测试应用程序了。

第 2 步 — 在移动设备上进行测试

为了在移动设备上测试应用程序，Expo CLI 提供了各种方法来测试应用程序。第一种是使用运行应用程序后生成的 URL。可以在您的移动浏览器上访问此 URL 以测试应用程序。

确保您在vue-gifs项目目录中并运行npm start以启动应用程序：

  • npm start

Expo 通常会启动您的应用程序，:19002因此请访问http://localhost:19002以在您的浏览器中查看 Expo Dev Tools。在开发工具中，您可以将预览链接作为短信或电子邮件发送到您的手机：

浏览器预览 Expo Dev Tools 的屏幕截图

您可以选择三个连接选项中的任何一个：外部隧道、LAN 或本地连接。对于本地连接，您的手机和工作 PC 必须连接到同一网络，但隧道在所有情况下都有效。

您可以使用的下一个测试方法是下载Expo Mobile App。它可以在 Apple App Store 和 Android Play Store 上找到。在 iOS 上，安装该应用程序后，打开您的相机并从该应用程序的浏览器版本扫描二维码以在您的手机上运行它。在 Android 上，您可以直接使用 Expo 应用程序扫描二维码并运行该应用程序。然后您的应用程序将显示在您的移动设备上。

在移动设备上进行测试的另一种选择是使用模拟器或模拟器。在 macOS 上使用Android Studio或Xcode，您可以为各自的平台启动模拟器或模拟器。下载并安装适用于所选平台的工具：适用于 iOS 的 Xcode 和适用于 Android 的 Android Studio。安装完成后，运行命令启动应用程序：

对于 iOS，运行：

  • npm run ios

对于安卓，运行：

  • npm run android

现在您已经探索了用于测试应用程序的不同选项，您已准备好构建应用程序。

第 3 步 – 创建 Giphy 应用程序

下一步是在Giphy Developer平台上创建一个应用程序。

在您的开发者帐户仪表板上，有一个创建应用程序按钮。单击该按钮，您将可以在 SDK 或 API 之间进行选择。就本教程而言，API就足够了。

然后，点击Next Step，然后点击Create App。填写有关您的申请的详细信息。

Giphy 开发者帐户仪表板的屏幕截图

创建应用程序后，您的新应用程序将显示在您的仪表板上，并带有一个 API 密钥。向 Giphy 发出请求时将使用此密钥。

Giphy 开发人员仪表板中已注册应用程序的屏幕截图

Giphy 的Javascript SDK将用于向 Giphy 服务本身发出请求。从vue-gifs目录运行此命令以安装软件包：

现在，您的项目已准备好在此 SDK 的帮助下使用 Giphy API。

第 4 步 – 构建应用程序组件

在此步骤中，您将构建应用程序组件。打开App.vue根文件夹中的文件并像下面的代码片段一样更新它：

应用程序
<template>
    <view>
        <scroll-view class="scroll-view">
            <!-- TODO: Create gif item and header -->
            <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
              <activity-indicator size="large" color="#0000ff"></activity-indicator>
            </view>
        </scroll-view>
    </view>
</template>

<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('GIPHY_API_KEY');

  export default {
    name: 'App',
    data() {
      return {
        gifs: [],
        loading: true,
      };
    },
    async created() {
      const response = await client.trending('gifs', {limit: 20});
      this.gifs = response.data;
    },
  };
</script>

<style>
    .scroll-view {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .loading-container {
        height: 600px;
    }
</style>

在上面的代码片段中，App组件渲染了一个scrollview包含组件元素的组件。它只显示一个activityindicator; 当对 API 的调用完成时，这将被 gif 列表替换。

Giphy 客户端使用从开发人员仪表板获取的 API 密钥进行实例化。请务必使用 API 密钥替换占位符字符串。调用该trending方法会调用 Giphy 趋势端点。第一设置参数是gifs：这指示应该返回趋势项，无论是gifs或stickers。第二个参数是提供可选的参数，如一个对象limit，offset，rating，和fmt（格式）。

此代码中使用的唯一参数是limit将结果限制为20项目的参数。这个调用是在created组件的生命周期中进行的。最后，gif列表用于呈现返回的结果。

重新加载后，应用程序应显示活动指示器：

显示加载图标的手机屏幕截图

既然您已经构建了应用程序组件，您就可以构建 gif 项目组件了。

第 5 步 – 构建 Gif 项目组件

每个 gif 项目将使用一个View组件显示。该View组件是框架中的重要构建块。它支持使用 flexbox、样式和可访问性的布局。每个项目将显示 gif、标题和类型。

components在根文件夹中创建一个文件夹。在该components目录中，创建一个名为的文件GifItem.vue并添加以下代码：

组件/GifItem.vue
<template>
  <view class="container">
    <image class="img" :source="{uri: `${gif.images.original.url}`}" style="max-width:100%;"/>
    <text class="title">{{titleCase(gif.title)}}</text>
  </view>
</template>

<script>
export default {
  name: "GifItem",
  props: ["gif"],
  methods: {
    titleCase(text) {
      const textArray = text.split(" ");
      return textArray
        .map(text => {
          const trimmedText = text.trim();
          return `${trimmedText[0].toUpperCase()}${trimmedText.slice(1)}`;
        })
        .join(" ");
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
}
.img {
  height: 200px;
  width: 300px;
}
.title {
  font-size: 14px;
  font-weight: 500;
  margin-top: 7px;
}
</style>

该Image组件将用于显示每个 gif 的来源，该Text组件将用于显示 gif 标题。该Image组件采用一个sourceprop，它是一个具有uri属性的对象。

该titleCase方法获取每个 gif 的标题并返回标题大小写中的文本，将文本中每个单词的第一个字母大写。该GifItem组件将采用单个 prop gif。

使用以下代码段更新App.vue文件以包含新文件GifItem：

应用程序
<template>
    <view>
        <scroll-view class="scroll-view">
            <gif-item v-for="gif in gifs" :gif="gif" :key="gif.id" v-if="!loading"/>
            <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
                <activity-indicator size="large" color="#0000ff"></activity-indicator>
            </view>
        </scroll-view>
    </view>
</template>

<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('GIPHY_API_KEY');

  import GifItem from './components/GifItem';

  export default {
    name: 'App',
    data() {
      return {
        gifs: [],
        loading: true
      };
    },
    async created() {
      const response = await client.trending('gifs', {limit: 20});
      this.gifs = response.data;
      this.loading = false;
    },
    components: {GifItem}
  };
</script>

<style>
    .scroll-view {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .loading-container {
        height: 600px;
    }
</style>

当您在 Expo 应用程序中打开该应用程序时，该应用程序将显示堆叠在列表中的 gif。

如果您的本地应用程序未显示 gif 列表，请确保您的代码与本教程中的代码段匹配，并且您的 Giphy API 密钥有效。

第 6 步 – 构建标题组件

既然应用程序可以检索和显示趋势 gif 列表，让我们包含一个标题来提供应用程序上下文。View 组件将用于创建一个区域，作为应用程序的标题。

创建一个header.vue在components目录中调用的文件并使用以下代码更新它：

组件/header.vue
<template>
    <view class="header-container">
        <text class="header">Trending</text>
    </view>
</template>

<script>
  export default {
    name: 'header.vue'
  };
</script>

<style scoped>
    .header-container {
        background-color: rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: center;
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom-color: aquamarine;
        border-bottom-width: 1px;
        margin-top: 20px;
    }
    .header {
        font-size: 16px;
        color: black;
        opacity: 0.8;
        font-weight: 600;
        text-align: center;
    }
</style>

现在将header组件添加到App组件中。这将在应用程序顶部显示一个标题。更新App.vue文件以包含Header组件：

应用程序
<template>
    <view>
        <header/>
        <scroll-view class="scroll-view">
            ...
        </scroll-view>
    </view>
</template>

<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('GIPHY_API_KEY');

  import GifItem from './components/GifItem';
  import Header from './components/header';

  export default {
    name: 'App',
    data() {
     ...
    },
    async created() {
      ...
    },
    components: {GifItem, Header}
  };
</script>

<style>
  ...
</style>

应用程序刷新后，标题将添加到应用程序的顶部。

Vue Native 提供的组件已经完成了渲染、排序和显示趋势 gif 列表所需的所有工作。

第 7 步 – 在 Android 上部署应用程序（可选）

注意：这是完成本教程不需要的可选步骤。对于从项目创建到应用商店提交的工作流程的教育目的，应该考虑这一点。

本教程的最后一步是将应用程序部署到 Android Play 商店。

首先，您需要更新app.json以包含Android特定的属性。打开app.json文件并更新文件以包含该android字段：

应用程序.json
{
  "expo": {
    ...
    "android": {
      "package": "com.vue.gifs"
    }
  }
}

该android.package字段是一个唯一值，将代表您在应用商店中的包。您可以在此处阅读有关包命名约定的更多信息。

更新文件后，在终端窗口中从vue-gifs目录运行此命令：

  • npm run build:android

此命令将向您显示一个提示，要求您提供一个密钥库或生成一个新的密钥库。如果您有现有的密钥库，您可以选择此选项或让 Expo 为您的应用程序生成一个。

显示 yarn build:android 命令和输出的终端屏幕截图

完成后，将为您的应用程序生成一个下载链接，点击此链接将触发您的 APK 下载。

显示 expo.io 下载 URL 的屏幕截图

要将下载的 APK 部署到 Android Play 商店，请访问Play 管理中心创建一个帐户。在继续之前，您需要支付注册费。注册完成后，请访问此页面并按照步骤将您的应用程序上传到 Play 商店。

结论

Vue Native 是使用 Vue.js 为移动平台构建应用程序的有用框架。Vue Native 编译为 React 并使用 React Native 提供的组件。在撰写本文时，它的一些组件要求您使用实际的 React Native 组件编写 JSX。由于 Vue Native 与 React Native 配合使用，您可以按照官方 React Native 文档了解更多相关信息。

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁