Inhaltsverzeichnis
Einführung in die API-Syntax
1. Box-Modell Flex
1. Flex-Wrap:
2. justify-content: Die Position, an der alle untergeordneten Ansichten in der übergeordneten Ansicht angezeigt werden
3. align-content
4. align-items
5. Beispiel
2. js-bezogene API
1. Variablen
2. Basisdatentyp Boolean
3. Funktion
4. Objektvariable
5、export使用
6、disableScroll使用
7、页面page数据的获取与设置
8、获取所有的页面
9、showToast时长设置失效问题
10、reLaunch跳转失效问题
Heim WeChat-Applet Mini-Programmentwicklung Einführung in die häufig in kleinen Programmen verwendete Syntax

Einführung in die häufig in kleinen Programmen verwendete Syntax

Sep 18, 2018 pm 04:30 PM
小程序

Dieser Artikel bietet Ihnen eine Einführung in die Grammatik, die häufig in kleinen Programmen verwendet wird. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Als nächstes werde ich aus der Perspektive eines Anfängers beginnen. Natürlich werden die folgenden Artikel die Wissenspunkte kleiner Programme nicht im Detail vorstellen, sondern hauptsächlich einige Ideen von Android vergleichen . , um einige persönliche Gedanken auszudrücken.

Einführung in die API-Syntax

1. Box-Modell Flex

1. Flex-Wrap:

nowrap (Standard): kein Zeilenumbruch .
Wrap: Wrap, mit der ersten Zeile oben.
Wrap-Reverse: Umbruch der ersten Zeile unten.

2. justify-content: Die Position, an der alle untergeordneten Ansichten in der übergeordneten Ansicht angezeigt werden

Flex-Start (Standardwert): linksbündig
Flex-Ende: rechtsbündig
center: zentriert
*space-between: Richten Sie beide Enden aus und die Abstände zwischen den Elementen sind gleich. Daher kann dies als Festlegen des Gewichtslayouts betrachtet werden, wobei jede Unteransicht einen Anteil einnimmt. Wenn nur eine Unteransicht vorhanden ist, entspricht dies Flex-Start
*space-around: gleichmäßig in der Reihe verteilt, wobei auf beiden Seiten die Hälfte des Lückenraums verbleibt. Der Abstand zwischen den Elementen ist doppelt so groß wie der Abstand zwischen den Elementen und dem Rand. Wenn es nur eine untergeordnete Ansicht gibt (die auf die übergeordnete Ansicht einwirkt), wird die untergeordnete Ansicht tatsächlich zentriert und ausgerichtet.

Abstand zwischen Attributgrafikanzeige:

Einführung in die häufig in kleinen Programmen verwendete Syntax

3. align-content

Der Inhalt wird zentriert. Gilt nur für mehrzeilige Flex-Container, eine einzelne Zeile funktioniert nicht
Flex-Start: am Startpunkt der Querachse ausgerichtet.
Flex-Ende: am Endpunkt der Querachse ausgerichtet.
Mitte: Ausgerichtet am Mittelpunkt der Querachse.
Abstand dazwischen: An beiden Enden der Querachse ausrichten und die Abstände zwischen den Achsen gleichmäßig verteilen.
Leerzeichen: Die Abstände auf beiden Seiten jeder Achse sind gleich. Daher ist der Abstand zwischen den Achsen doppelt so groß wie der Abstand zwischen den Achsen und dem Rahmen.
Strecken (Standardwert): Die Achse nimmt die gesamte Querachse ein.

4. align-items

Richten Sie jede Ansicht an der Ausrichtung der übergeordneten Ansicht aus. Gilt für alle Flex-Container.
Flex-Start: Richten Sie den Startpunkt der Querachse aus.
Flex-Ende: Richten Sie den Endpunkt der Querachse aus.
Mitte: Richten Sie den Mittelpunkt der Querachse aus.
Grundlinie: Die Grundlinienausrichtung der ersten Textzeile des Elements.
Strecken (Standardwert): Wenn das Element keine Höhe festlegt oder auf „Auto“ eingestellt ist, nimmt es die gesamte Höhe des Containers ein.

5. Beispiel

1) Lassen Sie die untergeordnete Ansicht des Containers in der Mitte anzeigen
Fügen Sie im Container hinzu (übergeordnete Ansicht):

 display: flex;
 align-items: center;
Nach dem Login kopieren

2) Lassen Sie ein Ansichtslayout auf der unteren oder oberen Ebene anzeigen, ähnlich dem FramLayout-Layout
Z-Index-Attribut verwenden:

{        
 position:absolute;              
 left:0px;              
 top:0px;              
  z-index:-1;            
 }
Nach dem Login kopieren

