Maison > Article > interface Web > Explication détaillée des étapes de développement de petits programmes dans mpvue

Explication détaillée des étapes de développement de petits programmes dans mpvue

php中世界最好的语言original: 2018-05-24 15:05:582721parcourir

Cette fois je vais vous apporter une explication détaillée des étapes de développement d'un petit programme avec mpvue Quelles sont les précautions pour développer un petit programme avec mpvue. Voici des cas pratiques, jetons un coup d'oeil. .

1. InstanceCycle de vie

En plus du cycle de vie de Vue lui-même, mpvue est également compatible avec le cycle de vie des petits programmes Les hooks de cette partie. du cycle de vie proviennent des pages du programme WeChat For Mini, sauf circonstances particulières, n'est pas recommandé d'utiliser le crochet du cycle de vie du mini programme.

partie application :

onLaunch, initialisation
onShow, au démarrage de l'applet, ou Entrer au premier plan depuis l'arrière-plan affiche
onHide, lorsque le mini programme entre en arrière-plan depuis le premier plan

partie de page :

onLoad, surveille le chargement de la page
onShow, surveille l'affichage de la page
onReady, surveiller le rendu initial de la page terminé
onHide, surveiller le masquage de la page
onUnload, surveiller le déchargement de la page
onPullDownRefresh, surveille l'action déroulante de l'utilisateur
onReachBottom, fonction de gestionnaire pour l'événement déroulant de page
onShareAppMessage, l'utilisateur clique en haut à droite coin à partager
onPageScroll, défilement de page
onTabItemTap, lorsque l'on clique sur la page à onglet actuelle, déclenché lorsque l'on clique sur l'onglet (mpvue 0.0. 16 supports)

Exemple d'utilisation :

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"

Remarque :

Ne pas utiliser les fonctions de flèche sur les attributs d'option ou les rappels, tels que Created : () => console.log(this.a) ou vm.$watch('a', newValue => this.myMethod()). Étant donné que les fonctions fléchées sont liées au contexte parent, ce ne sera pas l'instance de Vue comme on pourrait s'y attendre, et this.a ou this.myMethod ne seront pas définis.
Le paramètre de requête de la page de l'applet WeChat est obtenu via onLoad l'a optimisé et transmet directement this.$root.$mp.query Pour obtenir le données de paramètre correspondantes, son appel doit être utilisé après le déclenchement du cycle de vie onLoad, comme onShow, etc.

2. La syntaxe du modèle

fait ne prend pas en charge le HTML pur

Tous les BOM/DOM du mini-programme ne peuvent pas être utilisés, ce qui signifie que la commande v-html ne peut pas être utilisée.

Ne prend pas en charge certaines expressions de rendu JavaScript complexes

Nous encoderons les doubles accolades {{}} du modèle directement dans le fichier wxml en raison de cette fonctionnalité. limitations de l'applet WeChat (liaison de données), les expressions JavaScript complexes ne peuvent pas être prises en charge.

Actuellement disponibles sont + - * % ?: ! == === <

Ne prend pas en charge les filtres

La partie rendu sera convertie en wxml, et wxml ne prend pas en charge les filtres, donc cette partie de la fonction n'est pas prise en charge.

La fonction n'est pas prise en charge

L'utilisation de fonctions dans les méthodes du modèle n'est pas prise en charge.

Rendu de liste

Prise en charge complète de la documentation officielle : rendu de liste

Juste quelque chose à noter, le rendu de liste imbriquée doit spécifier un index différent !

<!-- 在这种嵌套循环的时候， index 和 itemIndex 这种索引是必须指定，且别名不能相同，正确的写法如下 -->
<template>
    <ul v-for="(card, index) in list">
        <li v-for="(item, itemIndex) in card">
            {{item.value}}
        </li>
    </ul>
</template></p>
<h3 style="text-align: left;"><strong><a href="http://www.php.cn/code/5688.html" target="_blank">Gestionnaire d'événements</a></strong></h3>
<p style="text-align: left;">L'événement de changement dans l'entrée et la zone de texte sera converti en événement de flou. </p>
<h4 style="text-align: left;"><strong>Remarque : </strong></h4>
<ul class=" list-paddingleft-2">
<li>
<p style="text-align: left;">Pour les événements natifs ne figurant pas dans la liste, vous pouvez également utiliser l'événement bindregionchange pour modifier directement la liaison en @ @regionchange, en même temps, cet événement est aussi très spécial. Il a deux types d'événements : début et fin<br>, ce qui nous empêche de distinguer de quel événement il s'agit dans handleProxy, donc vous peut écouter des événements en même temps lors de l'écoute de tels événements. Nom et type d'événement<br>.</p>
<pre class="brush:php;toolbar:false">   <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，和