Erklären Sie die Einführung, Bereitstellung und Verzeichnisstruktur von Uni-App

Uni-App-Entwicklungs-TutorialSpalte erklärt die Grundstruktur von Uni-App

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

Artikelverzeichnis

• Vorwort
• 1. Einführung in die Uni-App
• 1. Erstellen Sie die Umgebung und führen Sie sie aus
• • 3
  • 1. Verzeichnisstruktur App-Projekt. Detaillierte Beschreibung der Verzeichnisstruktur und Codespezifikationen des Projekts, geeignet für Anfänger ohne Grundkenntnisse in Uni-App.
• 1. Einführung in die Uni-App
• Uni-App ist ein wichtiges Produkt, das von
  • DCloud offiziell eingeführt wurde. Es handelt sich um ein Front-End-Framework, das Vue.js zur Entwicklung plattformübergreifender Anwendungen verwendet http://uniapp.dcloud.io /.
  Durch das Schreiben einer Reihe von Vue.js-Code können Entwickler Uni-App verwenden, um ihn für iOS, Android, WeChat-Applets usw. zu kompilieren.
  • Mehrere Plattformen
  Um sicherzustellen, dass es ordnungsgemäß ausgeführt wird und ein hervorragendes Erlebnis erzielt, ist nur JS erforderlich Schließen Sie die APP-Entwicklung ab und erzielen Sie den Effekt der „Multi-Terminal-Freigabe“, wodurch die Entwicklungs- und Lernkosten erheblich gesenkt werden:
  Entwickler müssen nicht so viele Plattformentwicklungstechnologien erlernen und viele Front-End-Frameworks studieren -App basierend auf Vue;
Auch Unternehmen können mehr Benutzer zu geringeren Kosten abdecken.
• uni-app erbt Vue.js und bietet als effizientes Entwicklungstool auch den schnellsten Einstieg in Miniprogramme in aktuellen Anwendungen wie WeChat Im Einklang mit WeChat-Miniprogrammen ist die Vorgehensweise grundsätzlich dieselbe.
Entwickler mit etwas Erfahrung in der Entwicklung von Vue.js- und WeChat-Miniprogrammen können schnell mit der Uni-App beginnen und Anwendungen entwickeln, die mit mehreren Terminals kompatibel sind, z. B. mit Android-, iOS- und Miniprogrammen Es bietet auch eine bedingte Kompilierungsoptimierung, die elegant personalisierten Code für eine bestimmte Plattform schreiben und proprietäre Funktionen aufrufen kann, ohne andere Plattformen zu beeinträchtigen.

Wenn die Uni-App in die App gepackt wird, verwendet sie weiterhin die 5+-Engine. Alle Funktionen von 5+ können in der Uni-App genutzt werden. Die Laufleistung auf der App-Seite ist im Wesentlichen die gleiche wie beim WeChat-Applet.

Um Entwicklern das Erleben der Komponenten, Schnittstellen und Vorlagen von Uni-App zu erleichtern, hat DCloud das Demonstrationsprogramm Hello Uni-App veröffentlicht, das eine Reihe von Codes implementiert, die für iOS-, Android- und WeChat-Miniprogramme veröffentlicht werden sollen Gleichzeitig können Sie mit Ihrem Mobiltelefon das Bild unten scannen. Laden Sie das native Installationspaket für iOS und Android mit dem App-Code herunter, oder Sie können WeChat verwenden, um den Mini-Programmcode zu scannen, um die Mini-Programmversion von uni-app zu erleben

2. Starten Sie schnell Ihr erstes Projekt

1. Erstellen Sie die Umgebung

Bevor Sie mit dem Projekt beginnen, müssen Sie die folgenden Tools herunterladen und installieren:
HBuilderX Integrierter Uni-App-Compiler und Projektvorlage können Sie auf https://www.dcloud.io/hbuilderx.html klicken, um die neueste Version der entsprechenden Systemversion auszuwählen und herunterzuladen. Es ist keine Installation erforderlich, sondern dekomprimieren Sie sie einfach direkt und legen Sie das dekomprimierte Verzeichnis im angegebenen Verzeichnis ab Pfad und klicken Sie auf HBuilderX.exe, um ihn zu verwenden. WeChat Developer Tools werden zum Kompilieren und Debuggen kleiner Programme verwendet. Sie können auf https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html klicken und die neueste Version zum Herunterladen und Installieren auswählen .



