wenaox
1.0.0
مكتبة إدارة حالة خفيفة الوزن وعالية الأداء لبرامج WeChat mini (تحتوي بالفعل على العديد من المشاريع عبر الإنترنت)
该库我已不再维护，但需要的话可以提pr或者各自fork单独修改
عند تطوير برامج صغيرة في العمل، وجدت أن الاتصال بين المكونات أو الاتصال عبر الصفحات من شأنه أن يفسد البرنامج ويجعل من الصعب للغاية صيانته وتوسيعه. لم يكن أداء setData جيدًا جدًا وأهدر الكثير من الموارد لقد قمت بتغليف wenaox للاستخدام، وقررت أن أفتحه ليستخدمه الجميع. إذا كان لديك أي أسئلة أو اقتراحات، فنحن نرحب بك لتقديم المشكلات والعلاقات العامة إذا كنت تعتقد أنها جيدة، فيمكنك إعطائها نجمة وتشجيعها it2333
على الرغم من أنه يمكن استيراده مباشرة، فمن المستحسن استخدام npm للتثبيت والتطوير، وهو أمر مريح للغاية.
npm i -S wenaox
or
yarn add wenaoxحول كيفية بناء npm للبرامج الصغيرة
قم بإنشاء store.js جديد
import { Store } from "wenaox" ;
//数据
const state = {
count : 0 ,
} ;
//方法
const methods = {
//修改state的方法(只允许通过syncs的方法进行修改)
syncs : {
addCount ( state , payload ) {
state . count = state . count + 1 ;
} ,
} ,
//包含副作用的方法
asyncs : {
asyncAddCount ( payload , rootState ) {
setTimeout ( ( ) => {
this . addCount ( c ) ;
} ) ;
} ,
} ,
} ;
//注册store
const store = new Store ( { state , methods } ) ;تتم طباعة الحالة والأساليب في المتجر على النحو التالي:
{
"state" : { "count" : 0 } ,
"methods" : { "addCount" : fn , "asyncAddCount" : fn }
//略
} في الممارسة العملية، في البرامج الصغيرة والمتوسطة والكبيرة، سيكون هناك العديد من الحالات والأساليب المشتركة. إذا تم تحديدها جميعًا معًا، فسيكون الأمر مربكًا للغاية. لذلك، يتم توفير آلية متعددة التحكم، والتي يمكن تقسيمها وفقًا للصفحات أو الوظائف .
// 下面是多 contro 的注册写法
const store = new Store ( { controA : { state , methods } } ) ;سيقوم المتجر بالتمييز التفصيلي بين حالة المتجر وطرقه من خلال اسم متغير التحكم:
{
"state" : { "controA" : { "count" : 0 } } ,
"methods" : { "controA" : { "addCount" : fn , "asyncAddCount" : fn } }
//略
} //app.js
import { Provider } from "wenaox" ;
import store from "xxx路径/store" ;
const appConfig = {
//some config
} ;
App ( Provider ( store ) ( appConfig ) ) ; -ربط الحالة والأساليب في page.js
import { orm } from 'wenaox' ;
// 返回需要的state和methods
const mapState = state => ( {
count : state . count ,
} ) ;
const mapMethods = methods => ( {
addCount : methods . addCount ,
asyncAddCount : methods . asyncAddCount ,
} ) ;
const pageConfig = {
//some config
} ;
// 使用orm连接
Page ( orm ( mapState , mapMethods ) ( pageConfig ) ) ; < view class =" count " > count </ view >
< button bindtap =" addCount " > count + 1 </ button >
< button bindtap =" asyncAddCount " > async count + 1 </ button >التغييرات تحدث بنقرة زر واحدة! عداد بسيط!
وبما أن السمات الموجودة في البرنامج المصغر لا تميز بين المكونات والصفحات، فقد كتبت طريقة أخرى للمكونات المخصصة وهي ormComp.
لذا، إذا كنت تستخدمه في مكون مخصص، فستحتاج فقط إلى استبدال orm في js بـ ormComp.
Component ( ormComp ( mapState , mapMethods ) ( compConfig ) ) ; مع wenaox، لا داعي للقلق بشأن مزامنة البيانات عبر الصفحات، حيث ستتم مزامنة التعديلات التي يتم إجراؤها في أي مكان مع المكان الذي يتم استخدامها فيها [يقتصر على الصفحة/المكون الذي يتم عرضه]
وذلك لأن wenaox لا يقوم بتحديث الصفحة المخفية في حزمة الصفحات، ولكنه ينتظر حدث العرض قبل إعادة التحديث، وهذا من أجل أداء أفضل!
قم بتقديم regeneratorRuntime في الرأس لاستخدام async/await
import { regeneratorRuntime } from 'wenaox'
const methods = {
// ...略
asyncs: {
async asyncAddCount(payload, rootState) {
await new Promise(resolve => {
setTimeout(resolve, 2000);
});
this.addCount(1);
},
},
};
بعد استخدام المزامنة/الانتظار، سيتم إنشاء متغير التحميل تلقائيًا.
{
"loading" : state . loading . asyncAddCount
}يمكن تقديمه في MapState، ولم تعد بحاجة إلى كتابة التحميل يدويًا!! بالطبع، إذا لم تستخدمه، إذا لم تقم بإدخال متغير التحميل المقابل، فلن يقوم wenaox بتحديث التحميل المقابل لتجنب ذلك فقدان الأداء .
من أجل الراحة، توفر wenaox تطوير واستخدام البرامج الوسيطة، وفيما يلي البرامج الوسيطة للسجل الخاصة بـ wenaox
تأكد من تدفق جميع البرامج الوسيطة قبل تحديث البيانات
const log = ( store ) => ( next ) => ( fn , payload ) => {
console . group ( "改变前：" , store . state ) ;
next ( fn , payload ) ;
console . log ( "改变后：" , store . state ) ;
console . groupEnd ( ) ;
} ; يمكن للبرنامج المصغر تخصيص شريط التبويب من خلال wenaox، ويمكنك تغيير عدد علامات التبويب في الأسفل وطريقة القفز في أي وقت.
جميع التفاصيل موضحة أيضًا في الأمثلة أدناه
عداد
معهد ماساتشوستس للتكنولوجيا
