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

介绍

Vue Native是一个旨在提供跨平台移动原生应用程序的JavaScript框架,它是由React Native(https://reactnative.dev/)项目启发的。

Vue Native 最初是来自 React-Vue的叉子,这是一种编译器,使开发人员能够在同一个代码库中编写 Vue 和 React。

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

您构建的应用程序将在Giphy平台上显示趋势GIF。 Giphy API将用于获取每个趋势GIF的相关GIF图像、标题和类型。

<$>[注] **注:**本教程末尾记录的部署过程是针对Android的。

前提条件

要完成本教程,您将需要:

Node.js 本地安装,您可以按照如何安装 Node.js 并创建本地开发环境完成。本教程需要 Node 6.0.0 或更高版本。
像 npm这样的 Node 包管理器(附带 Node)或 Yarn。本教程将使用 npm. 如果您喜欢使用 yarn,则需要取代这些步骤。
JavaScript 和 Vue 的一些知识也很有用。您可以遵循官方 Vue 文档以熟悉一些 fo 核心 Vue 概念和组件。
要使用 Giphy API,您需要创建或登录

Expo将用于构建和运行新应用程序。Expo是围绕React Native构建的开源工具链,用于构建Android和iOS应用程序。

如果您尚未在全球范围内安装expo-cli,则可以在终端中运行以下操作:

1npm install --global [email protected]

<$>[注] **注:**如果您有兴趣在以后部署您的应用程序,则需要 Expo 帐户。

步骤1 - 设置项目

首先,您需要设置一个项目并安装一些依赖性. Vue Native CLI 将用于启动应用程序。

通过在您的终端中运行npx来初始化vue-gif的新项目:

1npx [email protected] init vue-gifs

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

要为 iOS 和 Android 平台构建,请在 package.json 文件中更新脚本对象:

 1[label package.json]
 2{
 3  "name": "vue-gifs",
 4  "main": "node_modules/expo/AppEntry.js",
 5  "private": true,
 6  "scripts": {
 7    ...
 8    "build:ios": "expo build:ios",
 9    "build:android": "expo build:android",
10  },
11  ...
12}

然后在app.json文件中更新sdkVersion,以匹配package.json中的Expo版本。

 1[label app.json]
 2{
 3  "expo": {
 4    "name": "vue-gifs",
 5    "description": "This project is really great.",
 6    ...
 7    "sdkVersion": "37.0.3",
 8    ...
 9  }
10}

<$>[注] 注: 在测试本教程时,Vue Native CLI 需要 React Native 版本 37.0.1 和 Expo 版本 37.0.3. 稍后,您可能需要手动修改您的 app.json 和 package.json 文件并运行 npm install。

现在你已经设置了项目,你已经准备好开始测试应用程序。

第2步:在手机上测试

要在移动设备上测试应用程序,Expo CLI提供各种方法来测试应用程序. 第一种方法是使用在运行应用程序后生成的URL。

确保您位于vue-gif项目目录中,然后运行npm start来启动应用程序:

1npm start

EXPO 通常在 19002 上启动您的应用程序,所以请访问 http://localhost:19002 以便在您的浏览器中查看 EXPO Dev Tools. 在 Dev Tools 中,您可以将预览链接发送给您的手机以短信或电子邮件形式:

Screenshot of a browser previewing the Expo Dev Tools

您可以选择三个连接选项之一:外部隧道、LAN 或本地连接. 对于本地连接,您的手机和工作 PC 必须连接到相同的网络,但隧道在所有情况下都将工作。

您可以使用的下一个测试方法是下载 Expo Mobile App。它可以在Apple App Store和Android Play Store上找到。在iOS上,安装应用后,打开相机并从应用程序的浏览器版本扫描QR代码以在手机上运行。在Android上,您可以直接使用Expo应用程序扫描QR代码并运行应用程序。

在移动设备上测试的另一个选项是使用模拟器或模拟器。在 macOS 上使用 Android Studio或 Xcode时,您可以为各自的平台启动模拟器或模拟器。

对我来说,跑:

1npm run ios

对于 Android 来说,运行:

1npm run android

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

步骤 3 – 创建 Giphy 应用程序

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

在您的开发者帐户仪表板上,有一个 ** 创建应用程序 ** 按钮. 点击该按钮,您将得到 SDK 或 API 之间的选择。

然后单击 ** 下一步**,然后单击 ** 创建应用程序**. 填写有关您的应用程序的详细信息。

Screenshot of Giphy developer account dashboard

创建应用后,你的新应用程序将以API密钥显示在你的仪表板上,该密钥将用于向Giphy提出请求。

Screenshot of registered applications in Giphy developer dashboard

Giphy 的 Javascript SDK将用于向 Giphy 服务本身提出请求。

1npm install --save [email protected]

现在,您的项目已经准备好使用Giphy API,借助这个SDK。

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

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

 1[label App.vue]
 2<template>
 3    <view>
 4        <scroll-view class="scroll-view">
 5            <!-- TODO: Create gif item and header -->
 6            <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
 7              <activity-indicator size="large" color="#0000ff"></activity-indicator>
 8            </view>
 9        </scroll-view>
10    </view>
11</template>
12
13<script>
14  import Giphy from 'giphy-js-sdk-core';
15  const client = Giphy('GIPHY_API_KEY');
16
17  export default {
18    name: 'App',
19    data() {
20      return {
21        gifs: [],
22        loading: true,
23      };
24    },
25    async created() {
26      const response = await client.trending('gifs', {limit: 20});
27      this.gifs = response.data;
28    },
29  };
30</script>
31
32<style>
33    .scroll-view {
34        padding-top: 20px;
35        padding-bottom: 30px;
36    }
37    .loading-container {
38        height: 600px;
39    }
40</style>

在上面的片段中,应用程序组件将显示一个包含该组件元素的 scrollview组件;它只显示一个 activityindikator;当 API 调用完成时,该组件将被 GIF 列表取代。

Giphy 客户端是使用开发者仪表板中获得的 API 密钥进行实例化的。请确保用 API 密钥代替位置持有符串。调用趋势方法会调用 Giphy 趋势终端。第一个提供的参数是gif:这表明应该返回哪个趋势项目,无论是gif还是粘贴。第二个参数是提供可选参数的对象,如限制,取消,评级和fmt(格式)。

此代码中唯一使用的参数是限制参数,该参数将结果限制为20项,此调用是在组件的创建生命周期内进行的。

重新加载后,应用程序应显示活动指标:

Screenshot of a mobile phone showing a loading icon

现在您已经构建了应用程序组件,您已经准备好构建 GIF 项目组件。

步骤 5 – 构建 GIF 项目组件

每个 GIF 元素将使用一个查看组件显示。 ‘View’元素是框架中的重要组件。它支持使用 flexbox 的布局,风格和可访问性。

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

 1[label components/GifItem.vue]
 2<template>
 3  <view class="container">
 4    <image class="img" :source="{uri: `${gif.images.original.url}`}" style="max-width:100%;"/>
 5    <text class="title">{{titleCase(gif.title)}}</text>
 6  </view>
 7</template>
 8
 9<script>
10export default {
11  name: "GifItem",
12  props: ["gif"],
13  methods: {
14    titleCase(text) {
15      const textArray = text.split(" ");
16      return textArray
17        .map(text => {
18          const trimmedText = text.trim();
19          return `${trimmedText[0].toUpperCase()}${trimmedText.slice(1)}`;
20        })
21        .join(" ");
22    }
23  }
24};
25</script>
26
27<style>
28.container {
29  display: flex;
30  flex-direction: column;
31  align-items: center;
32  margin-bottom: 30px;
33  position: relative;
34}
35.img {
36  height: 200px;
37  width: 300px;
38}
39.title {
40  font-size: 14px;
41  font-weight: 500;
42  margin-top: 7px;
43}
44</style>

将使用 Image组件来显示每个GIF的来源,并使用 Text组件来显示GIF标题。

titleCase 方法将每个 gif 的标题取回,并返回标题盒中的文本,将文本中的每个单词的第一个字母加以资本化。

更新App.vue文件以使用下面的片段包含新的GifItem:

 1[label App.vue]
 2<template>
 3    <view>
 4        <scroll-view class="scroll-view">
 5            <gif-item v-for="gif in gifs" :gif="gif" :key="gif.id" v-if="!loading"/>
 6            <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
 7                <activity-indicator size="large" color="#0000ff"></activity-indicator>
 8            </view>
 9        </scroll-view>
10    </view>
11</template>
12
13<script>
14  import Giphy from 'giphy-js-sdk-core';
15  const client = Giphy('GIPHY_API_KEY');
16
17  import GifItem from './components/GifItem';
18
19  export default {
20    name: 'App',
21    data() {
22      return {
23        gifs: [],
24        loading: true
25      };
26    },
27    async created() {
28      const response = await client.trending('gifs', {limit: 20});
29      this.gifs = response.data;
30      this.loading = false;
31    },
32    components: {GifItem}
33  };
34</script>
35
36<style>
37    .scroll-view {
38        padding-top: 20px;
39        padding-bottom: 30px;
40    }
41    .loading-container {
42        height: 600px;
43    }
44</style>

当您在Expo应用程序中打开应用程序时,该应用程序将显示堆积在列表中的GIF。

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

步骤 6 – 构建头部组件

现在应用程序可以检索并显示趋势GIF列表,让我们包括一个标题来提供应用程序的背景。

在组件目录中创建一个名为header.vue的文件,并使用下面的代码更新它:

 1[label components/header.vue]
 2<template>
 3    <view class="header-container">
 4        <text class="header">Trending</text>
 5    </view>
 6</template>
 7
 8<script>
 9  export default {
10    name: 'header.vue'
11  };
12</script>
13
14<style scoped>
15    .header-container {
16        background-color: rgba(0, 0, 0, 0.05);
17        display: flex;
18        justify-content: center;
19        padding-top: 15px;
20        padding-bottom: 15px;
21        border-bottom-color: aquamarine;
22        border-bottom-width: 1px;
23        margin-top: 20px;
24    }
25    .header {
26        font-size: 16px;
27        color: black;
28        opacity: 0.8;
29        font-weight: 600;
30        text-align: center;
31    }
32</style>

现在将头部组件添加到应用程序组件中,该组件将显示应用程序顶部的头部。

 1[label App.vue]
 2<template>
 3    <view>
 4        <header/>
 5        <scroll-view class="scroll-view">
 6            ...
 7        </scroll-view>
 8    </view>
 9</template>
10
11<script>
12  import Giphy from 'giphy-js-sdk-core';
13  const client = Giphy('GIPHY_API_KEY');
14
15  import GifItem from './components/GifItem';
16  import Header from './components/header';
17
18  export default {
19    name: 'App',
20    data() {
21     ...
22    },
23    async created() {
24      ...
25    },
26    components: {GifItem, Header}
27  };
28</script>
29
30<style>
31  ...
32</style>

应用程序更新后,标题将被添加到应用程序的顶部。

由Vue Native提供的组件已经完成了 render,排序和显示趋势GIF列表所需的所有工作。

步骤 7 — 在 Android 上部署应用程序(可选)

<$>[注] 注: 这是不需要完成教程的可选步骤,应该考虑从项目创建到应用商店提交工作流的教育目的。

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

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

1[label app.json]
2{
3  "expo": {
4    ...
5    "android": {
6      "package": "com.vue.gifs"
7    }
8  }
9}

android.package字段是一个独特的值,它将代表您的包在应用商店中。

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

1npm run build:android

此命令将提示您提供一个提示,要求您提供一个 keystore或生成一个新的命令. 如果您有现有键盘,您可以选择此选项或让Expo为您的应用程序生成一个。

Screenshot of a terminal showing yarn build:android command and output

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

Screenshot showing expo.io download URL

要将下载的 APK 部署到 Android Play 商店,请访问 Play Console 创建帐户. 您需要在进行注册前付费。

结论

Vue Native 是一个有用的框架,用于使用 Vue.js 构建移动平台的应用程序。Vue Native 编译到 React,并使用 React Native 提供的组件。在编写时,其中一些组件(https://vue-native.io/docs/basic-components.html#FlatList)需要您使用实际的 React Native 组件来编写 JSX。