Hinweis:
1) Z-Index kann kann nur in absoluten Funktionen verwendet werden
2) z-index:-1, die geänderte Ansicht wird auf der untersten Ebene angezeigt (kann als Hintergrund verwendet werden) z-index:1, wird auf der äußersten Ebene angezeigt

2. js-bezogene API

1. Variablen

Wir wissen, dass wir in Java ein Objekt deklarieren, das in der gesamten Klasse verwendet werden muss Eine Mitgliedsvariable in der Klasse. Gültige Deklarationen innerhalb konkreter Methoden sind lokale Variablen. Dann lautet das entsprechende Applet:
var: Mitgliedsvariable in Java
let: lokale Variable in Java

2. Basisdatentyp Boolean

    var test0 = ""            //false
    var test1 = "aaaaaaaa"   // true
    var test2 = null          // false
    var test3 = 11           // true
    var test4 = 0            // false
    var test5 = {}           // true
Nach dem Login kopieren

Zusammenfassung: Dies ist dasselbe wie Java Der Unterschied ist immer noch sehr groß
1) Für numerische Typen (int, float) gilt, solange die Zahl nicht 0 ist
2) Für String (String) nur null und „“ Leere Zeichenfolgen sind wahr und falsch, alles andere ist falsch
3) Für Objekte, außer dass das Objekt null ist, ist es falsch und alles andere ist wahr. Auch wenn dieses Objekt ein leeres Objekt ist {}

3. Funktion

(1) Funktionsdefinition
​ Definition auf der Seite:

  onShow: function (params) {
    //方法体
  },
Nach dem Login kopieren

Nicht-Seitendefinition:

function test(params){
    //方法体}
Nach dem Login kopieren

Zusammenfassung:
​ ​ ​ 1. Die erste Definition muss am Ende ein ","-Komma hinzufügen, während die zweite Methode kein
hinzufügen kann ​ ​ ​ 2. Im Gegensatz zu Java müssen die Parameter params einer Funktion keinen Typ angeben, sodass theoretisch jeder Typ beim Aufruf der Methode übergeben werden kann. Aber das wird in der Regel nicht gemacht. Persönlich denke ich, dass Java strenger und lesbarer ist.
3. Es gibt keine Begrenzung für die Anzahl der Parameterparameter

(2) Callback-Funktion
1) Funktionsdefinition

  function request(onFail){
  //调用接口
      wx.request({
        success: function (res) { //接口返回数据
         onFail(res)
      })
    }
Nach dem Login kopieren

2) Funktionsaufruf

             wx.cyou.cache.getCacheValue("key_test", function(result){
                console.log("result==", result)
            })
Nach dem Login kopieren

(3) Hinweise

1) Miniprogramme unterstützen keine Funktionsüberladung und Funktionsumschreibung
2) Wenn eine Funktion eine Funktion aufruft, unterstützt die Funktionsmethode keine direkte Übertragung. Schauen Sie sich das folgende Beispiel an:

   function request1(function1) {
          request2(function1)
        }
       问题: 这在request1方法调用request2的时候,参数也是一个函数function1,直接将function1传递给request2是不可以的

       解决方式:        
       function request1(function1) {
          request2(new function{
              function1()

          }})
        }

        在request2方法的回调函数中去调用function1方法
Nach dem Login kopieren

4. Objektvariable

class Person{
  String name;  int age;
}
Nach dem Login kopieren

Wenn Sie in Java durchlaufen möchten, um den Attributwert Name, das Alter und den Attributtyp „Person“ zu erhalten, String, int. Alles wird durch Reflexion erreicht. Daher ist es in kleinen Programmen viel einfacher und grober als Java. Spezifische Implementierung

for (var propertyName in Person){           
var name = propertyName               //对象Person的属性(String、int)
var value = testInfo[propertyName]    // 对象Person的属性值(name、age)
        }
Nach dem Login kopieren

5、export使用

在调用一个类中的方法或者属性值时,必须要在被调用的方法和属性值,定义的时候用export声明

6、disableScroll使用

问题描述:
有时候,小程序跑在苹果手机上时,会左右滑动退出,也会上下滑动,这样体验不好。这个时候要禁止滑动。

 在app.json中,将disableScroll值设置为true 就可以了:  
 "window": {          
 "disableScroll": true
      }
Nach dem Login kopieren

7、页面page数据的获取与设置

  let pages = getCurrentPages()          
  let curPage = pages[pages.length - 1]         //获取当前页面
          if (curPage.route == url){        //比较获取的页面的url是否跟实际的一致(如url:"pages/order/order")
            curPage.setData({                                //设置数据
              usingOrderList: usingOrderList
            })
          }
Nach dem Login kopieren

8、获取所有的页面

          let pages = getCurrentPages()            // 获取上一个页面
          let prePage = pages[pages.length - 2]          //给页面设置数据
          prePage.setData({
            refreshUserInfo:true
          })          //返回到上一个页面
          wx.navigateBack({
            delta: 1
          })
