wechat weapp mobxダウンロード - wechat weapp mobxソースコードのダウンロード

wechat weapp mobx

AI ソースコード

1.0.0

ダウンロード

Wechat ミニプログラム mobx バインディング (wechat weapp mobx)

ページ間のコミュニケーションのための強力なツール

mobx データレイヤードライバーをアプレットに追加する

現在のバージョン: 0.2.0

mobx のバージョンに依存: 4.9.2

インストール

方法 1: npm パッケージ (推奨)

ミニプログラムは、npm を使用したサードパーティパッケージのインストールをすでにサポートしています。詳細については、「npm サポート」を参照してください。

npm install wechat-weapp-mobx -S --production

方法 2: 手動インストール

コードライブラリをローカルに複製またはダウンロードします。
```
 git clone https://github.com/dao42/wechat-weapp-mbox
```
たとえば、 dist/mobx.js 、 dist/diff.js 、およびdist/observer.jsファイルをミニプログラムプロジェクトに直接コピーします (以下では、すべてのサードパーティパッケージを libs ディレクトリにインストールするとします)。
```
 cd wechat-weapp-mobx
 cp mobx.js <小程序根目录> /libs
 cp diff.js <小程序根目录> /libs
 cp observer.js <小程序根目录> /libs
```
上記のコマンドは、パッケージをミニプログラムの<小程序根目录>/libsディレクトリにコピーします。
データ層を保存するための<小程序根目录>/storesディレクトリを作成します。

使用する (ES5 構文を使用)

mobx ストアを作成する

 // <小程序根目录>/stores/todoStore.js
// 手动安装时引入的路径
// var extendObservable = require('../../libs/mobx').extendObservable;
// npm 包安装引入的路径
var extendObservable = require ( 'wechat-weapp-mobx/mobx' ) . extendObservable ;
var TodoStore = function ( ) {
  extendObservable ( this , {
    // observable data
    todos : [ ] ,
    todoText : 'aaa' ,
    // computed data
    get count ( ) {
      return this . todos . length ;
    }
  } ) ;

  // action
  this . addTodo = function ( title ) {
    this . todos . push ( { title : title } ) ;
  }

  this . removeTodo = function ( ) {
    this . todos . pop ( ) ;
  }
}

module . exports = {
  default : new TodoStore ,
}

バインドページ連携イベント

 // <小程序根目录>/pages/index/index.js
// 手动安装时引入的路径
// var observer = require('../libs/observer').observer;
// npm 包安装引入的路径
var observer = require ( 'wechat-weapp-mobx/observer' ) . observer ;
// 关键, 监控页面事件, 让 mobx 有机会更新页面数据
Page ( observer ( {
  props : {
    todoStore : require ( '../stores/todoStore' ) . default ,
  } ,
  // your other code below
  onLoad : function ( ) {
  }
} ) )

説明する
上記2つの手順が完了すると、wxmlのprops.todoStore使ってアクセスできるようになり、自動的にデータ連携が行われます。
```
 // <小程序根目录>/pages/index/index.wxml
< view > { { props . todoStore . todoText } } </ view >
```
自動データ連携

ストア内のデータはページ間で同時にアクセスでき、データが更新されるとページも自動更新されます。これにより、多くのロジックコードが節約されます。

コンポーネントで使用される

バインドコンポーネント連携イベント

 Component ( observerComponment ( {
  props : {
    todoStore : require ( '../stores/todoStore' ) . default
  }
} ) )

ES6 構文の例

例を直接確認してください: wechat-weapp-mobx-todos-npm

バージョン更新記録

0.2.1

コンポーネントでのobserverComponment構文の使用をサポートします。

0.2.0

最適化: ページのレンダリングが遅すぎることを避けるために、事前に props をpage.dataに挿入します。

0.1.9

(安定性) 一定期間の検証の後、プロジェクトは mobx バージョン 4.9.2 を安定してサポートします。
最適化: リンクの問題を引き起こす可能性のあるオブザーバーの問題を修正します。
最適化: Unload コールバックの実行順序を調整します。
0.1.8 のユーザーは 0.1.9 にアップグレードすることをお勧めします。

0.1.8

(メジャー) mobx をバージョン 4.9.2 に正式にアップグレードし、最新の mobx デコレータ構文をサポートします。
ES6 構文のトライアルサポート。バグがある場合は、速やかに報告してください。

Danney の貢献に感謝します。

0.1.7 (使用しないでください)

新しいデコレータ構文を追加して、mobx をバージョン 4.9.2 にアップグレードしようとしました。
ただし、mobx バージョン 4.9.2 では、ミニプログラムフレームワークによって props データオブジェクトが誤ってクリアされることが判明しました。

0.1.6

npm パッケージを 0.1.6 に同期的に更新します

0.1.5

toJSWithGetter インターフェースを最適化し、パフォーマンスを再び 2 倍向上させました。
ディレクトリを調整し、npm パッケージを公開します。

0.1.4

diff処理を追加してトリガーパフォーマンスを大幅に向上

0.1.3

自動実行メカニズムを再構築して、トリガーのパフォーマンスを向上させます。

0.1.2

JS ロジックをリファクタリングして、ネストされた計算値の表示をサポートします。
小道具の既存のプロパティ値の観察をサポートし、変更によりビューの更新をトリガーできます。

0.1.1

パフォーマンスを最適化し、mobx toJS オブジェクトの重複を回避します。
バージョン番号のサポートを追加します。

0.1.0

mobx コアのサポートを実装します。

例 (npm 統合、ES6 構文のデモ)

詳しい使用例については、wechat-weapp-mobx-todos-npmを参照してください。

実際のテストバージョンの場合は、次のリポジトリを複製し、ミニプログラム開発ツールを使用してプレビューを有効にしてください。

 git clone https://github.com/dao42/wechat-weapp-mobx-todos-npm.git

例（手動インストール）

詳しい使用例については、wechat-weapp-mobx-todos を参照してください。