wechat weapp mobx
1.0.0
Ein leistungsstarkes Tool für die Kommunikation zwischen Seiten
Fügen Sie Ihrem Applet den Mobx-Datenschichttreiber hinzu
Aktuelle Version: 0.2.0
Hängt von der Mobx-Version ab: 4.9.2
Das Miniprogramm unterstützt bereits die Verwendung von npm zur Installation von Paketen von Drittanbietern. Weitere Informationen finden Sie unter npm-Unterstützung.
npm install wechat-weapp-mobx -S --productionKlonen Sie die Codebibliothek oder laden Sie sie lokal herunter:
git clone https://github.com/dao42/wechat-weapp-mbox Kopieren Sie beispielsweise die Dateien dist/mobx.js , dist/diff.js und dist/observer.js direkt in das Miniprogrammprojekt (angenommen, wir installieren im Folgenden alle Pakete von Drittanbietern im libs-Verzeichnis):
cd wechat-weapp-mobx
cp mobx.js <小程序根目录> /libs
cp diff.js <小程序根目录> /libs
cp observer.js <小程序根目录> /libs Der obige Befehl kopiert das Paket in das Verzeichnis <小程序根目录>/libs des Miniprogramms.
Erstellen Sie ein Verzeichnis <小程序根目录>/stores um die Datenschicht zu speichern.
Erstellen Sie Mobx-Stores
// <小程序根目录>/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 ,
}Binden Sie Seitenverknüpfungsereignisse
// <小程序根目录>/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 ( ) {
}
} ) )veranschaulichen
Nachdem Sie die beiden oben genannten Schritte ausgeführt haben, können Sie über props.todoStore in wxml darauf zugreifen und die Datenverknüpfung funktioniert automatisch.
// <小程序根目录>/pages/index/index.wxml
< view > { { props . todoStore . todoText } } </ view >Automatische Datenverknüpfung
Auf Daten in Geschäften kann seitenübergreifend gleichzeitig zugegriffen werden, und wenn die Daten aktualisiert werden, wird die Seite automatisch aktualisiert. Das spart viel Logikcode.
Component ( observerComponment ( {
props : {
todoStore : require ( '../stores/todoStore' ) . default
}
} ) ) Bitte schauen Sie sich direkt das Beispiel an: wechat-weapp-mobx-todos-npm
observerComponment Syntax in Komponentenpage.data ein, um zu vermeiden, dass das Rendern der Seite zu langsam wird.Vielen Dank an Danney für seinen Beitrag.
Ausführliche Anwendungsbeispiele finden Sie unter: wechat-weapp-mobx-todos-npm
Für die tatsächliche Testversion klonen Sie bitte das folgende Repo und verwenden Sie das Mini-Programmentwicklungstool, um die Vorschau zu aktivieren:
git clone https://github.com/dao42/wechat-weapp-mobx-todos-npm.git
Ausführliche Anwendungsbeispiele finden Sie unter: wechat-weapp-mobx-todos
Für die tatsächliche Testversion klonen Sie bitte das folgende Repo und verwenden Sie das Mini-Programmentwicklungstool, um die Vorschau zu aktivieren:
git clone https://github.com/dao42/wechat-weapp-mobx-todos.git
Ballu – ein Echtzeit-Basketball-Scoring-Tool
Kommentar: Bei diesem Projekt handelt es sich um ein sehr „komplexes“ kleines Programm. Nach der Verwendung von
wechat-weapp-mobxals Datentreiberschicht ist das Problem des Datenstatus ein Thema Die Synchronisierung kann problemlos gelöst werden. Das endgültige Projekt wurde erfolgreich gestartet.
$ npm login --registry https://registry.npmjs.org/
$ npm publishMIT
