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，和<script type="text/x-template"> 字符串模版等都不支持。原因很简单，因为我们要预编译出 wxml。

详细的不支持列表：

• 暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：<card class="class-name"> </card> 样式是不会生效的)，因为编译到wxml，小程序不会生成节点，建议写在内部顶级元素上。

• Slot（scoped 暂时还没做支持）

• 动态组件

• 异步组件

• inline-template

• X-Templates

• keep-alive

• transition

• class

• style

小程序组件

mpvue 可以支持小程序的原生组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"

示例代码：

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
</picker>

四、常见问题

1. 如何获取小程序在 page onLoad 时候传递的 options

在所有 页面 的组件内可以通过 this.$root.$mp.query 进行获取。

2. 如何获取小程序在 app onLaunch/onShow 时候传递的 options

在所有的组件内可以通过 this.$root.$mp.appOptions 进行获取。

3. 如何捕获 app 的 onError

由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下：

export default {
   // 只有 app 才会有 onLaunch 的生命周期
   onLaunch () {
       // ...
   },
   // 捕获 app error
   onError (err) {
       console.log(err)
   }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

前端中排序算法实例详解

JS中使用接口步骤详解

以上がmpvue で小さなプログラムを開発する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。