Detaillierte Erläuterung des Front-End-Frameworks für die niedrigschwellige Entwicklung von iOS-, Android- und Miniprogrammanwendungen

Detaillierte Erläuterung des Front-End-Frameworks für die niedrigschwellige Entwicklung von iOS-, Android- und Miniprogrammanwendungen

Heutzutage ist plattformübergreifende Entwicklungstechnologie kein neues Thema mehr. Es gibt auch einige Open-Source-Frameworks auf dem Markt, aus denen man wählen kann. Es gibt jedoch nicht viele Plattformen mit ausgereifter Technologie und soliden Produktdiensten. Es gibt auch einige innovative Frameworks, die der Aufmerksamkeit wert sind.

Beispielsweise ist das AVM, das ich kürzlich verwendet habe, ein Multi-Terminal-Entwicklungsframework, das iterativ von APICloud gestartet wurde. Es basiert auf JavaScript und ist mit mehreren Syntaxen kompatibel. Wenn Sie Vue oder React verwenden, können Sie ohne großen Lernaufwand direkt loslegen. Es verfügt über einen virtuellen DOM und kann Multi-Terminal-Renderings gleichzeitig schreiben. APICloud ist vor allem seit 7 Jahren online und relativ ausgereift, daher habe ich einige meiner eigenen Kenntnisse und Praktiken in Kombination mit den Inhalten der offiziellen AVM-Dokumentation organisiert, in der Hoffnung, Entwicklern zu helfen, die plattformübergreifende Entwicklungstechnologie verwenden müssen.

Warum das AVM-Framework lernen?

Durch die Kombination der Einführung auf der offiziellen AVM-Website und meiner eigenen praktischen Erfahrung habe ich eine Reihe von AVM-Funktionen zusammengefasst. Ich denke, diese Inhalte reichen aus, damit Sie die Initiative ergreifen und das AVM-Framework erlernen können.

1. Ein Satz Codes kann in Installationspakete oder Codepakete kompiliert werden, die Android, iOS, WeChat-Applet, iOS Light-App und H5 entsprechen.

2. Kompatibel mit dem APICloud2.0-Technologie-Stack, was bedeutet, dass Tausende native Android- und iOS-Module auf der Plattform verfügbar sind. Oder führen Sie die 3.0-Technologie teilweise in das alte Projekt ein und optimieren Sie die APP lokal.

3. Natives Engine-Rendering. Wenn Sie avm.js für die Entwicklung verwenden, wird die App mit der nativen Engine 3.0 ohne WebView gerendert und alle Komponenten und Ansichten werden zu 100 % auf die nativen Komponenten und Ansichten der Android- und iOS-Systeme abgestimmt.

4. Vue-ähnliche Syntax und kompatibel mit React JSX. Benutzer mit Vue- oder React-Grundkenntnissen können schnell loslegen.

5. Komponentenbasierte Entwicklung verbessert die Code-Wiederverwendung.

Seiteneinführung bei AVM:

Die Seite in AVM heißt stml-Seite. Ein typischer stml-Dateicode sieht wie folgt aus:

<Vorlage>  
    <Ansicht>  
        <Klasse anzeigen="Header">  
            <text>{Titel}</text>  
        </Ansicht>  
        <Klasse anzeigen="Inhalt">  
            <text>{Inhalt}</text>  
        </Ansicht>  
        <Klasse anzeigen="Fußzeile">  
            <text>{Fußzeile}</text>  
        </Ansicht>  
    </Ansicht>  
</Vorlage>  
<Stil>  
    .header {  
      Höhe: 45px;  
    }  
   .Inhalt {  
      Flex-Richtung: Zeile;  
    }  
    .Fußzeile {  
      Höhe: 55px;  
    }  
</Stil>  
<Skript>  
    Standard exportieren {  
       Name: "API-Test",  
         
       apiready() {  
           console.log("Hallo APICloud");  
       },  
 
        Daten(){  
           zurückkehren {  
               Titel: 'Hallo App',  
                Inhalt: „Dies ist Inhalt“,  
                Fußzeile: „Dies ist die Fußzeile“  
           }  
       }  
    }  
</Skript>

Datenbindung

Aus dem obigen Codeausschnitt können wir erkennen, dass die Datenbindungsmethode {variable} ist, die doppelte und einfache Klammern zum Umschließen von Variablen oder Ausdrücken unterstützt und zum Binden von Textinhalten oder Elementattributen verwendet werden kann.

Ereignisbindung

Es gibt zwei Möglichkeiten, auf Ereignisse zu warten.

Einsatz im Monitoring:

<text onclick="doThis">Klick mich!</text>

Verwenden Sie zum Zuhören die Direktive v-on und die Abkürzung:

<text v-on:click="doThis">Klick mich!</text>
<text @click="doThis">Klick mich!</text>

Methoden zur Ereignisbehandlung

