wechat weapp mobx

Pengikatan mobx program mini WeChat (wechat weapp mobx)

Alat yang ampuh untuk komunikasi antar halaman

Tambahkan driver lapisan data mobx ke applet Anda

Versi saat ini: 0.2.0

Tergantung pada versi mobx: 4.9.2

Memasang

Metode 1: paket npm (disarankan)

Program mini sudah mendukung penggunaan npm untuk menginstal paket pihak ketiga. Untuk detailnya, lihat dukungan npm.

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

Metode 2: Instalasi manual

1. Kloning atau unduh pustaka kode secara lokal:

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

2. Salin file dist/mobx.js , dist/diff.js dan dist/observer.js langsung ke proyek program mini, misalnya (misalkan di bawah ini kita menginstal semua paket pihak ketiga di direktori libs):

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

   Perintah di atas menyalin paket ke direktori <小程序根目录>/libs program mini.

3. Buat direktori <小程序根目录>/stores untuk menyimpan lapisan data.

Gunakan (menggunakan sintaks ES5)

1. Buat toko 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. Mengikat peristiwa tautan halaman

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

   Setelah menyelesaikan dua langkah di atas, Anda dapat mengaksesnya menggunakan props.todoStore di wxml, dan tautan data akan bekerja secara otomatis.

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

4. Tautan data otomatis

Data di penyimpanan dapat diakses secara bersamaan di seluruh halaman, dan ketika data diperbarui, halaman tersebut akan diperbarui secara otomatis. Ini menghemat banyak kode logika.

digunakan pada komponen

• Mengikat peristiwa tautan komponen

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

Contoh sintaks ES6

Silakan cek contohnya langsung: wechat-weapp-mobx-todos-npm

Catatan pembaruan versi

0.2.1

• Mendukung penggunaan sintaks observerComponment dalam komponen

0.2.0

• Pengoptimalan: Suntikkan props ke page.data terlebih dahulu untuk menghindari rendering halaman menjadi terlalu lambat.

0.1.9

• (Stabilitas) Setelah verifikasi selama jangka waktu tertentu, proyek ini secara stabil mendukung mobx versi 4.9.2.
• Optimasi: Memperbaiki masalah pengamat yang mungkin menyebabkan masalah tautan.
• Optimasi: Sesuaikan urutan eksekusi panggilan balik Unload.
• Pengguna 0.1.8 disarankan untuk meningkatkan ke 0.1.9.

0.1.8

• (Utama) Secara resmi mengupgrade mobx ke versi 4.9.2, mendukung sintaks dekorator mobx terbaru.
• Dukungan uji coba untuk sintaks ES6. Jika ada bug, harap laporkan tepat waktu.

Terima kasih kepada Danney atas kontribusinya.

0.1.7 (Jangan gunakan)

• Mencoba memutakhirkan mobx ke versi 4.9.2, menambahkan sintaks dekorator baru.
• Namun, ditemukan bahwa di bawah mobx versi 4.9.2, objek data props akan dihapus secara tidak sengaja oleh kerangka program mini.

0.1.6

• Perbarui paket npm secara bersamaan ke 0.1.6

0.1.5

• Optimalkan antarmuka toJSWithGetter dan tingkatkan kinerja sebanyak 2 kali lagi.
• Sesuaikan direktori dan publikasikan paket npm.

0.1.4

• Tambahkan proses diff untuk meningkatkan kinerja pemicuan

0.1.3

• Rekonstruksi mekanisme autorun untuk meningkatkan kinerja pemicu.

0.1.2

• Refaktorkan logika toJS untuk mendukung tampilan nilai komputasi yang disarangkan.
• Mendukung observasi nilai properti props yang ada, dan modifikasi dapat memicu pembaruan tampilan.

0.1.1

• Optimalkan kinerja dan hindari duplikat objek mobx toJS.
• Tambahkan dukungan nomor versi.

0.1.0

• Menerapkan dukungan inti mobx.

Contoh (integrasi npm, demonstrasi sintaksis ES6)

Untuk contoh penggunaan terperinci, silakan merujuk ke: wechat-weapp-mobx-todos-npm

Untuk versi pengujian sebenarnya, harap kloning repo berikut dan gunakan alat pengembangan program mini untuk mengaktifkan pratinjau:

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

Contoh (instalasi manual)

Untuk contoh penggunaan terperinci, silakan merujuk ke: wechat-weapp-mobx-todos

Untuk versi pengujian sebenarnya, harap kloning repo berikut dan gunakan alat pengembangan program mini untuk mengaktifkan pratinjau:

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

Kasus aktual

Ballu - alat penilaian bola basket waktu nyata

Komentar: Proyek ini adalah program kecil yang sangat "kompleks". Banyak halaman proyek perlu menggunakan websocket untuk menyinkronkan pembaruan data dengan server. Setelah menggunakan wechat-weapp-mobx sebagai lapisan driver data secara mendalam, masalah status data sinkronisasi dapat dengan mudah diselesaikan.

Pengembangan (terbitkan versi npm)

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

LISENSI

MIT