Nach dem Login kopieren

注意事项:
调用getCurrentPages()不需要在page环境中(可以视为Android中的Context环境),可以在任何地方直接获取,即util等自定义类中同样生效。类似的还有wx.开头的方法

9、showToast时长设置失效问题

  let title = new String(msg)  //延时弹toast,是为了解决有时候在接口请求后,设置的duration时间不起作用
  setTimeout(function () {
    wx.showToast({
      title: title,
      duration: 1200,
      icon: "none"
    })
  }, 100)
Nach dem Login kopieren

10、reLaunch跳转失效问题

     //延时跳转,是为了解决有时候wx.reLaunch不起作用,设置的时间不起作用
    setTimeout(function(){
      wx.reLaunch({
        url: '/pages/home/home'
      })
    },100)
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinführung in die häufig in kleinen Programmen verwendete Syntax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Entwickeln Sie ein WeChat-Applet mit Python Entwickeln Sie ein WeChat-Applet mit Python Jun 17, 2023 pm 06:34 PM

Mit der Popularität mobiler Internettechnologie und Smartphones ist WeChat zu einer unverzichtbaren Anwendung im Leben der Menschen geworden. Mit WeChat-Miniprogrammen können Benutzer Miniprogramme direkt verwenden, um einige einfache Anforderungen zu erfüllen, ohne Anwendungen herunterladen und installieren zu müssen. In diesem Artikel wird erläutert, wie Sie mit Python ein WeChat-Applet entwickeln. 1. Vorbereitung Bevor Sie Python zum Entwickeln des WeChat-Applets verwenden, müssen Sie die entsprechende Python-Bibliothek installieren. Hier empfiehlt es sich, die beiden Bibliotheken wxpy und itchat zu verwenden. wxpy ist eine WeChat-Maschine

Können kleine Programme reagieren? Können kleine Programme reagieren? Dec 29, 2022 am 11:06 AM

Miniprogramme können React verwenden. 1. Implementieren Sie einen Renderer basierend auf „React-Reconciler“ und generieren Sie eine Miniprogrammkomponente zum Parsen und Rendern von DSL. 3. Installieren Sie npm und führen Sie den Entwickler-Build aus npm im Tool; 4. Führen Sie das Paket auf Ihrer eigenen Seite ein und verwenden Sie dann die API, um die Entwicklung abzuschließen.

Implementieren Sie Kartenumdreheffekte in WeChat-Miniprogrammen Implementieren Sie Kartenumdreheffekte in WeChat-Miniprogrammen Nov 21, 2023 am 10:55 AM

Implementieren von Kartenumdreheffekten in WeChat-Miniprogrammen In WeChat-Miniprogrammen ist die Implementierung von Kartenumdreheffekten ein häufiger Animationseffekt, der die Benutzererfahrung und die Attraktivität von Schnittstelleninteraktionen verbessern kann. Im Folgenden wird detailliert beschrieben, wie der Kartenumdrehungseffekt im WeChat-Applet implementiert wird, und relevante Codebeispiele bereitgestellt. Zunächst müssen Sie in der Seitenlayoutdatei des Miniprogramms zwei Kartenelemente definieren, eines für die Anzeige des vorderen Inhalts und eines für die Anzeige des hinteren Inhalts. Der spezifische Beispielcode lautet wie folgt: <!--index.wxml-. ->&l

Alipay hat das Miniprogramm „Chinese Character Picking-Rare Characters' gestartet, um die Bibliothek seltener Charaktere zu sammeln und zu ergänzen Alipay hat das Miniprogramm „Chinese Character Picking-Rare Characters' gestartet, um die Bibliothek seltener Charaktere zu sammeln und zu ergänzen Oct 31, 2023 pm 09:25 PM

Laut Nachrichten dieser Website vom 31. Oktober und 27. Mai dieses Jahres kündigte die Ant Group den Start des „Chinese Character Picking Project“ an und leitete kürzlich neue Fortschritte ein: Alipay startete das Miniprogramm „Chinese Character Picking – Uncommon Characters“. um Sammlungen der Gesellschaft zu sammeln. Seltene Charaktere ergänzen die Bibliothek seltener Charaktere und bieten unterschiedliche Eingabeerlebnisse für seltene Charaktere, um die Eingabemethode für seltene Charaktere in Alipay zu verbessern. Derzeit können Benutzer das Applet „Ungewöhnliche Zeichen“ aufrufen, indem sie nach Schlüsselwörtern wie „Aufnehmen chinesischer Zeichen“ und „Seltene Zeichen“ suchen. Im Miniprogramm können Benutzer Bilder von seltenen Zeichen einreichen, die vom System nicht erkannt und eingegeben wurden. Nach der Bestätigung nehmen Alipay-Ingenieure zusätzliche Einträge in die Schriftartenbibliothek vor. Auf dieser Website wurde festgestellt, dass Benutzer im Miniprogramm auch die neueste Eingabemethode zur Wortteilung nutzen können. Diese Eingabemethode ist für seltene Wörter mit unklarer Aussprache konzipiert. Demontage durch den Benutzer