Die Ereignisverarbeitungsmethode muss in Methoden definiert werden. Die Methode enthält standardmäßig einen Parameter, über den Details, aktuelles Zielobjekt usw. abgerufen werden können.

<Vorlage>  
    <text data-name="avm" onclick="doThis">Klick mich!</text>  
</Vorlage>  
<Skript>  
   Standard exportieren {  
        Name: "Test",  
        Methoden: {  
           mach das(e){  
               api.alarm({  
                   msg:e.aktuellerZieldatensatzname  
                });  
            }  
        }  
    }  
</Skript>

Auch Ereignisbehandlungsmethoden können Vorlagen verwenden, wie zum Beispiel:

<text onclick={this.doThis}>Klick mich!</text>

Hier sind einige Beispiele für Standardkomponenten. Weitere Komponenten finden Sie in der offiziellen Dokumentation.

Ansicht ist eine allgemeine Containerkomponente, in der beliebige Komponenten platziert werden können. Das Standardlayout ist das Flex-Layout.

Achten Sie darauf, dass Sie keinen Text direkt in der Ansicht hinzufügen. Verwenden Sie zum Hinzufügen von Text die Textkomponente.

Die Textkomponente dient der Anzeige von Textinformationen.

<Vorlage>  
    <scroll-view Klasse="main" scroll-y>  
       <text class="text">Normaler Text</text>  
      <text class="text bold">Fetter Text</text>  
        <text class="text italic">Kursiver Text</text>  
        <text class="text shadow">Text-Schatten-Effekt</text>  
   </scroll-ansicht>  
</Vorlage>  
<Stil>  
    .hauptsächlich {  
       Breite: 100 %;  
       Höhe: 100%;  
   }  
   .text {  
       Höhe: 30px;  
       Schriftgröße: 18px;  
    }  
    .deutlich {  
        Schriftstärke: fett;  
    }  
   .kursiv {  
        Schriftstil: kursiv;  
    }  
   .Schatten {  
        Textschatten: 2px 2px #f00;  
   }  
</Stil>  
<Skript>  
   Standard exportieren {  
       Name: "Test"  
    }  
</Skript>

Die Bildkomponente dient der Anzeige von Bildern.

Die Schaltflächenkomponente definiert eine Schaltfläche.

Die Eingabekomponente definiert ein Eingabefeld.

swiper definiert eine gleitende Ansicht, die das Gleiten nach oben und unten oder nach links und rechts unterstützt. Es können nur Swiper-Item-Komponenten darin platziert werden.

scroll-view definiert eine Bildlaufansicht.

Wenn Sie vertikal scrollen müssen, müssen Sie die Höhe angeben. Wenn Sie horizontal scrollen müssen, müssen Sie die Breite angeben, da es sonst möglicherweise nicht angezeigt wird.

ist-view definiert eine vertikale Scroll-Ansicht von wiederverwendbarem Inhalt, die die Speichernutzung und Rendering-Leistung optimieren kann und Pulldown zum Aktualisieren und Pullup zum Laden unterstützt. Sie können die grundlegenden Eigenschaften der Scroll-Ansicht verwenden.

Komponenten wie Zellen, Listenkopfzeilen, Listenfußzeilen, Aktualisierungen usw. können in der Listenansicht platziert werden, und die Zellenkomponente wird als Anzeigeinhalt jedes Elements verwendet.

Die Rahmenkomponente wird zum Anzeigen eines Rahmens verwendet und hat die gleiche Wirkung wie die Methode „openFrame“.

Die Frame-Group-Komponente dient der Anzeige einer Frame-Gruppe, jeder Frame darin ist eine unabhängige Seite.

Komponentenbasierte Entwicklung

Definieren Sie eine Komponente:

Verwenden Sie stml, um eine Komponente api-test.stml zu definieren:

<Vorlage>    
    <Ansichtsklasse='Header'>  
       <text>{dieser.Datentitel}</text>  
    </Ansicht>    
</Vorlage>    
<Skript>  
    Standard exportieren {    
        Name: "API-Test",  
        Daten(){  
            zurückkehren {  
                Titel: „Hallo APP“  
            }  
        }  
    }  
</Skript>  
<Stilbereich>  
   .header{  
       Höhe: 45px;  
    }  
</Stil> 

Referenzkomponente:

Auf anderen Seiten oder in anderen Komponenten referenziert.

// app-index.stml:  
  
<Vorlage>    
    <Klasse anzeigen="App">    
       <img src="./assets/logo.png" />    
       <API-Test></API-Test>   
   </Ansicht>    
</Vorlage>  
<Skript>  
    importiere './components/api-test.stml'    
      
   Standard exportieren {    
        Name: "App-Index",    
        Daten: Funktion () {    
           zurückkehren {  
                Titel: „Hallo APP“  
           }  
        }    
    }    
</Skript>    
<Stil>    
   .app {     
       Textausrichtung: zentriert;    
        Rand oben: 60px;    
    }    
