Grundlegende Kenntnisse zur Verwendung von Miniprogrammen (sehr umfangreich, empfehlenswert!)

<Vorlagenname="Komponente">
<Ansicht>Hahaha</Ansicht>
  <text>Hey, hey, hey</text>
  <text>{{name}}</text>
  <text>{{Alter}}</text>
</Vorlage>
<template ist="Komponente"/>
<template ist="Komponente"/>
<template ist="Komponente"/>
<template ist="Komponente" data="{{name: '小屏', age:'123'}}" />

{
  "Komponenten verwenden": {
    "mein-Schnitt":"/Seiten/compent/mein-Schnitt" }
}

  // Durch Festlegen von styleIsolation von Optionen in der Komponente: „apply-shared“ wirken sich die Stilattribute der Seiteneinstellungen auf den Stil der Komponente aus. // Durch Festlegen von styleIsolation von Optionen in der Komponente: „shared“ wirken sich die Stilattribute der Seiteneinstellungen auf den Stil der Komponente aus. Komponente ({
	Optionen: {
    styleIsolation: "shared anwenden"
  },
})

Komponente({
Eigenschaften:
    // Titel: Zeichenfolge
    Titel:{
      Typ: Zeichenfolge,
      Wert: „Ich bin der Standardwert“,
      //Neue und alte Werte überwachen observer: function(newVal,oldVal){
        console.log(neuerWert,alterWert)
      }
    },
    
  },
    // In der Komponente können Sie mit dieser Eigenschaft den CSS-Stil externalClasses dynamisch festlegen: ["tltleclass"]

})

<mein-Schnitt Titel="Haha" tltleclass="red"></mein-Schnitt>
<my-cut Titel="Hey Hey" tltleclass="grün" />
<mein-Schnitt/>

.Rot{
  Farbe: rot;
}
.Grün{
  Farbe: grün;
}

<Klasse anzeigen="contention">
  <block wx:for="{{titled}}" wx:key="index">
    <view class="tit"> <text class="intext {{index == increat? 'active' : ''}}" data-count="{{index}}" bindtap="targetTap">{{item}}</text> </view>
  </block>
</Ansicht>

Methoden: {
    ZielTap(e){
      const index = e.currentTarget.dataset.count
      dies.setData({
        increat:index
      })
        this.triggerEvent("Zielanzahl" , {})
    },
    ändern(){
      dies.setData({
        Titel: ["Politik", "Mathematik", "Englisch"]
      })
    }

  }

<switch mit dem Titel="{{list}}" bind:targetCount="targetCount" class="sw-class"></switch>

  ZielAnzahl(){
  //Komponentenobjekt abrufen const content = this.selectComponent('.sw-class') 
    console.log(Inhalt)
    // Inhalt.setData({
    // mit dem Titel: ["Politik", "Mathematik", "Englisch"]
    // })
    // Offene Spezifikationen empfehlen diese Methode zum direkten Ändern von Funktionen im Allgemeinen nicht. Es wird empfohlen, Methoden innerhalb der Komponente zu verwenden, um die Methode zu ändern und content.amend () auf der Seite aufzurufen.
  },

<Ansicht>
  Ich bin ein Titel</view>
<Steckplatz></Steckplatz>
<Ansicht>
  Ich bin ein Inhalt</view>

<mein-Slot>
<button size="mini">Schaltfläche</button>
</mein-slot>
<mein-Slot>
 <Bildquelle="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.woyaogexing.com%2F2021%2F04%2F26%2F1b402c98095d452486508b8250b21f3f%21360x640.jpeg&refer=http%3A%2F%2Fimg2.woyaogexing.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625711145&t=d9d310d5e9c878a9d4b7bc7057f2b754"/>
</mein-slot>
<mein-Slot>
  <Schiebereglerwert="20"></Schieberegler>
</mein-slot>

<view>Ich bin der Titel des Multi-Slots</view>
<Ansicht> <Slotname="Slot1" ></Slot> </Ansicht>
<Ansicht> <Slotname="Slot2" ></Slot> </Ansicht>
<Ansicht> <Slotname="Slot3" ></Slot> </Ansicht>
<view>Ich bin das Ende des Multi-Slots</view>

Komponente({
  /**
   * Liste der Komponenteneigenschaften */
  Optionen: {
    mehrereSlots:true
  }
  )}

<!-- Verwendung mehrerer Slots -->
<!-- Hinweise:
Sie müssen jedem Slot einen Namen geben. Sie müssen die Eigenschaft multipleSolts unter dem Optionsobjekt unter dem Komponentenobjekt auf true setzen -->
<mein-mslot>
<button slot="slot3">415461</button>
<slider slot="slot1" value="20"></slider>
<text slot="slot2">Hehehe</text>
</mein-mslot>

