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

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!