wechat weapp mobx

Мини программа 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. Установка вручную.

1. Клонируйте или загрузите библиотеку кода локально:

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

2. Скопируйте файлы 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 программы.

3. Создайте каталог <小程序根目录>/stores для хранения уровня данных.

Использовать (с использованием синтаксиса ES5)

1. Создание магазинов 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. Привязка событий связи страниц

    // <小程序根目录>/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. иллюстрировать

   После выполнения двух вышеуказанных шагов вы можете получить к нему доступ с помощью props.todoStore в wxml, и привязка данных будет работать автоматически.

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

4. Автоматическое связывание данных

Доступ к данным в магазинах можно получить одновременно на всех страницах, и при обновлении данных страница будет автоматически обновляться. Это экономит много логического кода.

используется в компонентах

• Привязка событий связывания компонентов

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

Пример синтаксиса ES6

Пожалуйста, проверьте пример напрямую: wechat-weapp-mobx-todos-npm

Запись обновления версии

0.2.1

• Поддерживает использование синтаксиса observerComponment в компонентах.

0.2.0

• Оптимизация: заранее добавьте реквизиты в 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. Если есть ошибки, сообщите о них вовремя.

Спасибо Дэнни за его вклад.

0.1.7 (Не использовать)

• Пытался обновить mobx до версии 4.9.2, добавив новый синтаксис декоратора.
• Однако было обнаружено, что в версии mobx 4.9.2 объект данных реквизита по ошибке очищался структурой мини-программы.

0.1.6

• Синхронно обновить пакет npm до версии 0.1.6.

0.1.5

• Оптимизируйте интерфейс toJSWithGetter и снова улучшите производительность в 2 раза.
• Настройте каталог и опубликуйте пакет npm.

0.1.4

• Добавьте процесс сравнения, чтобы значительно улучшить производительность запуска.

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.

Для фактической тестовой версии клонируйте следующий репозиторий и используйте инструмент разработки мини-программ, чтобы включить предварительный просмотр:

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

Реальные случаи

Ballu — инструмент для подсчета очков в баскетболе в реальном времени.

Комментарий: Этот проект представляет собой очень «сложную» небольшую программу. Многие страницы проекта должны использовать веб-сокет для синхронизации обновлений данных с сервером. После использования wechat-weapp-mobx в качестве уровня драйвера данных возникает проблема статуса данных. синхронизацию можно легко решить. Окончательный проект был успешно запущен.

Разработка (опубликовать версию npm)

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

ЛИЦЕНЗИЯ

Массачусетский технологический институт