Über Miniprogramme

Hinweise zu Artikeln. Gerne können wir mit Ihnen darüber diskutieren. Bitte weisen Sie darauf hin, wenn der Artikel Fehler enthält.

1. Einige Vorgänge, die das Abrufen von Variablen in Daten erfordern. Wir können ES6-Objektdestrukturierung und -Zuweisung verwenden, um es zu vereinfachen. Wir können diese Methode nicht nur in kleinen Programmen, sondern auch in Vue verwenden.

// 例子(小程序)
let a = this.data.a;
let b = this.data.b;
// ES6对象解构赋值
let {a,b} = this ; // vue
let {a,b} = this.data; //小程序

2. Das öffentliche Attribut der Komponente des Applets ist ausgeblendet. Wenn Sie nicht auf das Dokument achten, kann es sein, dass Sie dieses öffentliche Attribut übersehen. Entspricht display:none; in CSS und kann auf Knoten angewendet werden, die häufig wechseln.

<view></view>
 <!--  false 为显示   true为隐藏 -->

zitierte den Beamten: „Im Allgemeinen hat wx:if höhere Wechselkosten und versteckt höhere anfängliche Rendering-Kosten. Wenn daher häufiges Wechseln erforderlich ist, ist es besser, versteckt zu verwenden.“ Wenn es unwahrscheinlich ist, dass sich die Bedingungen während der Laufzeit ändern, ist wx:if besser. Fallstricke beim Dokumentieren

<!-- 这样的写法会出现换行的效果 -->
<text>
    SevenDream 
    SevenDream 
</text>
<!-- 如果不需要换行的效果-->
<text>SevenDream SevenDream</text>

Über Bild Wenn Sie Bilder rendern müssen, werden Sie in der Mitte einen weißen Saum finden von aufeinanderfolgenden Bildern. Wenn es im Einkaufszentrum in die Produktdetails geschnitten wird, wird es unansehnlich sein, weiße Streifen in der Mitte zu haben. Fügen Sie einfach display:bolck zum Bild-Tag hinzu.

<image></image>

5. Über den Sprung

Wenn die maximale Seitenstapelverarbeitungsmethode überschritten wird (mehr als 10 Seiten), erfolgt der Sprung wird gekapselt.

• //utils.js
  export function navigateTo(url) {
     let Type = getCurrentPages().length >= 10 ? 'redirectTo' : 'navigateTo'
      return new Promise((resolve, reject) => {
        wx[Type]({
          url,
          success: res => {
            resolve()
          },
          fail: err => {
            reject(err)
          },
        })
      })
  }
  // 其他页面js
  import {navigateTo} from '../../utils/utils';
  navigateTo('pages/index/index')

Aktualisieren Sie, wenn Sie zur vorherigen Seite zurückkehren (z. B. bei der Rückkehr zum persönlichen Zentrum)

• wx.switchTab({
      url: '/pages/my/my',
      success:function(){
          var page  =  getCurrentPages().pop(); //当前页面
          page.onLoad(); // 调用 onload
      }})

Legen Sie den Wert der vorherigen Seite fest, wenn Sie zur vorherigen Seite zurückkehren

•     var pages = getCurrentPages(); // 获取页面栈
      var prevPage = pages[pages.length - 2];  //上一页
      prevPage.setData(data);
      wx.navigateBack({
        delta: 1
      })

6.this.setData Wenn Sie eines der Objekte oder Arrays ändern möchten

  //data
  data: {
    obj: {
      a: 1
    },
    array: ['1']
  },
  //改变对象
  setOBJ:function(){
    var name = 'a'
    var obj = 'obj.a'
    this.setData({
      [obj]:2
    })
  },
  //改变数组
  setArr: function () {
    var num = 0
    var arr = `array[${num}]`
    this.setData({
      [arr]: 2
    })
  }

Wenn wir ein Formular haben, das an viele BIND-Eingaben gebunden werden muss, verwenden Sie die obige Lösung und fügen Sie data-* hinzu. Es ist nicht nötig, viele Methoden zu schreiben, nur eine reicht aus

•   <input>
    <input>
    <input>

  // 写入
    data:{
      FromOBJ:{
        name:'',
        phone:'',
        address:''
      }
    },
    onInput: function (e) {
        let name =  e.currentTarget.dataset.name
        let value = e.detail.value
        let valueObj = `FromOBJ.${name}`;
        this.setData({
          [valueObj]:value
        })
    }

7. Kapselung von wx.request (Es gibt viele Kapselungslösungen für wx.requset im Internet. Hier ist die Kapselungslösung des Originalplakats. Alle Dateien werden auf einmal eingefügt0. Löschen Sie unbedingt iconfont.js. Bei Verwendung einer echten Maschine erscheint eine Fehlermeldung. Der weiße Bildschirm kann nicht geladen werden.

Beim Erstellen von Animationseffekten wird empfohlen, die offizielle Animations-API oder CSS3-Animation mit Vorsicht zu verwenden

Abschließend lassen Sie mich Sprechen Sie über eine Falle, auf die das Poster stößt (Vielleicht ist meine Art, damit umzugehen). Verwenden Sie nicht den Animationsübergangseffekt der Höhen- oder Breitenänderung auf der Ebene der WeChat-Animations-API und der CSS3-Übergang. Animationsattribute bleiben hängen und bleiben in ppt hängen. Versuchen Sie, das Problem mit deren „Transformation“ (WeChat API, CSS3) zu lösen.

• Empfohlenes Tutorial: „

  WeChat Mini-Programm
“

Das obige ist der detaillierte Inhalt vonÜber Miniprogramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!