mpvue で小さなプログラムを開発する手順の詳細な説明

今回は mpvue で小さなプログラムを開発する手順について詳しく説明します。 mpvue で小さなプログラムを開発する際の 注意事項 は何ですか?実際の事例を見てみましょう。

1. 例

ライフ サイクル

Vue 自体のライフ サイクルに加えて、mpvue はミニ プログラムのライフ サイクルとも互換性があります。ライフ サイクルのこの部分のフックは WeChat のページから来ています。特別な状況を除いて、

ではなく、ミニプログラムのライフサイクルフックを使用することをお勧めします。

アプリパーツ: aOnLAUNCH、アプレットの開始時に

• を初期化するか、バックグラウンドからフロントデスクに入り、アプレットがフロントデスクパーツからバックグラウンドに入ったときに

• を表示します:

• onLoad、ページの読み込みを監視

onShow、ページの表示を監視

• onReady、ページの初期レンダリング完了を監視

• onHide、ページの非表示を監視

• onUnロード、ページのアンロードを監視する

• onPullDownRefresh、ユーザーのプルダウンアクションを監視します

• onReachBottom、ページプルダウンイベントのハンドラー関数

• onShareAppMessage、ユーザーが右上隅をクリックして共有します

• onPageスクロール、ページがスクロールします

• onTabItemTap、現在のタブ ページがクリックされると、タブがクリックされるとトリガーされます (mpvue 0.0.16 でサポートされます)

• 使用例:

  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"

注:

created: () => console.log(this.a) や vm.$watch('a', newValue => this.myMethod()) などのオプション属性またはコールバックではアロー関数を使用しないでください。アロー関数は親コンテキストにバインドされているため、これは期待どおりの Vue インスタンスではなく、this.a または this.myMethod は未定義になります。

WeChat アプレット ページのクエリ パラメーターは onLoad を通じて取得され、mpvue はこれを最適化し、対応するパラメーター データを this.$root.$mp.query

を通じて直接取得します。その呼び出しは onLoad ライフ内にある必要があります。 onShow などの定期的なトリガーの後に使用されます。

1. 2. テンプレート構文

2. は純粋な HTML をサポートしません

   アプレット内のすべての BOM/DOM は使用できません。つまり、v-html コマンドは使用できません。

一部の複雑な JavaScript レンダリング式はサポートされていません

WeChat アプレット (データ バインディング

) の容量制限のため、テンプレート内の {{}} 二重中括弧部分を直接 wxml ファイルにエンコードします。そのため、複雑な JavaScript 式はサポートできません。

現在利用可能なのは + - * % ?: ! == === > 残りは改善する必要があります。

フィルタをサポートしていません

レンダリング部分はwxmlに変換されます。wxmlはフィルタをサポートしていないため、この部分の関数はサポートされていません。

は関数をサポートしていません

はテンプレートでのメソッドの使用をサポートしていません。

リストレンダリング

完全サポート 公式ドキュメント: リストレンダリング

注意すべき点が 1 つあります。

ネストされたリストレンダリングでは、異なるインデックスを指定する必要があります。

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

イベントハンドラ

inputとtextareaのchangeイベントはblurイベントに変換されます。

注:

たとえば、bindregionchange イベントは、dom 上のバインドを @

@regionchange に直接変更することもできます。また、そのイベント タイプには begin と end

があるため、handleProxy でどのイベントであるかを区別することができません。そのため、そのようなイベントをリッスンするときは、イベント名とイベント タイプの両方をリッスンすることになります。同じ時間

   <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，和