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 callback
• แนะนำให้ผู้ใช้ 0.1.8 อัปเกรดเป็น 0.1.9

0.1.8

• (หลัก) อัปเกรด mobx เป็นเวอร์ชัน 4.9.2 อย่างเป็นทางการ รองรับไวยากรณ์มัณฑนากร mobx ล่าสุด
• การสนับสนุนการทดลองใช้ไวยากรณ์ ES6 หากมีข้อบกพร่อง โปรดรายงานให้ทันเวลา

ขอบคุณ Danney สำหรับการสนับสนุนของเขา

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

• เพิ่มกระบวนการ diff เพื่อปรับปรุงประสิทธิภาพการทริกเกอร์อย่างมาก

0.1.3

• สร้างกลไกการทำงานอัตโนมัติใหม่เพื่อปรับปรุงประสิทธิภาพการทริกเกอร์

0.1.2

• รีแฟคเตอร์ตรรกะ toJS เพื่อรองรับการแสดงค่าที่คำนวณแบบซ้อน
• รองรับการสังเกตค่าคุณสมบัติที่มีอยู่ของอุปกรณ์ประกอบฉาก และการปรับเปลี่ยนสามารถกระตุ้นการอัปเดตมุมมองได้

0.1.1

• เพิ่มประสิทธิภาพและหลีกเลี่ยงวัตถุ mobx toJS ที่ซ้ำกัน
• เพิ่มการรองรับหมายเลขเวอร์ชัน

0.1.0

• ใช้การสนับสนุนหลักของ mobx

ตัวอย่าง (การรวม npm, การสาธิตไวยากรณ์ ES6)

สำหรับตัวอย่างการใช้งานโดยละเอียด โปรดดูที่: wechat-weapp-mobx-todos-npm

สำหรับเวอร์ชันทดสอบจริง โปรดโคลน repo ต่อไปนี้และใช้เครื่องมือพัฒนามินิโปรแกรมเพื่อเปิดใช้งานการแสดงตัวอย่าง:

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

ตัวอย่าง (การติดตั้งด้วยตนเอง)

สำหรับตัวอย่างการใช้งานโดยละเอียด โปรดดูที่: wechat-weapp-mobx-todos

สำหรับเวอร์ชันทดสอบจริง โปรดโคลน repo ต่อไปนี้และใช้เครื่องมือพัฒนามินิโปรแกรมเพื่อเปิดใช้งานการแสดงตัวอย่าง:

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

กรณีที่เกิดขึ้นจริง

Ballu - เครื่องมือให้คะแนนบาสเก็ตบอลแบบเรียลไทม์

หมายเหตุ: โครงการนี้เป็นโปรแกรมขนาดเล็กที่ "ซับซ้อน" มาก หลายหน้าของโครงการจำเป็นต้องใช้ websocket เพื่อประสานการอัปเดตข้อมูลกับเซิร์ฟเวอร์ หลังจากใช้ wechat-weapp-mobx เป็นเลเยอร์ไดรเวอร์ข้อมูลในเชิงลึก ปัญหาของสถานะข้อมูล การซิงโครไนซ์สามารถแก้ไขได้อย่างง่ายดาย

การพัฒนา (เผยแพร่เวอร์ชัน npm)

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

ใบอนุญาต

เอ็มไอที