Heim  >  Artikel  >  WeChat-Applet  >  Einführung in die häufig in kleinen Programmen verwendete Syntax

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

不言
不言Original
2018-09-18 16:30:473973Durchsuche

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;

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;            
 }

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

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) {
    //方法体
  },

Nicht-Seitendefinition:

function test(params){
    //方法体}

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)
      })
    }

2) Funktionsaufruf

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

(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方法

4. Objektvariable

class Person{
  String name;  int age;
}

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)
        }

5、export使用

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

6、disableScroll使用

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

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

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

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

8、获取所有的页面

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

注意事项:
     调用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)

10、reLaunch跳转失效问题

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

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!

Stellungnahme:
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