</Stil> 


Verwenden Sie JS, um eine Komponente/Seite zu definieren, siehe offizielle Dokumentation.

Komponentenlebenszyklus

Die avm.js-Komponentenspezifikation entspricht der Web Components-Spezifikation und ihr Lebenszyklus folgt dem Lebenszyklus von Standard-Web Components-Komponenten. Es ist auch mit dem Lebenszyklus von Vue-Komponenten kompatibel.

Alle unterstützten Lebenszyklusereignisse

Name der Lebenszyklusfunktion

Trigger-Zeitpunkt
Abonnieren
Die Laufzeitumgebung der Seite ist bereit und gerendert. Wenn die Komponente nicht in die Seite importiert wird, entspricht dieses Ereignis dem Installieren.
installieren
Bevor die Komponente in das echte DOM (oder die native Schnittstelle der App) eingebunden wird
installiert
Nachdem die Komponente im echten DOM (oder der nativen App-Schnittstelle) bereitgestellt wurde. Auf Seitenebene entspricht dieses Ereignis „apiready“.
Machen
Die Komponente beginnt mit dem Rendern
Deinstallieren
Bevor die Komponente aus dem realen DOM (oder der nativen App-Schnittstelle) entfernt wird
vorUpdate
Vor dem Komponentenupdate
aktualisiert
Komponentenupdate abgeschlossen
vorRender
Bevor die Komponente mit dem Rendern beginnt
„Jede Seite sollte apiready implementieren und die Geschäftslogik nach apiready verarbeiten. Die Installation gehört zum Lebenszyklus auf Komponentenebene und wird ausgelöst, wenn die Seite die Komponente lädt, was vor apiready liegt.“

Weitere Einzelheiten zum Lebenszyklus finden Sie in der offiziellen Dokumentation

Im Allgemeinen ist das APICloud-Entwicklungsframework näher an der nativen Programmiererfahrung. Es trennt die Benutzeroberfläche, die Geschäftslogik und das Datenmodell der Anwendung durch einen einfachen Modus, der für stark angepasste Projekte geeignet ist. Darüber hinaus bietet die APICloud-Website viele Module, Beispiele und Tool-Quellcode-Downloads. Interessierte Front-End-Freunde können hier klicken, um es auszuprobieren.

Damit ist dieser Artikel über das niedrigschwellige Frontend-Framework für die Entwicklung von iOS-, Android- und Miniprogrammanwendungen abgeschlossen. Weitere relevante Inhalte zur niedrigschwelligen Frontend-Framework-Entwicklung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung der Entwurfsmuster des JavaScript-Frameworks
  • Tutorial zu den Grundlagen von JavaScript und JQuery Framework
  • JS-Entwicklungsframework im Hongmeng-System
  • Zeilenweise Analyse des JavaScript-Frameworks des Hongmeng-Systems (empfohlen)

<<:  Nginx-Server fügt benutzerdefinierte Systemd-Dienstprozessanalyse hinzu

>>:  Über die Position des H1-Tags in XHTML

Artikel empfehlen

Linux CentOS6.5 yum installiere mysql5.6

In diesem Artikel wird der einfache Prozess der I...

Best Practices für MySQL-Upgrades

MySQL 5.7 fügt viele neue Funktionen hinzu, wie z...

Tutorial zur Installation von MySQL8 auf Centos7

Neue Funktionen in MySQL 8: Meine persönliche Mei...

HTML-Auswahloption So treffen Sie die Standardauswahl

Wenn Sie einer Option das Attribut selected = &quo...

Probleme und Lösungen bei der Verwendung der jsx-Syntax in React-vscode

Problembeschreibung Nach der Installation des Plu...

Grundlegende Hinweise zu HTML und CSS (unbedingt für das Frontend lesen)

Als ich zum ersten Mal mit HTML in Berührung kam,...

Kann CSS auf diese Weise verwendet werden? Die Kunst wunderlicher Farbverläufe

Im vorherigen Artikel – Der Charme einer Zeile CS...

Eine Fallstudie zur MySQL-Optimierung

1. Hintergrund Auf jeder OLTP-Datenbankinstanz vo...

So verwenden Sie das Videowiedergabe-Plugin DPlayer.js

Das Videoplayer-Plugin DPlayer.js ist einfach zu ...

Beispieloperation für die Summe des Mysql-Varchar-Typs

Einige Freunde haben beim Erlernen von Datenbanke...

Notieren Sie eine Falle bei der Aktualisierung der MySQL-Update-Anweisung

Hintergrund Kürzlich habe ich während eines Onlin...

Implementierung des gemeinsamen Grid-Layouts

Keine Lücken auf beiden Seiten, Lücken zwischen j...

Detailliertes Tutorial zur Installation von MySQL 8.0.12 unter Windows

In diesem Artikel finden Sie eine ausführliche An...