2. Erstellen Sie das Projekt und führen Sie es aus.


Um ein Projekt zu erstellen, können Sie auf die Datei in der Symbolleiste klicken – Neu->Projekt und uni-app auswählen und geben Sie den Projektnamen ein, z. B. <code>hello uniapp. Klicken Sie auf Erstellen, um uni-app erfolgreich zu erstellen, oder klicken Sie auf Aus Vorlage erstellen. Wählen Sie hello-uniapp aus, um das offizielle Beispiel zu sehen.

Das Diagramm sieht wie folgt aus:

Nach der Erstellung kann das Debuggen des Betriebs durchgeführt werden, und Sie können den Betriebsmodus auswählen, z. B. Browser, Mobiltelefon oder Simulator und Applet-Simulator.

(1) Im Miniprogrammmodus ausführen

Geben Sie das Hello-Uniapp-Projekt ein, klicken Sie in der Symbolleiste auf Ausführen –>Zum Miniprogrammsimulator ausführen –>WeChat Developer Tools, um das Projekt zu kompilieren und auszuführen. Versuchen Sie es uni-app in den WeChat-Entwicklertools kompiliert das Projekt standardmäßig im Verzeichnis unpackage.

Das Diagramm sieht wie folgt aus:

• Sie können sehen, dass nach der Auswahl der WeChat Developer Tools in HBuilderX zum Kompilieren und Ausführen die Anzeige und der Betrieb des WeChat Developer Tools-Simulators automatisch aufgerufen werden.
  
Anleitung:
• Bei der ersten Verwendung müssen Sie den Installationspfad des WeChat-Entwicklertools konfigurieren, bevor es erfolgreich ausgeführt werden kann. Gleichzeitig müssen Sie den Service-Port in den Sicherheitseinstellungen der Einstellungsoption öffnen WeChat-Entwicklertool, damit HBuilderX WeChat-Entwicklungstools wie folgt aufrufen kann:
  

Wenn HBuilderX das WeChat-Entwicklertool nicht normal starten kann, muss der Entwickler es manuell starten, dann den Pfad des Uni-App-Projekts in das WeChat-Entwicklertool kopieren, es in HBuilderX entwickeln und Sie können die Echtzeit im sehen kleiner Simulationseffekt des WeChat-Entwicklertools.

(2) Echte Maschine läuft
Schließen Sie das Telefon an und schalten Sie das USB-Debugging ein, rufen Sie das Hallo-Uniapp-Projekt auf, klicken Sie auf Ausführen in der Symbolleiste-> und Sie können Uni-App auf diesem Gerät erleben, wie unten gezeigt: <code>运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app，示意如下：

手机端界面如下：

说明：
真机运行需要设置应用表示，登录hbuilderX后点击云端获取即可。

调试运行时也可直接点击快捷运行按钮，选择设备运行，如下：

三、uni-app目录结构和代码规范

1.目录结构

从刚刚创建的项目可以看到，一个uni-app项目的典型结构大致如下：

C:.
│  App.vue
│  main.js
│  manifest.json
│  pages.json
│  project.config.json
│  uni.scss
│
├─pages
│  └─index
│          index.vue
│
├─static
│      logo.png
│
└─unpackage

其中：
project.config.json是项目的全局配置文件，配置APP ID等核心参数；
main.js是Vue初始化入口文件；
App.vue是应用配置，用来配置App全局样式以及监听应用生命周期；
manifest.json用于配置应用名称、appid、logo、版本等打包信息，如下：

pages.json用于配置页面路由、导航条、选项卡等页面类信息，以对象形式定义；
static目录保存静态资源文件，满足小程序等对项目大小的要求，同时优化项目结构；
unpackage是编译项目时生成的包。

