wechat weapp mobx
1.0.0
Un outil puissant de communication entre les pages
Ajoutez le pilote de couche de données mobx à votre applet
Version actuelle : 0.2.0
Dépend de la version de Mobx : 4.9.2
Le mini programme prend déjà en charge l'utilisation de npm pour installer des packages tiers. Pour plus de détails, consultez la prise en charge de npm.
npm install wechat-weapp-mobx -S --productionClonez ou téléchargez la bibliothèque de codes localement :
git clone https://github.com/dao42/wechat-weapp-mbox Copiez les fichiers dist/mobx.js , dist/diff.js et dist/observer.js directement dans le projet du mini programme, par exemple (supposons ci-dessous que nous installions tous les packages tiers dans le répertoire libs) :
cd wechat-weapp-mobx
cp mobx.js <小程序根目录> /libs
cp diff.js <小程序根目录> /libs
cp observer.js <小程序根目录> /libs La commande ci-dessus copie le package dans le répertoire <小程序根目录>/libs du mini programme.
Créez un répertoire <小程序根目录>/stores pour stocker la couche de données.
Créer des magasins 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 ,
}Lier les événements de liaison de page
// <小程序根目录>/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 ( ) {
}
} ) )illustrer
Après avoir terminé les deux étapes ci-dessus, vous pouvez y accéder en utilisant props.todoStore dans wxml, et la liaison de données fonctionnera automatiquement.
// <小程序根目录>/pages/index/index.wxml
< view > { { props . todoStore . todoText } } </ view >Liaison automatique des données
Les données des magasins sont accessibles simultanément sur toutes les pages, et lorsque les données sont mises à jour, la page sera automatiquement mise à jour. Cela permet d'économiser beaucoup de code logique.
Component ( observerComponment ( {
props : {
todoStore : require ( '../stores/todoStore' ) . default
}
} ) ) Veuillez vérifier directement l'exemple : wechat-weapp-mobx-todos-npm
observerComponment dans les composantspage.data à l'avance pour éviter que le rendu des pages ne soit trop lent.Merci à Danney pour sa contribution.
Pour des exemples d'utilisation détaillés, veuillez vous référer à : wechat-weapp-mobx-todos-npm
Pour la version de test actuelle, veuillez cloner le dépôt suivant et utiliser le mini-outil de développement de programme pour activer l'aperçu :
git clone https://github.com/dao42/wechat-weapp-mobx-todos-npm.git
Pour des exemples d'utilisation détaillés, veuillez vous référer à : wechat-weapp-mobx-todos
Pour la version de test actuelle, veuillez cloner le dépôt suivant et utiliser le mini-outil de développement de programme pour activer l'aperçu :
git clone https://github.com/dao42/wechat-weapp-mobx-todos.git
Ballu - un outil de notation de basket-ball en temps réel
Commentaire : Ce projet est un petit programme très "complexe". De nombreuses pages du projet doivent utiliser websocket pour synchroniser les mises à jour des données avec le serveur. Après avoir utilisé
wechat-weapp-mobxcomme couche de pilote de données, le problème de l'état des données s'est posé en profondeur. la synchronisation peut être facilement résolue. Le projet final a été lancé avec succès.
$ npm login --registry https://registry.npmjs.org/
$ npm publishMIT
