多端App的Uni app开发：构建Uni app项目架构

大家好。我是前线狗绅士，95后的前线战士。我2019年毕业于北京化工大学。我来自天津。你不知道有校友和同乡吗？让我们在这里相聚，为我们对前端的热爱。我希望这篇文章能对你有所帮助，同时，我们希望与志同道合的人结交朋友，共同发展和进步。我的微信dm120225是一本简短的笔记本，期待您的访问。

最近，我们需要根据公司的需求开发一个App，但公司只有一个前端团队。也许我们都同意我们可以处理GUI前端开发。于是，狗先生接手了App的工作，开始了探索App的旅程。

在技术选择过程中，狗先生考察了几种混合App开发方案，如mui、Ionic、React native、cordova、uni app、Flutter等。从团队技术堆栈和启动速度的角度来看，我们最终选择了uni app、vue语法和小程序API来开发App。现在让我们跟随狗先生的脚步，体验跨端App的uni app开发。

如何学习新技术

在我们的前端圈，新技术层出不穷，每天都有新的车轮问世。在开始之前，我们先来谈谈当我们需要使用日常开发工作中没有涉及的技术时，我们应该如何学习

找一段关于uni app开发的视频开始学习，大致了解如何使用它以及过程是什么。

在github上找到一个好的uniApp开发项目，了解他们是如何开发的，并不断咨询、练习、扫盲和踩坑。

开始构建uni app项目架构，尽量不要脱离现有的开发习惯，降低学习成本。学习他人的项目架构，接近社区，并使用现有的解决方案。

施工完成后，将根据要求开发一个App，团队将相互磨合。

项目完成后，整理总结并输出文档，以便于其他同事维护。

什么是uni app

Uni-app是一个用于开发所有前端App的框架。开发者可以编写一组代码，可以发布到iOS、Android、Web（响应式）、各种小程序（微信/支付宝/百度/头条/QQ/拼贴/淘宝）、快速App和其他平台。

构建开发环境

uniApp是DCloud的产品，它为我们提供了HBuilder X集成开发环境，无需配置nodej即可开箱即用。

让我们先下载HBuilder X

HBuilderX：

HBuilderX是一个通用的前端开发工具，但它针对uniApp进行了特别增强。

HBuilder X下载界面

下载App开发版本以供开箱即用；如果您下载了标准版本，在运行或发布uni app时，系统将提示您安装uniApp插件。该插件只能在下载完成后使用。这里我们选择App开发版。

下载后，我们打开HBuilder X，出现以下页面

HBuilder X接口

您会惊讶地发现我们的开发环境已经构建好了。

在这里，我们需要提醒您，在使用狗的过程中，我们发现第一次下载后的HBuilder X无法打开。当然，合作伙伴的情况不同。如果我们遇到一些奇怪的问题，我们重新启动计算机或重新启动HBuilder X，所有问题都会得到解决。

创建uniApp项目

我们单击工具栏中的文件->新建->项目

选择uni-app类型，输入项目名称，选择模板，然后单击“创建”以成功创建它。

uni app的模板包括Hello uni app，这是一个官方组件和API示例。另一个重要的模板是uni ui项目模板，建议用于日常开发，它有大量内置的通用组件。

至此，我们的uni-app项目已经创建完毕。

运行uniApp

我们的uniApp的优势在于一组代码和多终端操作。目前，它已支持Android、IOS、Web、微信小程序、支付宝、百度、字节跳动、QQ、360小程序和快速App。在这里，让我们讨论运行Android、Web和微信小程序的步骤。

1.运行到浏览器

选择我们刚刚创建的项目，然后单击工具栏上的运行->运行到浏览器->选择一个浏览器，在浏览器中体验H5版本的uni app。

2.运行Android手机

选择我们刚刚创建的项目，连接您的手机，启用USB调试，进入hello uniapp项目，然后单击工具栏上的Run->Real machine operation->选择正在运行的设备，在设备中体验uni app。

这里，狗先生总结了问题