Eigenschaften: 
	Titel: Zeichenfolge,
	Inhalt:{
	Typ: Array,
	Wert: [1,2.3],
	Beobachter:Funktion(neuerWert,alterWert){
        console.log(neuerWert,alterWert)
      }
	}
}

Daten:{
	Zähler: 0
}	

Methoden:{
foo(){
	
}
}

Optionen: {
//Auf „true“ setzen, wenn Sie mehrere Slots verwenden müssen
	mehrereSlots:true,
	//Setze den Isolationsmodus des Stils styleIsolation: "apply-shared", //Die auf der Seite festgelegten Stilattribute wirken sich auf den Stil der Komponente aus //styleIsolation: "shared" Die auf der Seite festgelegten Stilattribute wirken sich auf den Stil der Komponente aus}

externeKlassen:["on","tre"]

Beobachter:{
	Zähler: Funktion(neuerWert){
		console.log(neuerWert)
	}
}

  Seitenlebensdauer: {
    zeigen(){
      console.log("Die Seite, auf der sich die Überwachungskomponente befindet")
    },
    verstecken(){
      console.log("Wenn die Seite, auf der sich die Überwachungskomponente befindet, ausgeblendet ist")
    },
    Größe ändern(){
      console.log("Seitengrößenänderungen überwachen")
    }
  }

Lebensdauern:
    erstellt(){
      console.log("Komponente erstellt")
    },
    beigefügt(){
      console.log("Die Komponente wird der Seite hinzugefügt")
    },
    bereit(){
      console.log("Die Komponente wird gerendert")
    },
    verschoben(){
      console.log("Die Komponente wird an eine andere Stelle im Knotenbaum verschoben.")
    },
    losgelöst(){
      console.log("Komponente")
    }
  }

onReady: Funktion () {
    wx.Anfrage({
      URL: „http://httpbin.org/post“,
      Methode: 'post',
      Daten:{
        Name: „wangshuai“,
        Alter:19
      },
      Erfolg:Funktion(res){
          Konsole.log(res)
      }
    })
  },

Export-Standardfunktionsanforderung (Option) {
    returniere neues Promise( (lösen, ablehnen) => {
      wx.Anfrage({
        URL: Option.URL,
        Methode: Option.Methode || 'get',
        Daten: option.data || {},
        Erfolg: Funktion (res) {
            Entschlossenheit (res)
        },
        Fehler: Funktion (Res) {
          ablehnen(res)
        }
      })
    })
}

 onReady: Funktion () {
    //Miniprogramm für native Netzwerkanforderung// wx.request({
    // URL: „http://httpbin.org/post“,
    // Methode: 'post',
    // Daten:{
    // Name: „wangshuai“,
    //Alter:19
    // },
    // Erfolg:Funktion(res){
    // konsole.log(res)
    // }
    // })
    Anfrage({url: 'http://httpbin.org/post',Methode:"post"}).dann(res=>{
      Konsole.log(res)
    }).catch(err =>{
      console.log(fehler)
    })
  },

<button size="mini" bindtap="showToast">Toast anzeigen</button>
<button size="mini" bindtap="showModal">Modal anzeigen</button>
<button size="mini" bindtap="showLoading">AnzeigenWird geladen</button>
<button size="mini" bindtap="showAction">Aktion anzeigen</button>
<button size="mini" open-type="share">Teilen</button>

Seite({
	Toast anzeigen(){
    wx.showToast({
      Titel: 'Ich bin showToast',
    })
  },
  zeigeModal(){
    wx.showModal({
      Titel: 'Löschen',
      Farbe abbrechen: 'Farbe abbrechen',
      Erfolg:Funktion (Parameter) {
          console.log(Parameter)
          wenn (params.abbrechen) {
              console.log("Auf Löschen abbrechen geklickt")
          } 
      } 
    })
  },
  zeigeLaden(){
    wx.showLoading({
      Titel: 'Warten',
      mask: true //Geben Sie eine Maske an, um andere Vorgänge zu verhindern})
    setzeTimeout(()=>{
      wx.hideLoading({
        Erfolg: (res) => {},
      })
    },1500)
  },
  Aktion anzeigen(){
    wx.showActionSheet({
      itemList: ['Foto', 'Datei'],
    })
  }
})

<navigator url="/pages/home/home">Zur Startseite springen</navigator>

<navigator url="/pages/home/home">Zur Startseite springen</navigator>
<navigator url="/pages/home/home" open-type="redirect">Zur Startseite springen (Umleitung)</navigator>
<navigator url="/pages/home/home" open-type="reLaunch">Zur Startseite springen (reLaunch)</navigator>
<navigator url="/pages/home/home" open-type="switchTab">Zur Startseite springen (switchTab)</navigator>