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. 설명하다

   위의 두 단계를 완료한 후 wxml의 props.todoStore 이용하여 접근하면 자동으로 데이터 연동이 이루어집니다.

    // <小程序根目录>/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 에 props를 미리 삽입하세요.

0.1.9

• (안정성) 일정 기간 검증을 거친 후, 프로젝트는 mobx 버전 4.9.2를 안정적으로 지원합니다.
• 최적화: 연결 문제를 일으킬 수 있는 관찰자 문제를 수정합니다.
• 최적화: Unload 콜백 실행 순서를 조정합니다.
• 0.1.8 사용자는 0.1.9로 업그레이드하는 것이 좋습니다.

0.1.8

• (주요) mobx를 최신 mobx 데코레이터 구문을 지원하는 버전 4.9.2로 공식 업그레이드합니다.
• ES6 구문에 대한 평가판 지원 버그가 있는 경우 제때에 보고해 주세요.

기여한 Danney에게 감사드립니다.

0.1.7 (사용하지 않음)

• 새로운 데코레이터 구문을 추가하여 mobx를 버전 4.9.2로 업그레이드하려고 했습니다.
• 그러나 mobx 버전 4.9.2에서는 props 데이터 객체가 미니 프로그램 프레임워크에 의해 실수로 지워지는 것으로 나타났습니다.

0.1.6

• npm 패키지를 0.1.6으로 동기적으로 업데이트

0.1.5

• toJSWithGetter 인터페이스를 최적화하고 성능을 다시 2배 향상시킵니다.
• 디렉터리를 조정하고 npm 패키지를 게시합니다.

0.1.4

• 트리거링 성능을 크게 향상시키기 위해 diff 프로세스를 추가했습니다.

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

특허

MIT