wechat weapp mobx

ربط برنامج Wechat Mini mobx (wechat weapp mobx)

أداة قوية للتواصل بين الصفحات

قم بإضافة برنامج تشغيل طبقة بيانات mobx إلى التطبيق الصغير الخاص بك

الإصدار الحالي: 0.2.0

يعتمد على إصدار mobx: 4.9.2

ثَبَّتَ

الطريقة الأولى: حزمة npm (مستحسن)

يدعم البرنامج المصغر بالفعل استخدام npm لتثبيت حزم الطرف الثالث. لمزيد من التفاصيل، راجع دعم npm.

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

الطريقة الثانية: التثبيت اليدوي

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، مع إضافة صيغة ديكور جديدة.
• ومع ذلك، فقد وجد أنه في الإصدار 4.9.2 من mobx، سيتم مسح كائن بيانات الدعائم بواسطة إطار عمل البرنامج المصغر عن طريق الخطأ.

0.1.6

• قم بتحديث حزمة npm بشكل متزامن إلى 0.1.6

0.1.5

• قم بتحسين واجهة toJSWithGetter وقم بتحسين الأداء مرتين مرة أخرى.
• اضبط الدليل وانشر حزمة npm.

0.1.4

• أضف عملية فرق لتحسين أداء التشغيل بشكل كبير

0.1.3

• إعادة بناء آلية التشغيل التلقائي لتحسين أداء التشغيل.

0.1.2

• قم بإعادة بناء منطق toJS لدعم عرض القيمة المحسوبة المتداخلة.
• يدعم مراقبة قيم الخصائص الموجودة للدعائم، ويمكن أن تؤدي التعديلات إلى تحديثات العرض.

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 - أداة لتسجيل أهداف كرة السلة في الوقت الحقيقي

تعليق: هذا المشروع عبارة عن برنامج صغير "معقد" للغاية. تحتاج العديد من صفحات المشروع إلى استخدام websocket لمزامنة تحديثات البيانات مع الخادم. بعد استخدام wechat-weapp-mobx كطبقة برنامج تشغيل البيانات، تظهر مشكلة حالة البيانات يمكن حل المزامنة بسهولة. تم إطلاق المشروع النهائي بنجاح.

التطوير (نشر نسخة npm)

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

رخصة

معهد ماساتشوستس للتكنولوجيا