如何使用Vue设置、构建和部署原生应用程序
介绍
Vue Native 是一个 Javascript 框架，旨在交付跨平台的移动原生应用程序。 它的灵感来自 React Native 项目。
Vue Native 最初是 React-Vue 的一个分支，该编译器使开发人员能够在同一代码库中编写 Vue 和 React。
在本教程中，您将构建一个应用程序来了解 Vue Native 中可用的 API 和组件。
您构建的应用程序将在 Giphy 平台上显示趋势 gif。 Giphy API 将用于获取每个趋势 gif 的相关 gif 图像、标题和类型。 图像和细节将使用 ScrollView、Text 和 Image 等 Vue Native 组件显示。
注意： 本教程末尾记录的部署过程是特定于 Android 的。 但是，对于那些对 iOS 部署感兴趣的人来说，这个过程可能仍然具有教育意义。
先决条件
要完成本教程，您需要：
- Node.js 安装在本地，您可以按照【X65X】如何安装Node.js 并创建本地开发环境【X134X】来完成。 本教程需要 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，您可以在终端中运行以下命令：
npm install --global expo-cli@3.20.1
注意： 如果您有兴趣稍后部署您的应用程序，则需要一个 Expo 帐户。
第 1 步 — 设置项目
首先，您需要设置一个项目并安装一些依赖项。 Vue Native CLI 将用于引导应用程序。
通过在终端中使用 npx 运行以下命令，为 vue-gifs 初始化一个新项目：
npx vue-native-cli@0.1.1 init vue-gifs
运行此命令将使用 Expo CLI 引导该项目的应用程序。
要为 iOS 和 Android 平台构建，请更新 package.json 文件中的 scripts 对象：
包.json
{
"name": "vue-gifs",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
...
"build:ios": "expo build:ios",
"build:android": "expo build:android",
},
...
}
然后更新 app.json 文件中的 sdkVersion 以匹配 package.json 中的 Expo 版本。 打开 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。 升级SDK请参考Expo文档。
现在您已经设置了项目，您可以开始测试应用程序了。
第 2 步 — 在移动设备上进行测试
为了在移动设备上测试应用程序，Expo CLI 提供了各种测试应用程序的方法。 第一种是使用运行应用程序后生成的 URL。 可以在您的移动浏览器上访问此 URL 以测试应用程序。
确保您在 vue-gifs 项目目录中并运行 npm start 以启动应用程序：
npm start
Expo 通常在 :19002 上启动您的应用程序，因此请访问 http://localhost:19002 以在浏览器中查看 Expo Dev Tools。 在开发工具中，您可以将预览链接以短信或电子邮件的形式发送到您的手机：
您可以选择以下三个连接选项中的任何一个：外部隧道、LAN 或本地连接。 对于本地连接，您的手机和工作 PC 必须连接到同一网络，但隧道在所有情况下都可以使用。
您可以使用的下一个测试方法是下载Expo Mobile App。 它可以在 Apple App Store 和 Android Play Store 上找到。 在 iOS 上，安装应用程序后打开相机并从应用程序的浏览器版本扫描 QR 码以在手机上运行它。 在 Android 上，您可以直接使用 Expo 应用程序扫描二维码并运行应用程序。 然后，您的应用程序将显示在您的移动设备上。
在移动设备上进行测试的另一种选择是使用模拟器或模拟器。 在 macOS 上使用 Android Studio 或 Xcode，您可以为各自的平台启动模拟器或模拟器。 下载并安装适用于所选平台的工具：适用于 iOS 的 Xcode 和适用于 Android 的 Android Studio。 安装后，运行命令启动应用程序：
对于 iOS，运行：
npm run ios
对于 Android，运行：
npm run android
现在您已经探索了测试应用程序的不同选项，您可以构建应用程序了。
第 3 步 — 创建 Giphy 应用程序
下一步是在 Giphy Developer 平台上创建一个应用程序。
在您的开发者帐户仪表板上，有一个 创建应用程序 按钮。 单击该按钮，您将看到 SDK 或 API 之间的选择。 就本教程而言，API 就足够了。
然后，单击下一步，然后单击创建应用程序。 填写有关您的申请的详细信息。
创建应用程序后，您的新应用程序将使用 API 密钥显示在仪表板上。 向 Giphy 发出请求时将使用此密钥。
Giphy 的 Javascript SDK 将用于向 Giphy 服务本身发出请求。 从 vue-gifs 目录运行此命令以安装软件包：
npm install --save giphy-js-sdk-core@1.0.6
现在，您的项目已准备好在此 SDK 的帮助下使用 Giphy API。
第 4 步 - 构建应用程序组件
在此步骤中，您将构建应用程序组件。 打开根文件夹中的 App.vue 文件并像下面的代码片段一样更新它：
应用程序.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 组件采用 source 属性，它是具有 uri 属性的对象。
titleCase 方法获取每个 gif 的标题并返回标题大小写的文本，将文本中每个单词的首字母大写。 GifItem 组件将采用单个道具 gif。
使用以下代码段更新 App.vue 文件以包含新的 GifItem：
应用程序.vue
<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 组件将用于创建一个区域，该区域将用作应用程序的标题。
在 components 目录中创建一个名为 header.vue 的文件，并使用以下代码对其进行更新：
组件/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 组件：
应用程序.vue
<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 为您的应用程序生成一个。
完成后，将为您的应用程序生成一个下载链接，单击此链接将触发您的 APK 下载。
要将下载的 APK 部署到 Android Play 商店，请访问 Play 控制台 创建一个帐户。 在继续之前，您需要支付注册费。 注册完成后，访问此页面并按照步骤将您的应用程序上传到Play商店。
结论
Vue Native 是一个有用的框架，可以使用 Vue.js 为移动平台构建应用程序。 Vue Native 编译成 React 并使用 React Native 提供的组件。 在撰写本文时，它的一些 组件 要求您使用实际的 React Native 组件编写 JSX。 由于 Vue Native 与 React Native 配合使用，您可以关注 React Native 官方文档 了解更多。
