wechat weapp mobx

Enlace mobx del mini programa Wechat (wechat weapp mobx)

Una poderosa herramienta para la comunicación entre páginas

Agregue el controlador de capa de datos mobx a su subprograma

Versión actual: 0.2.0

Depende de la versión de mobx: 4.9.2

Instalar

Método 1: paquete npm (recomendado)

El mini programa ya admite el uso de npm para instalar paquetes de terceros. Para obtener más información, consulte Soporte de npm.

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

Método 2: instalación manual

1. Clona o descarga la biblioteca de códigos localmente:

    git clone https://github.com/dao42/wechat-weapp-mbox

2. Copie los archivos dist/mobx.js , dist/diff.js y dist/observer.js directamente al proyecto del mini programa, por ejemplo (supongamos a continuación que instalamos todos los paquetes de terceros en el directorio libs):

    cd wechat-weapp-mobx
    cp mobx.js <小程序根目录> /libs
    cp diff.js <小程序根目录> /libs
    cp observer.js <小程序根目录> /libs

   El comando anterior copia el paquete en el directorio <小程序根目录>/libs del mini programa.

3. Cree un directorio <小程序根目录>/stores para almacenar la capa de datos.

Uso (usando la sintaxis ES5)

1. Crear tiendas 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 ,
   }

2. Vincular eventos de vinculación de páginas

    // <小程序根目录>/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 ( ) {
     }
   } ) )

3. ilustrar

   Después de completar los dos pasos anteriores, puede acceder a él usando props.todoStore en wxml y el enlace de datos funcionará automáticamente.

    // <小程序根目录>/pages/index/index.wxml
   < view > { { props . todoStore . todoText } } </ view >

4. Enlace automático de datos

Se puede acceder a los datos de las tiendas simultáneamente desde todas las páginas y, cuando se actualicen los datos, la página se actualizará automáticamente. Esto ahorra una gran cantidad de código lógico.

utilizado en componentes

• Vincular eventos de vinculación de componentes

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

Ejemplo de sintaxis de ES6

Consulte el ejemplo directamente: wechat-weapp-mobx-todos-npm

Registro de actualización de versión

0.2.1

• Admite el uso de la sintaxis observerComponment en componentes

0.2.0

• Optimización: inyecte accesorios en page.data con anticipación para evitar que la representación de la página sea demasiado lenta.

0.1.9

• (Estabilidad) Después de la verificación durante un período de tiempo, el proyecto admite de manera estable la versión 4.9.2 de mobx.
• Optimización: solucione un problema del observador que puede causar problemas de vinculación.
• Optimización: ajuste el orden de ejecución de la devolución de llamada de descarga.
• Se recomienda a los usuarios de 0.1.8 que actualicen a 0.1.9.

0.1.8

• (Mayor) Actualice oficialmente mobx a la versión 4.9.2, compatible con la última sintaxis del decorador de mobx.
• Soporte de prueba para la sintaxis de ES6. Si hay errores, infórmelo a tiempo.

Gracias a Danney por su contribución.

0.1.7 (No usar)

• Intenté actualizar mobx a la versión 4.9.2, agregando una nueva sintaxis de decorador.
• Sin embargo, se descubrió que en la versión 4.9.2 de mobx, el marco del mini programa borraría por error el objeto de datos de accesorios.

0.1.6

• Actualice sincrónicamente el paquete npm a 0.1.6

0.1.5

• Optimice la interfaz toJSWithGetter y vuelva a mejorar el rendimiento 2 veces.
• Ajuste el directorio y publique el paquete npm.

0.1.4

• Agregue un proceso de diferenciación para mejorar enormemente el rendimiento de activación

0.1.3

• Reconstruya el mecanismo de ejecución automática para mejorar el rendimiento de activación.

0.1.2

• Refactorice la lógica de JS para admitir la visualización de valores calculados anidados.
• Admite la observación de los valores de propiedad existentes de los accesorios y las modificaciones pueden activar actualizaciones de la vista.

0.1.1

• Optimice el rendimiento y evite objetos mobx toJS duplicados.
• Agregue soporte para el número de versión.

0.1.0

• Implementar soporte central de mobx.

Ejemplos (integración de npm, demostración de sintaxis de ES6)

Para obtener ejemplos de uso detallados, consulte: wechat-weapp-mobx-todos-npm

Para la versión de prueba real, clone el siguiente repositorio y utilice la mini herramienta de desarrollo de programas para habilitar la vista previa:

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

Ejemplo (instalación manual)

Para ejemplos de uso detallados, consulte: wechat-weapp-mobx-todos

Para la versión de prueba real, clone el siguiente repositorio y utilice la mini herramienta de desarrollo de programas para habilitar la vista previa:

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

Casos reales

Ballu: una herramienta de puntuación de baloncesto en tiempo real

Comentario: Este proyecto es un programa pequeño muy "complejo". Muchas páginas del proyecto necesitan usar websocket para sincronizar las actualizaciones de datos con el servidor. Después de usar wechat-weapp-mobx como capa de controlador de datos, el problema del estado de los datos. La sincronización se puede resolver fácilmente. El proyecto final se lanzó con éxito.

Desarrollo (publicar versión npm)

$ npm login --registry https://registry.npmjs.org/
$ npm publish

LICENCIA

MIT