mpvueフレームコンポーネントライブラリのシームレスなアクセスVant Weappを使用してアプレット

これは、そこに米国のグループの売上高はmpvueそのVUE文法と良い開発効率外れていると、その後に優れたユーザーエクスペリエンスのUIコンポーネントは、間違いなく、マイクロ文字のアプレットのカスタマイズされた開発であるが、マイクロチャネルの再梱包のmpvueネイティブ開発理由我々はまた、導入されたUIコンポーネントは、多くの問題を追加し、いくつかの単語の男は言った、そしてあなたにvant-weappを導入する方法を示しています。

1は、最初にすべての、私たちはすなわちmpvueでプロジェクトを開始するために、プロジェクトドキュメントの基本骨格mpvueを持っている必要があります

グローバルVUE-CLIをインストール

$ npm install --global vue-cli

テンプレートmpvue・クイックスタートに基づいて新しいプロジェクトを作成します。

$ vue init mpvue/mpvue-quickstart my-project

インストールが依存します

$ cd my-project
$ npm install

スタートビル

$ npm run dev

プロジェクトでの開発ツールでは2、第二に、新しいマイクロチャネル、登録APPIDとファイルディレクトリ中の充填（ファイルディレクトリがプロジェクトの下mpvue distディレクトリであることをここで注意すべき黒板にノック）、ディレクトリのルートディレクトリには、実際にはdistのですそれぞれがmpvue（NPMの実行ビルド）でパッケージディレクトリを完了した後に、ファイル構造は、マイクロチャネルMINA小さな町開発プログラムのネイティブファイル構造の内部にあります。

3.あなたは私たちが元のプロジェクト（であるが、使用するために必要なすべてをコピーするには、そのプログラムの下でdistのファイルダウンダウン後vant-weappをダウンロードしたいので、次は、私たちは、vant-weappオープンソース・プロジェクトにvant UIコンポーネントを使用する必要があります私たちは、プロジェクトの初期化）、管理を容易にするためには、ルートディレクトリ内の静的ファイルを格納するために使用される新しいvant UIコンポーネントを作成することができますを開始しました。

git clone https://github.com/youzan/vant-weapp.git

図に示すような位置に貼り付け

4、次は比較的単純で、部品の特定の使用が公式文書で表示することができ、我々は唯一の私たちに必要なコンポーネントことを我々はページのコンポーネントを使用する必要がある構成でのJSONファイルを導入する必要があり
、ここでは私ですホームJSONの設定

{ 
    // 页面配置，即 page.json 的内容
    navigationBarTitleText: '首页',
    'usingComponents': {
      'van-search': '/static/vant/search/index',
      'van-row': '/static/vant/row/index',
      'van-col': '/static/vant/col/index',
      'van-tab': '/static/vant/tab/index',
      'van-tabs': '/static/vant/tabs/index',
      'van-cell': '/static/vant/cell/index',
      'van-cell-group': '/static/vant/cell-group/index',
      'van-radio': '/static/vant/radio/index',
      'van-radio-group': '/static/vant/radio-group/index',
      'van-field': '/static/vant/field/index',
      'van-button': '/static/vant/button/index',
      'van-card': '/static/vant/card/index',
      'van-popup': '/static/vant/popup/index',
      'van-icon': '/static/vant/icon/index',
      'van-panel': '/static/vant/panel/index',
      'van-action-sheet': '/static/vant/cell-group/index',
      'van-switch-cell': '/static/vant/switch-cell/index',
      'van-area': '/static/vant/area/index',
      'van-dialog': '/static/vant/dialog/index'
    }
  }

図4は、UIコンポーネントは、UIコンポーネントを可能にするために発効する前に、プロジェクトの本のテストにインポートすることができた後、私たちはあるプロジェクトパッケージ、見てする必要があり、我々は、ターミナルを開いて、再度プロジェクトのルートディレクトリで実行する必要があります（NPM実行ビルド）このようvant UIコンポーネントは、通常はページの中で役割を果たします
注意事項の
公式文書で特定の使用我々は直接コピーを使用することはできませんので、wxml構文を使用して、weappをvant

結合1、どのようにデータ

value="{{value}}"

ネイティブアプレット、方法でラベルをデータバインディング

value="{{value}}"

我々は変更する必要があるように起こっmpvueとして、我々は、使用します

v-bind:value="value"
//或者
:value="value"

2、道のイベントを結合

ネイティブアプレットの使用

bind:click="onClick"

mpvue使用

@click="onClick"

3つの参照、インタラクティブなコンポーネント

フィードバックとしてこの操作でvantアセンブリクラスは、2つの導入、一つの成分は、組み込まれたmain.jsonの導入を持って通知する;他方は導入する方法では、組み込まれたVUEは、特にインポートファイルを必要とします、本明細書に組み込まれる絶対パスを使用することができない、これは相対パスと同様であってもよいです。

import Notify from '@/../static/vant/notify/notify'  //@是mpvue的一个别名，指向src目录

図4に示すように、イベント・オブジェクト・イベントの値を取得します

これはmpvue取得イベントと小さなネイティブプログラムの値が異なる、ことは注目に値します。例えば：

onChange(event){ // 获取表单组件filed的值
  console.log(event.mp.detail) // 注意加入mp
}

変更5、スヌープ方式で

そのようなAPIのドキュメントリスナー名が表示されますが存在する場合ので、手動でソースコードを変更する必要があり、このモニター名@をクリックし、アイコンを使用することはできませんmpvue。

キャメルは、リスナーの名前を変更することができます。

例えば：私はアセンブリフィールドで、この問題が発生した、私のアプローチは次のとおりです。

// static/vant/field/index.js

this.$emit('click-icon');

// 修改为:

this.$emit('clickIcon');

エラー処理

一般的なエラーエラーは、どのような方法によって処理することができます。
1、ES6マイクロチャネル伝達関数ES5開発ツールをオンにするかどうか。
2、文書よりもコードをダブルチェックして、場所の不適切な使用があるかどうかを確認。
3、再コンパイルまたはNPM実行devの再NPM実行devディレクトリのdistの削除
、4を再起動またはマイクロチャネルの開発ツールを更新します。

あなたはUIコンポーネントを追加した後、行方不明のページ、TypeError例外報告：缶の財産ではない未定義の読む「インデックス」
1を、新しいページは、再パッケージ化していない
問題のコンポーネントのパスを追加し、2を、パスが間違っているか、重複して追加することです