wenaox
1.0.0
ไลบรารีการจัดการสถานะน้ำหนักเบาและประสิทธิภาพสูงสำหรับโปรแกรมขนาดเล็กของ WeChat (มีโครงการออนไลน์หลายโครงการแล้ว)
该库我已不再维护，但需要的话可以提pr或者各自fork单独修改
เมื่อพัฒนาโปรแกรมขนาดเล็กในที่ทำงาน ฉันพบว่าการสื่อสารระหว่างคอมโพเนนต์หรือการสื่อสารข้ามเพจจะทำให้โปรแกรมยุ่งเหยิง และทำให้ยากต่อการบำรุงรักษาและขยาย ประสิทธิภาพของ setData ไม่ค่อยดีนักและสิ้นเปลืองทรัพยากรไปมาก ฉันห่อหุ้ม wenaox ไว้เพื่อการใช้งาน ฉันตัดสินใจเปิดแหล่งที่มาให้ทุกคนใช้ หากคุณมีคำถามหรือข้อเสนอแนะ คุณสามารถส่งประเด็นและประชาสัมพันธ์ได้ หากคุณคิดว่ามันดี คุณสามารถให้ดาวและให้กำลังใจได้ มัน2333
แม้ว่าจะสามารถนำเข้าได้โดยตรง แต่แนะนำให้ใช้ 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 } } ) ;ร้านค้าจะสร้างความแตกต่างโดยละเอียดระหว่างสถานะของร้านค้าและวิธีการผ่านชื่อตัวแปร contro:
{
"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 ไม่ได้อัปเดตเพจที่ซ่อนอยู่ในสแต็กเพจ แต่จะรอเหตุการณ์ onshow ก่อนที่จะอัปเดตอีกครั้ง เพื่อ ประสิทธิภาพ ที่ดีขึ้น !
แนะนำ regeneratorRuntime ในส่วนหัวเพื่อใช้ async/await
import { regeneratorRuntime } from 'wenaox'
const methods = {
// ...略
asyncs: {
async asyncAddCount(payload, rootState) {
await new Promise(resolve => {
setTimeout(resolve, 2000);
});
this.addCount(1);
},
},
};
หลังจากใช้ async/await ตัวแปรการโหลดจะถูกสร้างขึ้นโดยอัตโนมัติ
{
"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 คุณสามารถเปลี่ยนจำนวนแท็บที่ด้านล่างและวิธีการข้ามได้ตลอดเวลา
รายละเอียดทั้งหมดแสดงอยู่ในตัวอย่างด้านล่างด้วย
เคาน์เตอร์
เอ็มไอที