Wie uniapp eine schnelle Konvertierung zwischen Miniprogrammen und H5 erreicht Wie uniapp eine schnelle Konvertierung zwischen Miniprogrammen und H5 erreicht Oct 20, 2023 pm 02:12 PM

Wie Uniapp eine schnelle Konvertierung zwischen Miniprogrammen und H5 erreichen kann, erfordert spezifische Codebeispiele. Mit der Entwicklung des mobilen Internets und der Popularität von Smartphones sind Miniprogramme und H5 zu unverzichtbaren Anwendungsformen geworden. Als plattformübergreifendes Entwicklungsframework kann Uniapp die Konvertierung zwischen kleinen Programmen und H5 basierend auf einer Reihe von Codes schnell realisieren und so die Entwicklungseffizienz erheblich verbessern. In diesem Artikel wird vorgestellt, wie Uniapp eine schnelle Konvertierung zwischen Miniprogrammen und H5 erreichen kann, und es werden konkrete Codebeispiele gegeben. 1. Einführung in uniapp unia

Tutorial zum Schreiben eines einfachen Chat-Programms in Python Tutorial zum Schreiben eines einfachen Chat-Programms in Python May 08, 2023 pm 06:37 PM

Implementierungsidee x01 Servereinrichtung Zunächst wird auf der Serverseite ein Socket zum Empfangen von Nachrichten verwendet. Jedes Mal, wenn eine Socket-Anfrage angenommen wird, wird ein neuer Thread geöffnet, um die Verteilung und Annahme von Nachrichten zu verwalten Um alle Threads zu verwalten und damit die Verarbeitung verschiedener Funktionen des Chatrooms zu realisieren, ist die Einrichtung des x02-Clients viel einfacher als die des Servers. Die Funktion des Clients besteht lediglich darin, Nachrichten zu senden und zu empfangen und bestimmte Zeichen einzugeben Um die Verwendung unterschiedlicher Funktionen zu erreichen, müssen Sie daher auf der Clientseite nur zwei Threads verwenden, einen für den Empfang von Nachrichten und einen für das Senden von Nachrichten liegt daran, nur

So bedienen Sie die Miniprogramm-Registrierung So bedienen Sie die Miniprogramm-Registrierung Sep 13, 2023 pm 04:36 PM

Schritte zur Miniprogramm-Registrierung: 1. Erstellen Sie Kopien von Personalausweisen, Unternehmenslizenzen, juristischen Personenausweisen und anderen Archivierungsmaterialien. 2. Melden Sie sich beim Miniprogramm-Verwaltungshintergrund an. Wählen Sie „Grundeinstellungen“; 5. Geben Sie die Anmeldeinformationen ein; 6. Laden Sie die Anmeldematerialien hoch; 7. Senden Sie den Anmeldeantrag; 8. Warten Sie auf die Überprüfungsergebnisse. Wenn die Einreichung nicht bestanden wird, nehmen Sie basierend auf den Gründen Änderungen vor und den Einreichungsantrag erneut einreichen. 9. Die Folgemaßnahmen für die Einreichung sind Can.

So erhalten Sie eine Mitgliedschaft im WeChat-Miniprogramm So erhalten Sie eine Mitgliedschaft im WeChat-Miniprogramm May 07, 2024 am 10:24 AM

1. Öffnen Sie das WeChat-Miniprogramm und rufen Sie die entsprechende Miniprogrammseite auf. 2. Den mitgliederbezogenen Zugang finden Sie auf der Miniprogrammseite. Normalerweise befindet sich der Mitgliedereingang in der unteren Navigationsleiste oder im persönlichen Zentrum. 3. Klicken Sie auf das Mitgliedschaftsportal, um die Seite mit dem Mitgliedsantrag aufzurufen. 4. Geben Sie auf der Seite des Mitgliedsantrags relevante Informationen wie Mobiltelefonnummer, Name usw. ein. Nachdem Sie die Informationen ausgefüllt haben, reichen Sie den Antrag ein. 5. Das Miniprogramm prüft den Mitgliedschaftsantrag. Nach bestandener Prüfung kann der Benutzer Mitglied des WeChat-Miniprogramms werden. 6. Als Mitglied genießen Benutzer mehr Mitgliedschaftsrechte, wie z. B. Punkte, Gutscheine, exklusive Aktivitäten für Mitglieder usw.

See all articles