2.SFC规范

我们开发的页面视图等文件一般位于pages目录下，同时对于小程序来说，一个页面一般包括4个文件，分别是page.wxss（样式文件）、page.js、page.json（配置文件）和page.wxml（DOM组件）文件，但是在uni-app中没有这么繁多的文件，为了实现微信小程序、原生App的跨端兼容，综合考虑编译速度、运行性能等因素，uni-app对页面开发规范进行了约定，即Vue单文件组件（SFC）规范：
.vue文件是一个自定义的文件类型，用类HTML语法描述一个Vue组件，每个.vue文件包含三种类型的顶级语言块<template>（定义模板层）、<script>（JS层）和<style>

Die mobile Schnittstelle ist wie folgt:

Hinweis:
Sie müssen die Anwendungsdarstellung so einrichten, dass sie auf einer realen Maschine ausgeführt werden kann. Melden Sie sich bei hbuilderX an und klicken Sie auf die Cloud, um sie zu erhalten.

Sie können während des Debuggens auch direkt auf die Schaltfläche „Schnell ausführen“ klicken und das auszuführende Gerät wie folgt auswählen:

🎜🎜🎜3. Uni-App-Verzeichnisstruktur und Codespezifikationen🎜🎜🎜🎜1. Verzeichnisstruktur🎜🎜🎜Wie Sie dem gerade erstellten Projekt entnehmen können, ein typisches uni-app project Die Struktur ist ungefähr wie folgt: 🎜

<template>
  <p class="example">{{ msg }}</p></template><script>export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }}</script><style>.example {
  color: red;}</style><custom1>
  This could be e.g. documentation for the component.</custom1>

🎜 Darunter: 🎜 project.config.json ist die globale Konfigurationsdatei des Projekts, die Kernparameter wie die APP-ID konfiguriert; 🎜 main.js ist die Vue-Initialisierungseintragsdatei 🎜 App.vue ist die Anwendungskonfiguration, die zum Konfigurieren des globalen App-Stils und zum Überwachen des Anwendungslebenszyklus verwendet wird. 🎜 manifest.json wird zum Konfigurieren des Anwendungsnamens, der App-ID, des Logos, der Version und anderer Verpackungsinformationen wie folgt verwendet: 🎜🎜🎜pages.json wird zum Konfigurieren von Seitenklasseninformationen verwendet B. Seitenrouting, Navigationsleisten, Registerkarten usw., und ist in Objektform definiert. 🎜 static Das Verzeichnis speichert statische Ressourcendateien, um den Projektgrößenanforderungen kleiner Programme und anderer Projekte gerecht zu werden und gleichzeitig die Projektstruktur zu optimieren das Paket, das beim Kompilieren des Projekts generiert wurde. 🎜🎜🎜2.SFC-Spezifikation🎜🎜🎜Die von uns entwickelten Seitenaufrufe und anderen Dateien befinden sich im Allgemeinen im Seitenverzeichnis. Gleichzeitig enthält eine Seite bei kleinen Programmen im Allgemeinen 4 Dateien, nämlich page.wxss (Stildatei). , page.js, page.json (Konfigurationsdatei) und page.wxml (DOM-Komponente), aber es gibt nicht so viele Dateien in der Uni-App, um eine Cross-End-Kompatibilität von WeChat-Miniprogrammen und nativen Apps zu erreichen. Kompilierungsgeschwindigkeit, Betriebsleistung und andere Faktoren, Uni-App hat sich auf die Seitenentwicklungsspezifikation geeinigt, nämlich die 🎜Vue Single File Component (SFC)-Spezifikation🎜: 🎜.vue-Datei ist ein benutzerdefinierter Dateityp, unter Verwendung einer HTML-ähnlichen Syntax. Jede .vue-Datei beschreibt eine Vue-Komponente und enthält drei Arten von Sprachblöcken der obersten Ebene: <template> (definiert die Vorlagenebene), <script> (JS-Ebene) und <style> (Stilebene) ermöglichen auch das Hinzufügen optionaler benutzerdefinierter Blöcke. Beispiele sind wie folgt: 🎜

