wechat weapp mobx

Ligação mobx do miniprograma Wechat (wechat weapp mobx)

Uma ferramenta poderosa para comunicação entre páginas

Adicione o driver da camada de dados mobx ao seu miniaplicativo

Versão atual: 0.2.0

Depende da versão mobx: 4.9.2

Instalar

Método 1: pacote npm (recomendado)

O miniprograma já suporta o uso do npm para instalar pacotes de terceiros. Para obter detalhes, consulte suporte ao npm.

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

Método 2: instalação manual

1. Clone ou baixe a biblioteca de códigos localmente:

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

2. Copie os arquivos dist/mobx.js , dist/diff.js e dist/observer.js diretamente para o projeto do miniprograma, por exemplo (suponha abaixo que instalamos todos os pacotes de terceiros no diretório libs):

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

   O comando acima copia o pacote para o diretório <小程序根目录>/libs do miniprograma.

3. Crie um diretório <小程序根目录>/stores para armazenar a camada de dados.

Usar (usando a sintaxe ES5)

1. Crie lojas 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 vinculação de página

    // <小程序根目录>/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

   Depois de concluir as duas etapas acima, você pode acessá-lo usando props.todoStore em wxml, e a ligação de dados funcionará automaticamente.

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

4. Ligação automática de dados

Os dados nas lojas podem ser acessados ​​simultaneamente nas páginas e, quando os dados forem atualizados, a página será atualizada automaticamente. Isso economiza muito código lógico.

usado em componentes

• Vincular eventos de vinculação de componentes

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

Exemplo de sintaxe ES6

Por favor, verifique o exemplo diretamente: wechat-weapp-mobx-todos-npm

Registro de atualização de versão

0.2.1

• Suporta o uso da sintaxe observerComponment em componentes

0.2.0

• Otimização: injete adereços em page.data com antecedência para evitar que a renderização da página seja muito lenta.

0.1.9

• (Estabilidade) Após verificação por um período de tempo, o projeto suporta de forma estável o mobx versão 4.9.2.
• Otimização: corrige um problema do observador que pode causar problemas de ligação.
• Otimização: ajuste a ordem de execução do retorno de chamada Unload.
• Recomenda-se que os usuários do 0.1.8 atualizem para o 0.1.9.

0.1.8

• (Principal) Atualize oficialmente o mobx para a versão 4.9.2, suportando a sintaxe do decorador mobx mais recente.
• Suporte de teste para sintaxe ES6. Se houver bugs, informe-os a tempo.

Obrigado a Danney por sua contribuição.

0.1.7 (Não usar)

• Tentei atualizar o mobx para a versão 4.9.2, adicionando nova sintaxe de decorador.
• No entanto, descobriu-se que no mobx versão 4.9.2, o objeto de dados props seria apagado pela estrutura do miniprograma por engano.

0.1.6

• Atualize de forma síncrona o pacote npm para 0.1.6

0.1.5

• Otimize a interface toJSWithGetter e melhore o desempenho em 2 vezes novamente.
• Ajuste o diretório e publique o pacote npm.

0.1.4

• Adicione o processo de comparação para melhorar significativamente o desempenho do acionamento

0.1.3

• Reconstrua o mecanismo de execução automática para melhorar o desempenho do disparo.

0.1.2

• Refatore a lógica toJS para suportar a exibição de valores computados aninhados.
• Suporta observação de valores de propriedades existentes de adereços, e modificações podem acionar atualizações de visualização.

0.1.1

• Otimize o desempenho e evite objetos mobx toJS duplicados.
• Adicione suporte ao número de versão.

0.1.0

• Implemente o suporte principal mobx.

Exemplos (integração npm, demonstração de sintaxe ES6)

Para exemplos de uso detalhados, consulte: wechat-weapp-mobx-todos-npm

Para a versão de teste real, clone o seguinte repositório e use a ferramenta de desenvolvimento de miniprograma para ativar a visualização:

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

Exemplo (instalação manual)

Para exemplos de uso detalhados, consulte: wechat-weapp-mobx-todos

Para a versão de teste real, clone o seguinte repositório e use a ferramenta de desenvolvimento de miniprograma para ativar a visualização:

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

Casos reais

Ballu - uma ferramenta de pontuação de basquete em tempo real

Comentário: Este projeto é um pequeno programa muito "complexo". Muitas páginas do projeto precisam usar o websocket para sincronizar as atualizações de dados com o servidor. Depois de usar wechat-weapp-mobx como a camada do driver de dados, o problema do status dos dados. a sincronização pode ser facilmente resolvida.

Desenvolvimento (publicar versão npm)

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

LICENÇA

MIT