Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Schritte zur Entwicklung kleiner Programme in mpvue

Detaillierte Erläuterung der Schritte zur Entwicklung kleiner Programme in mpvue

php中世界最好的语言Original: 2018-05-24 15:05:582722Durchsuche

Dieses Mal werde ich Ihnen die Schritte zum Entwickeln eines kleinen Programms mit mpvue ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Entwicklung eines kleinen Programms mit mpvue? .

1. InstanzLebenszyklus

Zusätzlich zum Lebenszyklus von Vue selbst ist mpvue auch mit dem Lebenszyklus kleiner Programme kompatibel des Lebenszyklus stammen von WeChat. Für Mini-Programmseiten wird, außer unter besonderen Umständen, nicht empfohlen, den Lebenszyklus-Hook des Mini-Programms zu verwenden.

App-Teil:

onLaunch, Initialisierung
onShow, wenn das Applet startet, oder Beim Eintritt in den Vordergrund aus dem Hintergrund wird
onHide angezeigt, wenn das Miniprogramm aus dem Vordergrund in den Hintergrund eintritt

Seitenteil:

onLoad, Seitenladevorgang überwachen
onShow, Seitenanzeige überwachen
onReady, Überwachen Sie, dass das anfängliche Rendern der Seite abgeschlossen ist
onHide, überwachen Sie das Ausblenden der Seite
onUnload, überwachen Sie das Entladen der Seite
onPullDownRefresh, Pulldown-Aktion des Benutzers überwachen
onReachBottom, Handlerfunktion für Seiten-Pulldown-Ereignis
onShareAppMessage, Benutzer klickt oben rechts Ecke zum Teilen
onPageScroll, Seitenscrollen
onTabItemTap, wenn auf die aktuelle Registerkarte geklickt wird, wird ausgelöst, wenn auf die Registerkarte geklickt wird (mpvue 0.0. 16 Stützen)

Verwendungsbeispiel:

new Vue({
  data: {
    a: 1
  },
  created () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  },
  onShow () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a, '小程序触发的 onshow')
  }
})
// => "a is: 1"

Hinweis:

Verwenden Sie keine Pfeilfunktionen auf Optionsattributen oder Rückrufen, wie zum Beispiel „created: () => console.log(this.a)“ oder „vm.$watch('a', newValue => this.myMethod()“). Da Pfeilfunktionen an den übergeordneten Kontext gebunden sind, handelt es sich nicht wie erwartet um die Vue-Instanz, und this.a oder this.myMethod sind undefiniert.
Der Abfrageparameter der WeChat-Applet-Seite wird über onLoad abgerufen. mpvue hat dies optimiert und übergibt direkt this.$root.$mp.query Entsprechende Parameterdaten, ihr Aufruf muss verwendet werden, nachdem der onLoad-Lebenszyklus ausgelöst wurde, z. B. onShow usw.

2. Vorlagensyntax

funktioniert unterstützt kein reines HTML

Alle Stücklisten/DOMs im Miniprogramm können nicht verwendet werden, was bedeutet, dass der Befehl v-html nicht verwendet werden kann.

Unterstützt einige komplexe JavaScript-Rendering-Ausdrücke nicht

Wir werden die doppelten geschweiften Klammern {{}} in der Vorlage aufgrund der Funktion direkt in die WXML-Datei kodieren Aufgrund der Einschränkungen des WeChat-Applets (Datenbindung) können komplexe JavaScript-Ausdrücke nicht unterstützt werden.

Derzeit verfügbar sind + - * % ?: ! == === >

Filter werden nicht unterstützt

Der Rendering-Teil wird in WXML konvertiert, und WXML unterstützt keine Filter, daher wird dieser Teil der Funktion nicht unterstützt.

Funktion wird nicht unterstützt

Die Verwendung von Funktionen in Methoden innerhalb der Vorlage wird nicht unterstützt.

Listen-Rendering

Volle Unterstützung für offizielle Dokumentation: Listen-Rendering

Nur etwas zu beachten: Beim Rendern verschachtelter Listen muss ein anderer Index angegeben werden!

<!-- 在这种嵌套循环的时候， index 和 itemIndex 这种索引是必须指定，且别名不能相同，正确的写法如下 -->
<template>
    <ul v-for="(card, index) in list">
        <li v-for="(item, itemIndex) in card">
            {{item.value}}
        </li>
    </ul>
</template>

Ereignishandler

Das Änderungsereignis im Eingabe- und Textbereich wird in ein Unschärfeereignis umgewandelt.

Hinweis:

Für native Ereignisse, die nicht in der Liste enthalten sind, können Sie auch das bindregionchange-Ereignis verwenden, um die Bindung direkt auf @ @regionchange, gleichzeitig ist dieses Ereignis auch etwas ganz Besonderes. Es enthält Anfang und Ende, sodass wir nicht unterscheiden können, um welches Ereignis es sich in handleProxy handelt, sodass Sie zuhören können auf Ereignisse gleichzeitig, wenn Sie solche Ereignisse anhören. Sowohl der Name als auch der Ereignistyp
```
   <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
```
小程序能力所致，bind 和 catch 事件同时绑定时候，只会触发 bind ,catch 不会被触发，要避免踩坑。

事件修饰符

- .stop 的使用会阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的 catchEventName 失效！

.prevent 可以直接干掉，因为小程序里没有什么默认事件，比如submit并不会跳转页面
.capture 支持 1.0.9
.self 没有可以判断的标识
.once 也不能做，因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理，但非常的不优雅，违背了原意，暂不考虑

其他键值修饰符等在小程序中压根没键盘，所以。。。

三、组件

有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render，和