<style>
  /* write Sass! */</style>

🎜vue-loader analysiert automatisch Öffnen Sie die Datei und extrahieren Sie sie. Jeder Sprachblock wird bei Bedarf über andere Loader verarbeitet und schließlich zu einem 🎜ES-Modul🎜 zusammengesetzt, dessen Standardexport ein Objekt der Vue.js-Komponentenoptionen ist. vue-loader unterstützt die Verwendung von Nicht-Standardsprachen wie CSS-Präprozessoren, vorkompilierten HTML-Vorlagensprachen und durch Festlegen des lang-Attributs des Sprachblocks. 🎜 Beispielsweise können wir Stile mit der Sass-Syntax wie folgt schreiben: 🎜

<template src="./template.html"></template><style src="./style.css"></style><script src="./script.js"></script>

🎜Der Sprachblock der obersten Ebene der Vue-Komponente lautet wie folgt: 🎜

• 模板
  每个.vue文件最多包含一个<template>块，内容被提取，并传递给vue-template-compiler为字符串预处理为JavaScript 染函数，并最终注入到从<script>导出的组件中。
• 脚本
  每个.vue文件最多包含一个<script>块，这个脚本会作为一个ES Module来执行。它的默认导出是一个Vue.js的组件选项对象，也可以导出由Vue.extend()创建的扩展对象，但是普通对象是更好的选择。
  任何匹配.js文件（或通过它的lang特性指定的扩展名）的webpack规则都会运用到这个<script>块的内容中。
• 样式
  默认匹配/\.css$/，一个.vue文件可以包含多个<style>标签。<style>标签可以有scoped或者module属性，以便更好地将样式封装到当前组件，具有不同封装模式的多个<style>标签可以在同一个组件中混合使用。任何匹配.css文件（或通过它的lang特性指定的扩展名）的webpack规则都将会运用到这个<style>块的内容中。
• 自定义块
  可以在.vue文件中添加额外的自定义块来实现项目的特定需求，例如<docs>块。vue-loader将会使用标签名来查找对应的webpack loader来应用在对应的块上。webpack loader需要在vue-loader的选项loaders中指定。

如果需要把.vue文件分隔到多个文件中，可以通过src属性导入外部文件，不同的语言块使用对应的标签即可，如下：

<template src="./template.html"></template><style src="./style.css"></style><script src="./script.js"></script>

说明：
src导入遵循和webpack模块请求相同的路径解析规则，所以相对路径需要以./开始。
可以从NPM依赖中导入资源，如下：

<style src="todomvc-app-css/index.css">

在自定义块上同样支持src导入，如下：

<unit-test src="./unit-test.js"></unit-test>

文档规范接近Vue单文件组件（SFC）规范，同一个界面由3个语言块完成，具体可参考https://vue-loader.vuejs.org/zh/spec.html；
组件标签靠近微信小程序规范，包括表单、视图、按钮等，同时不能使用标准HTML标签，也不能用js对dom进行操作，具体可参考文档http://uniapp.dcloud.io/component/README；
接口能力（JS API）靠近微信小程序规范，但需将前缀wx替换为uni，具体可参考http://uniapp.dcloud.io/api/README；
数据绑定及事件处理靠近Vue.js规范，同时补充了App及页面的生命周期；
因为小程序推荐使用flex布局，同时flex相对于传统的盒模型更加灵活、可控性更好，为了兼容多端运行，建议使用flex布局进行开发，可参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/和http://www.hcoder.net/tutorials/info_183.html。

总结

uni-app作为一个使用Vue.js开发所有前端应用的框架，为开发者提供了极大的方便，降低了学习和开发成本，在当前平台多样性越来越丰富、开发需求越来越复杂的情况下，越来越受到开发者的青睐。

Das obige ist der detaillierte Inhalt vonErklären Sie die Einführung, Bereitstellung und Verzeichnisstruktur von Uni-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!