<map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
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"ログイン後にコピー注:
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>ログイン後にコピー
イベントハンドラ
<!-- 在这种嵌套循环的时候， 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>
ログイン後にコピー
<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，和
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7546
15
1381
52
83
11
21
89
C++のmode関数の詳しい解説
Nov 18, 2023 pm 03:08 PM
C++ のモード関数の詳細な説明 統計において、モードとは、一連のデータ内で最も頻繁に現れる値を指します。 C++ 言語では、モード関数を記述することによって、任意のデータセット内のモードを見つけることができます。モード関数はさまざまな方法で実装できます。一般的に使用される 2 つの方法を以下で詳しく紹介します。 1 つ目の方法は、ハッシュ テーブルを使用して各数値の出現回数をカウントすることです。まず、各数値をキー、出現回数を値とするハッシュ テーブルを定義する必要があります。次に、特定のデータセットに対して次を実行します。
Win11での管理者権限の取得について詳しく解説
Mar 08, 2024 pm 03:06 PM
Windows オペレーティング システムは世界で最も人気のあるオペレーティング システムの 1 つであり、その新バージョン Win11 が大きな注目を集めています。 Win11 システムでは、管理者権限の取得は重要な操作であり、管理者権限を取得すると、ユーザーはシステム上でより多くの操作や設定を実行できるようになります。この記事では、Win11システムで管理者権限を取得する方法と、権限を効果的に管理する方法を詳しく紹介します。 Win11 システムでは、管理者権限はローカル管理者とドメイン管理者の 2 種類に分かれています。ローカル管理者はローカル コンピュータに対する完全な管理権限を持っています
Oracle SQLの除算演算の詳細説明
Mar 10, 2024 am 09:51 AM
OracleSQL の除算演算の詳細な説明 OracleSQL では、除算演算は一般的かつ重要な数学演算であり、2 つの数値を除算した結果を計算するために使用されます。除算はデータベース問合せでよく使用されるため、OracleSQL での除算演算とその使用法を理解することは、データベース開発者にとって重要なスキルの 1 つです。この記事では、OracleSQL の除算演算に関する関連知識を詳細に説明し、読者の参考となる具体的なコード例を示します。 1. OracleSQL での除算演算
C++の剰余関数の詳しい解説
Nov 18, 2023 pm 02:41 PM
C++ の剰余関数の詳しい説明 C++ では、剰余演算子 (%) を使用して、2 つの数値を除算した余りを計算します。これは、オペランドが任意の整数型 (char、short、int、long など) または浮動小数点数型 (float、double など) になる二項演算子です。剰余演算子は、被除数と同じ符号の結果を返します。たとえば、整数の剰余演算の場合、次のコードを使用して実装できます。
WeChat ミニ プログラムにカードめくり効果を実装する
Nov 21, 2023 am 10:55 AM
WeChat ミニ プログラムでのカードめくり効果の実装 WeChat ミニ プログラムでは、カードめくり効果の実装は、ユーザー エクスペリエンスとインターフェイス インタラクションの魅力を向上させることができる一般的なアニメーション効果です。以下では、WeChat アプレットでカードめくりの特殊効果を実装する方法と、関連するコード例を詳しく紹介します。まず、ミニ プログラムのページ レイアウト ファイルに 2 つのカード要素を定義する必要があります。1 つは前面のコンテンツを表示するため、もう 1 つは背面のコンテンツを表示するためです。具体的なサンプル コードは次のとおりです: <!--index.wxml- ->&l
PHPモジュロ演算子の役割と使い方を詳しく解説
Mar 19, 2024 pm 04:33 PM
PHP のモジュロ演算子 (%) は、2 つの数値を除算した余りを取得するために使用されます。この記事では、モジュロ演算子の役割と使用法について詳しく説明し、読者の理解を深めるために具体的なコード例を示します。 1. モジュロ演算子の役割 数学では、整数を別の整数で割ると、商と余りが得られます。たとえば、10 を 3 で割ると、商は 3 になり、余りは 1 になります。モジュロ演算子は、この剰余を取得するために使用されます。 2. モジュロ演算子の使用法 PHP では、% 記号を使用してモジュロを表します。
Linuxシステムコールsystem()関数の詳細説明
Feb 22, 2024 pm 08:21 PM
Linux システム コール system() 関数の詳細説明 システム コールは、Linux オペレーティング システムの非常に重要な部分であり、システム カーネルと対話する方法を提供します。その中でも、system()関数はよく使われるシステムコール関数の一つです。この記事では、system() 関数の使用法を詳しく紹介し、対応するコード例を示します。システム コールの基本概念 システム コールは、ユーザー プログラムがオペレーティング システム カーネルと対話する方法です。ユーザープログラムはシステムコール関数を呼び出してオペレーティングシステムを要求します。
Linuxのcurlコマンドの詳しい説明
Feb 21, 2024 pm 10:33 PM
Linuxのcurlコマンドの詳細な説明 要約：curlは、サーバーとのデータ通信に使用される強力なコマンドラインツールです。この記事では、curl コマンドの基本的な使用法を紹介し、読者がコマンドをよりよく理解して適用できるように実際のコード例を示します。 1.カールとは何ですか? curl は、さまざまなネットワーク要求を送受信するために使用されるコマンド ライン ツールです。 HTTP、FTP、TELNETなどの複数のプロトコルをサポートし、ファイルアップロード、ファイルダウンロード、データ送信、プロキシなどの豊富な機能を提供します。
