mpvue で小さなプログラムを開発する手順の詳細な説明-jsチュートリアル-php.cn

今回は 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 などの定期的なトリガーの後に使用されます。

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 中处理，但非常的不优雅，违背了原意，暂不考虑

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