BeautyWe.js Ò»Ì×רעÓÚ΢ÐÅС³ÌÐòµÄ¿ª·¢·¶Ê½ - ǰ¶Ë´ó±¦½£ - SegmentFault ˼·ñ
¹ÙÍø£ºbeautywejs com Repo: beautywe Ò»¸ö¼òµ¥µÄ½éÉÜ BeautyWe js ÊÇʲô£¿ ËüÊÇÒ»Ì×רעÓÚ΢ÐÅС³ÌÐòµÄÆóÒµ¼¶¿ª·¢·¶Ê½£¬ËüµÄÔ¸¾°ÊÇ£º ÈÃÆóÒµ¼¶µÄ΢ÐÅС³ÌÐòÏîÄ¿ÖеĴúÂ룬¸ü¼Ó¼òµ¥¡¢Æ¯ÁÁ¡£ ΪʲôҪ
¹ÙÍø£ºbeautywejs.com
Repo: beautywe
Ò»¸ö¼òµ¥µÄ½éÉÜ
BeautyWe.js ÊÇʲô£¿
ËüÊÇÒ»Ì×רעÓÚ΢ÐÅС³ÌÐòµÄÆóÒµ¼¶¿ª·¢·¶Ê½£¬ËüµÄÔ¸¾°ÊÇ£º
ÈÃÆóÒµ¼¶µÄ΢ÐÅС³ÌÐòÏîÄ¿ÖеĴúÂ룬¸ü¼Ó¼òµ¥¡¢Æ¯ÁÁ¡£
ΪʲôҪÕâÑùÃüÃûÄØ£¿
Write beautiful code for wechat mini program by the beautiful we!
¡¸We¡¹ ¼ÈÊÇÎÒÃÇµÄ We£¬Ò²ÊÇ΢ÐÅµÄ We£¬Both beautiful£¡
ÄÇôËüÓÐʲôÂôµãÄØ£¿
רעÓÚ΢ÐÅС³ÌÐò»·¾³£¬Ð´ÔÖÔζµÄ΢ÐÅС³ÌÐò´úÂë¡£ ÓÉÓÚֻרעÓÚ΢ÐÅС³ÌÐò£¬ËüµÄÔ´ÂëÒ²ºÜ¼òµ¥¡£ ²å¼þ»¯µÄ±à³Ì·½Ê½£¬Èø´ÔÓÂß¼¸üÈÝÒ×·â×°¡£ÔÙ¼ÓÉÏһЩÅäÌ×ÉèÊ©£º
һЩ¹Ù·½²å¼þ¡£ Ò»Ì׿ªÏä¼´Ó㬰üº¬Á˹¤³Ì»¯¡¢ÏîÄ¿¹æ·¶ÒÔ¼°Î¢ÐÅС³ÌÐò»·¾³¶ÀÌØÎÊÌâ½â¾ö·½°¸µÄ¿ò¼Ü¡£ Ò»¸öCLI¹¤¾ß£¬°ïÄã¿ìËÙ´´½¨Ó¦Óã¬Ò³Ã棬×é¼þµÈ¡£ËüÓÉÒÔϼ¸²¿·Ö×é³É£º
Ò»¸ö²å¼þ»¯µÄºËÐÄ - BeautyWe Core¶Ô App¡¢Page ½øÐгéÏóºÍ°ü×°£¬±£³Ö´«Í³Î¢ÐÅС³ÌÐò¿ª·¢×ËÊÆ£¬Í¬Ê±¿ª·Å²¿·ÖÔÉúÄÜÁ¦£¬ÈÃÆä¾ßÓС¸¿É²å¼þ»¯¡¹µÄÄÜÁ¦¡£ һЩ¹Ù·½²å¼þ ¡ª BeautyWe Plugins
µÃÒæÓÚ Core µÄ¡¸¿É²å¼þ»¯¡¹ÌØÐÔ£¬·â×°¸´ÔÓÂß¼£¬ÊµÏֿɲå°Î¡£¹Ù·½¶ÔÓÚ³£¼ûµÄÐèÇóÌṩÁËһЩ²å¼þ£ºÈçÔöÇ¿´æ´¢¡¢·¢²¼/¶©ÔÄ¡¢×´Ì¬»ú¡¢Logger¡¢»º´æ²ßÂԵȡ£ Ò»Ì׿ªÏä¼´ÓõÄÏîÄ¿¿ò¼Ü - BeautyWe Framework
ÃèÊöÁËÒ»ÖÖÏîÄ¿µÄ×éÖ¯ÐÎʽ£¬¿ªÏä¼´Ó㬼¯³ÉÁË
BeautyWe Core £¬²¢ÇÒÌṩÁËÈ磺ȫ¾Ö´°¿Ú¡¢¿ª·¢¹æ·¶¡¢¶à»·¾³¿ª·¢¡¢È«¾ÖÅäÖá¢NPM µÈ½â¾ö·½°¸¡£
Ò»¸öCLI¹¤¾ß - BeautyWe Cli
Ìṩ¿ìËÙ´´½¨Ó¦Óá¢Ò³Ãæ¡¢²å¼þ£¬ÒÔ¼°ÏîÄ¿¹¹½¨¹¦ÄܵÄÃüÁîÐй¤¾ß¡£²¢ÇÒ»¹Ö§³Ö×Ô¶¨ÒåµÄ´´½¨Ä£°å¡£
Ò»¸ö¼òµ¥µÄÀý×Ó
ÏÂÔØ

Óà BeautyWe °ü×°ÄãµÄÓ¦ÓÃ

Ö®ºó£¬Äã¾ÍÄÜʹÓà BeautyWe Plugin ÌṩµÄÄÜÁ¦ÁË¡£

¿ª·ÅÔÉúApp/Page£¬Ö§³Ö²å¼þ»¯
new BtApp({...}) µÄÖ´Ðнá¹ûÊǶÔÔÉúµÄÓ¦ÓýøÐаü×°£¬ÆäÖаüº¬ÁË¡¸²å¼þ»¯¡¹µÄ´¦Àí£¬È»ºó·µ»ØÒ»¸öеÄʵÀý£¬Õâ¸öʵÀýÊÊÅäÔÉúµÄ App() ·½·¨¡£
ÏÂÃæÀ´½²½²¡¸²å¼þ»¯¡¹µ½µ××öÁËʲôÊÂÇé¡£
Ê×ÏÈ£¬²å¼þ»¯¿ª·ÅÁËÔÉú App µÄËÄÖÖÄÜÁ¦£º
Data Óò
°Ñ²å¼þµÄ Data ÓòºÏ²¢µ½ÔÉú App µÄ Data ÓòÖУ¬ÕâÒ»¿éºÜÈÝÒ×Àí½â¡£
ÔÉú¹³×Óº¯Êý
ʹÔÉú¹³×Óº¯Êý£¨Èç onShow, onLoad£©¿É²å¼þ»¯¡£ÈÃÔÉúAppÓë¶à¸ö²å¼þ¿ÉÒÔͬʱ¼àÌýͬһ¸ö¹³×Óº¯Êý¡£ÈçºÎ¹¤×÷µÄ£¬ÏÂÃæ»áϸ˵¡£
ʼþ¹³×Óº¯Êý
ʹʼþ¹³×Óº¯Êý£¨Óë view ²ã½»»¥µÄ¹³×Óº¯Êý£©£¬¾¡¹ÜÔÚʵÏÖÉÏÓÐһЩ²îÒ죬µ«ÊÇʵÏÖÔÀí¸ú¡¸ÔÉú¹³×Óº¯Êý¡¹Ò»ÑùµÄ¡£
×Ô¶¨Òå·½·¨
Èòå¼þÄܹ»¸øÊ¹ÓÃÕßÌṩ API¡£ÎªÁ˱£Ö¤²å¼þÌṩµÄ API ×ã¹»µÄÓÅÑÅ£¬Ö§³Öµ±µ÷Óòå¼þ API µÄʱºò£¨Èç event ²å¼þ this.event.on(...))£¬API ·½·¨ÄÚ²¿ÈÔÈ»ÄÜͨ¹ý this »ñÈ¡µ½ÔÉúʵÀý¡£
¹³×Óº¯ÊýµÄ²å¼þ»¯
ÔÉú¹³×Óº¯Êý£¬Ê¼þ¹³×Óº¯ÊýÎÒÃÇͳһ³ÆÎª¡¸¹³×Óº¯Êý¡¹¡£
¶ÔÓÚÿһ¸ö¹³×Óº¯Êý£¬ÄÚ²¿ÊÇά»¤Ò»¸öÒÔ Series Promise ·½Ê½Ö´ÐеÄÖ´ÐжÓÁС£
ÒÔ onShow ΪÀý£¬½«»áÒÔÕâÑùµÄÐÎʽִÐУº
native.onShow ¡ú pluginA.onShow ¡ú pluginB.onShow ¡ú ...
ÏÂÃæÉîÈëһϲå¼þ»¯µÄÔÀí£º

¹¤×÷ÔÀíÊÇÕâÑùµÄ£º
¾¹ý new BtApp(...) °ü×°£¬ËùÓеĹ³×Óº¯Êý£¬¶¼»áÓÐÒ»¸ö¶ÀÁ¢µÄÖ´ÐжÓÁУ¬
Ê×ÏÈ»á°ÑÔÉúµÄ¸÷¸ö¹³×Óº¯Êý push µ½¶ÔÓ¦µÄ¶ÓÁÐÖС£È»ºóÿ use ²å¼þµÄʱºò£¬¶¼»á·Ö½â²å¼þµÄ¹³×Óº¯Êý£¬Íù¶ÔÓ¦µÄ¶ÓÁÐ push¡£
µ± Native App£¨ÔÉú£©´¥·¢Ä³¸ö¹³×ÓµÄʱºò£¬BtApp »áÒÔ Promise Series µÄÐÎʽ°´ÑÐòÖ´ÐжÔÓ¦¶ÓÁÐÀïÃæµÄº¯Êý¡£
ÌØÊâµÄ£¬onLaunch ºÍ onLoad µÄÖ´ÐжÓÁÐÖУ¬»áÔÚ¶ÓÁж¥²¿²åÈëÒ»¸ö³õʼ»¯µÄÈÎÎñ£¨initialize£©£¬Ëü»áÒÔͬ²½µÄ·½Ê½°´ÑÐòÖ´ÐÐ Initialize Queue ÀïÃæµÄº¯Êý¡£ÕâÕýÊDzå¼þÉúÃüÖÜÆÚº¯ÊýÖÐµÄ plugin.initialize¡£
ÕâÖÖÉè¼ÆÄÜÌṩÒÔϹ¦ÄÜ£º
¿É²å¼þ»¯¡£
Ö»ÐèÒªÍù¶ÔÓ¦¹³×Óº¯ÊýµÄʼþ¶ÓÁÐÖвåÈëÈÎÎñ¡£
Ö§³ÖÒì²½¡£
ÓÉÓÚÊÇÒÔ Promise Series ·½Ê½ÔËÐе쬯äÖÐÒ»¸öÈÎÎñ·µ»ØÒ»¸ö Promise£¬ÏÂÒ»¸öÈÎÎñ»áµÈ´ýÕâ¸öÈÎÎñÍê³ÉÔÙ¿ªÊ¼¡£Èç¹û·¢Éú´íÎ󣬻áÁ÷תµ½ÔÉúµÄ onError() ÖС£
½â¾öÁË΢ÐÅС³ÌÐò app.js ÖÐ getApp() === undefinded ÎÊÌâ¡£
Ôì³ÉÕâ¸öÎÊÌ⣬±¾ÖÊÊÇÒòΪ App() µÄʱºò£¬ÔÉúʵÀýδ´´½¨¡£µ«ÊÇÓÉÓÚ Promise ÔÚ event loop ÖÐÊÇÒ»¸ö΢ÈÎÎñ£¬±»×¢²áÔÚÏÂÒ»´ÎÑ»·¡£ËùÒÔ Promise Ö´ÐеÄʱºò App() ÔçÒѾÍê³ÉÁË¡£
һЩ¹Ù·½²å¼þ
BeautyWe ¹Ù·½ÌṩÁËһϵÁеIJå¼þ£º
ÔöÇ¿´æ´¢: Storage
Êý¾ÝÁÐ±í£ºList Page
»º´æ²ßÂÔ£ºCache
ÈÕÖ¾£ºLogger
ʼþ·¢²¼/¶©ÔÄ£ºEvent
״̬»ú£ºStatus
ËüÃǵÄʹÓúܼòµ¥£¬ÄÄÀïÐèÒª²åÄÄÀï¡£
ÓÉÓÚÆª·ùµÄÔÒò£¬ÏÂÃæÌô¼¸¸ö±È½ÏÓÐȤµÄÀ´½²½²£¬¸ü¶àµÄ¿ÉÒÔ¿´¿´¹Ù·½Îĵµ£ºBeautyWe
ÔöÇ¿´æ´¢ Storage
¸Ã¹¦ÄÜÓÉ @beautywe/plugin-storage Ìṩ¡£
ÓÉÓÚ΢ÐÅС³ÌÐòÔÉúµÄÊý¾Ý´æ´¢ÉúÃüÖÜÆÚ¸úС³ÌÐò±¾ÉíÒ»Ö£¬¼´³ýÓû§Ö÷¶¯É¾³ý»ò³¬¹ýÒ»¶¨Ê±¼ä±»×Ô¶¯ÇåÀí£¬·ñÔòÊý¾Ý¶¼Ò»Ö±¿ÉÓá£
ËùÒԸòå¼þÔÚ wx.getStorage/setStorage µÄ»ù´¡ÉÏ£¬ÌṩÁËÁ½ÖÖÀ©Õ¹ÄÜÁ¦£º
¹ýÆÚ¿ØÖÆ
°æ±¾¸ôÀë
һЩ¼òµ¥µÄÀý×Ó
°²×°
import { BtApp } from '@beautywe/core';
import storage from '@beautywe/plugin-storage';
const app = new BtApp();
app.use(storage());
¹ýÆÚ¿ØÖÆ
// 7Ììºó¹ýÆÚ
app.storage.set('name', 'jc', { expire: 7 })£»
°æ±¾¸ôÀë
app.use({ appVersion: '0.0.1' });
app.set('name', 'jc');
// ·µ»Ø jc
app.get('name');
// µ±°æ±¾¸üкó
app.use({ appVersion: '0.0.2' });
// ·µ»Ø undefined;
app.get('name');
¸ü¶àµÄ²é¿´ @beautywe/plugin-storage ¹Ù·½Îĵµ
Êý¾ÝÁбí List Page
¶ÔÓÚÊ®·Ö³£¼ûµÄÊý¾ÝÁбí·ÖÒ³µÄÒµÎñ³¡¾°£¬@beautywe/plugin-listpage ÌṩÁËÒ»Ì×´ò°ü·½°¸£º
Âú×ã³£Óá¸Êý¾ÝÁбí·ÖÒ³¡¹µÄÒµÎñ³¡¾°
Ö§³Ö·ÖÒ³
Ö§³Ö¶à¸öÊý¾ÝÁбí
×Ô¶¯²¶×½ÏÂÀÖØÔØ£ºonPullDownRefresh
×Ô¶¯²¶×½ÉÏÀ¼ÓÔØ£ºonReachBottom
×Ô´øÇëÇóËø£¬·ÀÖ¹ÅÁ½ðÉÊÏÊÖ¶¶Óû§
¼òµ¥ÓÅÑÅµÄ API
Ò»¸ö¼òµ¥µÄÀý×Ó£º
import BeautyWe from '@beautywe/core';
import listpage from '@beautywe/plugin-listpage';
const page = new BeautyWe.BtPage();
// ʹÓà listpage ²å¼þ
page.use(listpage({
lists: [{
name: 'goods', // Êý¾ÝÃû
pageSize: 20, // ÿҳ¶àÉÙÌõÊý¾Ý£¬Ä¬ÈÏ 10
// ÿһҳµÄÊý¾ÝÔ´£¬Ã»´Î¼ÓÔØÒ³ÃæÊ±£¬»áµ÷Óú¯Êý£¬È»ºóÈ¡·µ»ØµÄÊý¾Ý¡£
fetchPageData({ pageNo, pageSize }) {
// »ñÈ¡Êý¾Ý
return API.getGoodsList({ pageNo, pageSize })
// ÓÐʱºò£¬ÐèÒª¶Ô·þÎñÆ÷µÄÊý¾Ý½øÐд¦Àí£¬dataCooker ÊÇÄ㶨ÒåµÄº¯Êý¡£
.then((rawData) => dataCooker(rawData));
},
}],
enabledPullDownRefresh: true, // ¿ªÆôÏÂÀÖØÔØ£¬ ĬÈÏ false
enabledReachBottom: true, // ¿ªÆôÉÏÀ¼ÓÔØ£¬ ĬÈÏ false
}));
// goods Êý¾Ý»á±»¼ÓÔØµ½£¬goods ΪÉÏÃæ¶¨ÒåµÄ name
// this.data.listPage.goods = {
// data: [...], // ÊÓͼ²ã£¬Í¨¹ý¸Ã×Ö¶ÎÀ´»ñÈ¡¾ßÌåµÄÊý¾Ý
// hasMore: true, // ÊÓͼ²ã£¬Í¨¹ý¸Ã×Ö¶ÎÀ´Ê¶±ðÊÇ·ñÓÐÏÂÒ»Ò³
// currentPage: 1, // ÊÓͼ²ã£¬Í¨¹ý¸Ã×Ö¶ÎÀ´Ê¶±ðµ±Ç°µÚ¼¸Ò³
// totalPage: undefined,
// }
Ö»ÐèÒª¸æËß listpage ÈçºÎ»ñÈ¡Êý¾Ý£¬Ëü»á×Ô¶¯´¦Àí¡¸ÏÂÀÖØÔØ¡¹¡¢¡¸ÉÏÀ·Ò³¡¹µÄ²Ù×÷£¬È»ºó°ÑÊý¾Ý¸üе½ this.data.listPage.goods Ï¡£
View ²ãÖ»ÐèÒªÃèÊöÊý¾ÝÔõôչʾ£º
...
ûÓиü¶àÁË
listpage »¹Ö§³Ö¶àÊý¾ÝÁбíµÈÆäËû¸ü¶àÅäÖã¬ÏêÇé¿´£º@beautywe/plugin-listpage
»º´æ²ßÂÔ Cache
@beautywe/plugin-cache ÌṩÁËÒ»¸ö΢ÐÅС³ÌÐò¶Ë»º´æ²ßÂÔ£¬Æäµ×²ãÓÉ super-cache Ìṩ֧³Ö¡£
ÌØÐÔ
ÌṩһÌס¸·þÎñ¶Ë½Ó¿ÚºÄʱÂý£¬µ«¼ÓÔØÐÔÄÜÒªÇó¸ß¡¹³¡¾°µÄ½â¾ö·½°¸
Âú×ã×î»ù±¾µÄ»º´æÐèÇ󣬶ÁÈ¡£¨get£©ºÍ±£´æ£¨set£©
Ö§³ÖÕë¶Ô»º´æ½øÐÐÂß¼´úÀí
Áé»î¿ÉÅäÖõÄÊý¾Ý´æ´¢·½Ê½
How it work
Ò»°ãµÄÇëÇóÊý¾ÝµÄÐÎʽÊÇ£¬Ò³Ãæ¼ÓÔØµÄʱºò£¬´Ó·þÎñ¶Ë»ñÈ¡Êý¾Ý£¬È»ºóµÈ´ýÊý¾Ý·µ»ØÖ®ºó£¬½øÐÐÒ³ÃæäÖȾ£º

µ«ÕâÖÖģʽ£¬»áÊܵ½·þÎñ¶Ë½Ó¿ÚºÄʱ£¬ÍøÂç»·¾³µÈÒòËØÓ°Ïìµ½¼ÓÔØÐÔÄÜ¡£
¶ÔÓÚ¼ÓÔØÐÔÄÜÒªÇó¸ßµÄÒ³Ãæ£¨ÈçÊ×Ò³£©£¬Ò»°ãµÄ Web ¿ª·¢ÎÒÃÇÓкܶà½â¾ö·½°¸£¨Èç·þÎñ¶ËäÖȾ£¬·þÎñ¶Ë»º´æ£¬SSR µÈ£©¡£
µ«ÊÇÒ²ÓÐһЩ»·¾³²»ÄÜʹÓÃÕâÖÖ¼¼Êõ£¨Èç΢ÐÅС³ÌÐò£©¡£
Super Cache ÌṩÁËÒ»¸öÖмäÊý¾Ý»º´æµÄ½â¾ö·½°¸£º

˼·£º
µ±ÄãÐèÒª»ñȡһ¸öÊý¾ÝµÄʱºò£¬Èç¹ûÓлº´æ£¬ÏȰѾɵÄÊý¾Ý¸øÄã¡£
È»ºóÔÙ´Ó·þÎñ¶Ë»ñȡеÄÊý¾Ý£¬Ë¢Ð»º´æ¡£
Èç¹ûÒ»¿ªÊ¼Ã»Óлº´æ£¬ÔòÇëÇó·þÎñ¶ËÊý¾Ý£¬ÔÙ°ÑÊý¾Ý·µ»Ø¡£
ÏÂÒ»´ÎÇëÇ󻺴棬´ÓµÚÒ»²½¿ªÊ¼¡£
ÕâÖÖ½â¾ö·½°¸£¬ÉáÆúÁËÒ»µãÊý¾ÝµÄʵʱÐÔ£¨·ÇµÚÒ»´ÎÇëÇó£¬Ö»ÄÜ»ñÈ¡ÉÏÒ»´Î×îÐÂÊý¾Ý£©£¬´ó´óÌá¸ßÁËǰ¶ËµÄ¼ÓÔØÐÔÄÜ¡£
Êʺϵij¡¾°£º
Êý¾ÝʵʱÐÔÒªÇ󲻸ߡ£
·þÎñ¶Ë½Ó¿ÚºÄʱ³¤¡£
ʹÓÃ
import { BtApp } from '@beautywe/core';
import cache from '@beautywe/plugin-cache';
const app = new BtApp();
app.use(cache({
adapters: [{
key: 'name',
data() {
return API.fetch('xxx/name');
}
}]
}));
¼ÙÉè API.fetch('xxx/name') ÊÇÇëÇó·þÎñÆ÷½Ó¿Ú£¬·µ»ØÊý¾Ý£ºdata_from_server
ÄÇô£º
app.cache.get('name').then((value) => {
// value: 'data_from_server'
});
¸ü¶àµÄÅäÖã¬ÏêÇé¿´£º@beautywe/plugin-cache
ÈÕÖ¾ Logger
ÓÉ @beautywe/logger-plugin ÌṩµÄÒ»¸öÇáÁ¿µÄÈÕÖ¾´¦Àí·½°¸£¬ËüÖ§³Ö£º
¿É¿ØµÄ log level
×Ô¶¨Òåǰ׺
ÈÕ־ͳһ´¦Àí
ʹÓÃ
import { BtApp } from '@beautywe/core';
import logger from '@beautywe/plugin-logger';
const page = new BtApp();
page.use(logger({
// options
}));
API
page.logger.info('this is info');
page.logger.warn('this is warn');
page.logger.error('this is error');
page.logger.debug('this is debug');
// Êä³ö
// [info] this is info
// [warn] this is warn
// [error] this is error
// [debug] this is debug
Level control
¿Éͨ¹ýÅäÖÃÀ´¿ØÖÆÄÄЩ level ¸Ã´òÓ¡£º
page.use(logger({
level: 'warn',
}));
ÄÇô warn ÒÔÉ쵀 log £¨info, debug£©¾Í²»»á±»´òÓ¡£¬ÕâÖÖÂú×ãÓÚ¿ª·¢ºÍÉú³É»·¾³¶Ô log µÄ²»Í¬ÐèÇó¡£
level µÈ¼¶ÈçÏ£º
Logger.LEVEL = {
error: 1,
warn: 2,
info: 3,
debug: 4,
};
¸ü¶àµÄÅäÖã¬ÏêÇé¿´£º@beautywe/plugin-logger
BeautyWe Framework
@beautywe/core ºÍ @beautywe/plugin-... ¸øÐ¡³ÌÐòÌṩÁË£º
¿ª·ÅÔÉú£¬Ö§³Ö²å¼þ»¯ ¡ª¡ª by core
¸÷ÖÖ²å¼þ ¡ª¡ª by plugins
µ«ÊÇ£¬»¹ÓкܶàµÄ¿ª·¢ÖÐʵ¼Ê»¹»áÓöµ½µÄÍ´µã£¬ÊÇÉÏÃæÁ½¸ö½â¾ö²»µ½µÄ¡£
ÈçÏîÄ¿µÄ×éÖ¯¡¢¹æ·¶¡¢¹¤³Ì»¯¡¢ÅäÖᢶ໷¾³µÈµÈ
ÕâЩ¾ÍÊÇ£¬¡¸BeautyWe Framework¡¹Òª½â¾öµÄ·¶³ë¡£
Ëü×÷ΪһÌ׿ªÏä¼´ÓõÄÏîÄ¿¿ò¼Ü£¬ÌṩÁËÕâЩ¹¦ÄÜ£º
¼¯³É BeautyWe Core
NPM Ö§³Ö
È«¾Ö´°¿Ú
È«¾Ö Page£¬Component
È«¾ÖÅäÖÃÎļþ
¶à»·¾³¿ª·¢
Example Pages
Õý³£ÏîÄ¿ÐèÒªµÄ±êÅ䣺ES2015+,sass,uglify,watch µÈ
ÒÔ¼°ÎÒÃÇÈÏΪÁ¼ºÃµÄÏîÄ¿¹æ·¶£¨eslint£¬commit log£¬Ä¿Â¼½á¹¹µÈ£©
Ò²ÊÇÓÉÓÚÆª·ùÔÒò£¬Ìô¼¸¸öÓÐȤµÄÀ´½²½²£¬¸ü¶àµÄ¿ÉÒÔ¿´¿´¹Ù·½Îĵµ£ºBeautyWe
¿ìËÙ´´½¨
Ê×ÏȰ²×° @beautywe/cli
$ npm i @beautywe/cli -g
´´½¨Ó¦ÓÃ
$ beautywe new app
> appName: my-app
> version: 0.0.1
> appid: 123456
> ÕâÑù¿ÉÒÔô:
> {
> "appName": "my-app",
> "version": "0.0.1",
> "appid": "123456"
> }
»Ø´ð¼¸¸öÎÊÌâÖ®ºó£¬ÏîÄ¿¾ÍÉú³ÉÁË£º
my-app
©À©¤©¤ gulpfile.js
©À©¤©¤ package.json
©¸©¤©¤ src
©À©¤©¤ app.js
©À©¤©¤ app.json
©À©¤©¤ app.scss
©À©¤©¤ assets
©À©¤©¤ components
©À©¤©¤ config
©À©¤©¤ examples
©À©¤©¤ libs
©À©¤©¤ npm
©À©¤©¤ pages
©¸©¤©¤ project.config.json
´´½¨Ò³Ãæ¡¢×é¼þ¡¢²å¼þ
Ò³Ãæ
Ö÷°üÒ³Ãæ£ºbeautywe new page
·Ö°üÒ³Ãæ£ºbeautywe new page --subpkg
×é¼þ
beautywe new component
²å¼þ
beautywe new plugin
×Ô¶¨ÒåÄ£°å
ÔÚ ./.templates Ŀ¼ÖУ¬´æ·Å×Å¿ìËÙ´´½¨ÃüÁîµÄ´´½¨Ä£°å£º
$ tree .templates
.templates
©À©¤©¤ component
©¦ ©À©¤©¤ index.js
©¦ ©À©¤©¤ index.json
©¦ ©À©¤©¤ index.scss
©¦ ©¸©¤©¤ index.wxml
©À©¤©¤ page
©¦ ©À©¤©¤ index.js
©¦ ©À©¤©¤ index.json
©¦ ©À©¤©¤ index.scss
©¦ ©¸©¤©¤ index.wxml
©¸©¤©¤ plugin
©¸©¤©¤ index.js
¿ÉÒÔÐÞ¸ÄÀïÃæµÄÄ£°å£¬À´Âú×ãÏîÄ¿¼¶±ðµÄ×Ô¶¨ÒåÄ£°å´´½¨¡£
È«¾Ö´°¿Ú
ÎÒÃǶ¼ÖªµÀ΢ÐÅС³ÌÐòÊÇ¡¸µ¥´°¿Ú¡¹µÄ½»»¥Æ½Ì¨£¬Ò»¸öÒ³Ãæ¶ÔÓ¦Ò»¸ö´°¿Ú¡£
¶øÔÚÒµÎñ¿ª·¢ÖУ¬ÍùÍù»áÓÐÖîÈçÕâÖÖÊöÇó£º
×Ô¶¨ÒåµÄ toast Ñùʽ
Ò³Ãæµ×²¿ copyright
È«¾ÖµÄ loading Ñùʽ
È«¾ÖµÄÐü¸¡¿Ø¼þ
......
ÉÔ΢²»ÓÅÑŵÄʵÏÖ¿ÉÒÔÊÇ·Ö±ð×ö³É¶ÀÁ¢µÄ×é¼þ£¬È»ºóÿһ¸öÒ³Ãæ¶¼ÒýÈë½øÀ´¡£
ÕâÖÖ×ö·¨£¬ÎÒÃÇ»áÓкܶàµÄÖØ¸´´úÂ룬²¢ÇÒÿ´Îн¨Ò³Ã棬¶¼ÒªÒýÈëÒ»±é£¬ºóÆÚά»¤Ò²»áºÜ·±Ëö¡£
¶ø¡¸È«¾Ö´°¿Ú¡¹µÄ¸ÅÄîÊÇ£ºÏ£ÍûËùÓÐÒ³ÃæÖ®ÉÏÓÐÒ»¿éµØ·½£¬È«¾ÖÐÔµÄÂß¼ºÍ½»»¥£¬¿ÉÒÔÍùÀïÃæ¸é¡£
global-view ×é¼þ
ÕâÊÇÒ»¸ö×Ô¶¨Òå×é¼þ£¬Ô´ÂëÔÚ /src/components/global-view
ÿ¸öÒ³ÃæµÄ wxml Ö»ÐèÒªÔÚ¶¥²ã°üÒ»²ã£º
...
ÐèҪȫ¾ÖʵÏֵĽ»»¥¡¢Ñùʽ¡¢×é¼þ£¬Ö»ÐèҪά»¤Õâ¸ö×é¼þ¾Í×ã¹»ÁË¡£
È«¾ÖÅäÖÃÎļþ
ÔÚ src/config/ Ŀ¼ÖУ¬¿ÉÒÔ´æ·Å¸÷ÖÖÈ«¾ÖµÄÅäÖÃÎļþ£¬²¢ÇÒÖ§³ÖÒÔ Node.js µÄ·½Ê½ÔËÐС££¨µÃÒæÓÚ Node.js Power ÌØÐÔ£©¡£
Èç src/config/logger.js:
const env = process.env.RUN_ENV || 'dev';
const logger = Object.assign({
prefix: 'BeautyWe',
level: 'debug',
}, {
// ¿ª·¢»·¾³µÄÅäÖÃ
dev: {
level: 'debug',
},
// ²âÊÔ»·¾³µÄÅäÖÃ
test: {
level: 'info',
},
// ÏßÉÏ»·¾³µÄÅäÖÃ
prod: {
level: 'warn',
},
}[env] || {});
module.exports.logger = logger;
È»ºóÎÒÃÇ¿ÉÒÔÕâÑù¶ÁÈ¡µ½ config ÄÚÈÝ£º
import { logger } from '/config/index';
// logger.level »á¸ù¾Ý»·¾³²»Í¬¶ø²»Í¬¡£
Beautywe Framework ĬÈÏ»á°Ñ config ¼¯³Éµ½ getApp() µÄʾÀýÖУº
getApp().config;
¶à»·¾³¿ª·¢
BeautyWe Framework Ö§³Ö¶à»·¾³¿ª·¢£¬ÆäÖÐÔ¤ÉèÁËÈýÌײßÂÔ£º
dev
test
prod
ÎÒÃÇ¿ÉÒÔͨ¹ýÃüÁîÀ´ÔËÐÐÕâÈý¸ö¹¹½¨²ßÂÔ£º
beautywe run dev
beautywe run test
beautywe run prod
ÈýÌ×»·¾³µÄ²îÒì
Beautywe Framework Ô´ÂëĬÈÏÔÚÁ½·½ÃæÊ¹ÓÃÁ˶໷¾³£º
¹¹½¨ÈÎÎñ£¨gulpfile.js/env/...£©
È«¾ÖÅäÖã¨src/config/...£©
¹¹½¨ÈÎÎñµÄ²îÒì
¹¹½¨ÈÎÎñ
˵Ã÷
dev
test
prod
clean
Çå³ýdistÎļþ
¡Ì
¡Ì
¡Ì
copy
¸´ÖÆ×ÊÔ´Îļþ
¡Ì
¡Ì
¡Ì
scripts
±àÒëJSÎļþ
¡Ì
¡Ì
¡Ì
sass
±àÒëscssÎļþ
¡Ì
¡Ì
¡Ì
npm
±àÒënpmÎļþ
¡Ì
¡Ì
¡Ì
nodejs-power
±àÒëNode.jsÎļþ
¡Ì
¡Ì
¡Ì
watch
¼àÌýÎļþÐÞ¸Ä
¡Ì
scripts-min
ѹËõJSÎļþ
¡Ì
sass-min
ѹËõscssÎļþ
¡Ì
npm-min
ѹËõnpmÎļþ
¡Ì
image-min
ѹËõͼƬÎļþ
¡Ì
clean-example
Çå³ýʾÀýÒ³Ãæ
¡Ì
Node.js Power
Beautywe Framework µÄ´úÂëÓÐÁ½ÖÖÔËÐл·¾³£º
Node.js ÔËÐл·¾³£¬Èç¹¹½¨ÈÎÎñµÈ¡£
΢ÐÅС³ÌÐòÔËÐл·¾³£¬Èç´ò°üµ½ dist Îļþ¼ÐµÄ´úÂë¡£
ÔËÐйý³Ì
Node.js Power ±¾ÖÊÊÇÒ»ÖÖ¾²Ì¬±àÒëµÄʵÏÖ¡£
°Ñij¸öÎļþÔÚ Node.js »·¾³ÔËÐеĽá¹û£¬Êä³öµ½Î¢ÐÅС³ÌÐòÔËÐл·¾³ÖУ¬ÒÔ´ËÀ´Âú×ãÌØ¶¨µÄÐèÇó¡£
Node.js Power »á°ÑÏîÄ¿ÖÐ src Ŀ¼ÏÂÀàËÆ xxx.nodepower.js ÃüÃûµÄÎļþ£¬ÒÔ Node.js À´ÔËÐУ¬
È»ºó°ÑÔËÐеĽá¹û£¬ÒÔ¡¸×ÖÃæÁ¿¶ÔÏó¡¹µÄÐÎʽдµ½ dist Ŀ¼Ï¶ÔÓ¦µÄͬÃûÎļþ xxx.nodepower.js ÎļþÈ¥¡£
ÒÔ src/config/index.nodepower.js ΪÀý£º
const fs = require('fs');
const path = require('path');
const files = fs.readdirSync(path.join(__dirname));
const result = {};
files
.filter(name => name !== 'index.js')
.forEach((name) => {
Object.assign(result, require(path.join(__dirname, `./${name}`)));
});
module.exports = result;
¸ÃÎļþ£¬¾¹ý Node.js Power ¹¹½¨Ö®ºó:
dist/config/index.nodepower.js:
module.exports = {
"appInfo": {
"version": "0.0.1",
"env": "test",
"appid": "wx85fc0d03fb0b224d",
"name": "beautywe-framework-test-app"
},
"logger": {
"prefix": "BeautyWe",
"level": "info"
}
};
Õâ¾ÍÂú×ãÁË£¬ËæÒâÍù src/config/ Ŀ¼ÖÐÀ©Õ¹ÅäÖÃÎļþ£¬¶¼Äܱ»×Ô¶¯´ò°ü¡£
Node.js Power ÒѾ±»¼¯³Éµ½¶à»·¾³¿ª·¢µÄ dev, test, prod ÖÐÈ¥¡£
µ±È»£¬Äã¿ÉÒÔÊÖ¶¯ÔËÐÐÕâ¸ö¹¹½¨ÈÎÎñ£º
$ gulp nodejs-power
NPM
BeautyWe Framework ʵÏÖÖ§³Ö npm µÄÔÀíºÜ¼òµ¥£¬×ܽáÒ»¾ä»°£º
ʹÓà webpack ´ò°ü src/npm/index.js £¬ÒÔ commonjs ¸ñʽÊä³öµ½ dist/npm/index.js
vcmtz" title="npm-works">
ÕâÑù×öµÄºÃ´¦£º
ʵÏÖ¼òµ¥¡£
Èà npm °üÄܼ¯ÖйÜÀí£¬Ã¿´ÎÒýÈëÒÀÀµ£¬¶¼ºÃºÃµÄÏëһϣ¬±ÜÃâ·ºÀÄ£¨ÓÈÆäÔÚ¶àÈË¿ª·¢ÖУ©¡£
ʹÓà ll dist/npm/index.js ÃüÁîÄÜ¿ìËÙ¿´µ½ÏîÄ¿ÖÐµÄ npm °üʹռÁ˶àÉÙÈÝÁ¿¡£
ÐÂÔö npm ÒÀÀµ
ÔÚ src/npm/index.js ÎļþÖУ¬½øÐÐ export£º
export { default as beautywe } from '@beautywe/core';
È»ºóÔÚÆäËûÎļþ import£º
import { beautywe } from './npm/index';
¸ü¶à
×ܵÄÀ´Ëµ£¬BeautyWe ÊÇÒ»Ì×΢ÐÅС³ÌÐòµÄ¿ª·¢·¶Ê½¡£
core ºÍ plugins À©Õ¹ÔÉú£¬Ìṩ¸´ÔÓÂß¼µÄ·â×°ºÍ²å°ÎʽʹÓá£
¶ø framework Ôò¸ºÔðÌṩһÕûÌ×Õë¶ÔÓÚ΢ÐÅС³ÌÐòµÄÆóÒµ¼¶ÏîÄ¿½â¾ö·½°¸£¬¿ªÏä¼´Óá£
ÆäÖл¹Óиü¶àµÄÄÚÈÝ£¬»¶Óä¯ÀÀ¹ÙÍø£ºbeautywejs.com
- ">< meta http-equiv="x-ua-compatible" content="
- glibc detected /home/app: corrupted double-
- UVA 10730 - Antiarithmetic£¿
- XML--Schema
- "No pre-requisite checks found in oraparam.i
- enq: US - contention related to undo segments
- HTTP Status 404 - No result defined for a
- ²âÊÔpager-taglib
- SVN Ìá½»³ö´í£ºAttempted to lock an already-l
- c-version:null]] could not deserialize the s
- .Net CoreȨÏÞÈÏÖ¤»ùÓÚCookieµÄÈÏÖ¤&ÊÚȨ.Scheme¡¢P
- Éè¼ÆÄ£Ê½ - Æß´óÉè¼ÆÔÔò£¨ËÄ£©- ºÏ³É¸´ÓÃÔÔòÓëÉè
- Éè¼ÆÄ£Ê½Ä£Ê½£¨ËÄ£©£º½¨ÔìÕßģʽ£¨Éú³ÉÆ÷ģʽ£© -
- ³ÌÐò½á¹¹Éè¼ÆÀíÂÛ(Android) - Ê÷Çú - ²©¿ÍÔ°
- ͨË×Ò×¶®Éè¼ÆÄ£Ê½½âÎö——Ä£°å·½·¨Ä£Ê½ - СÊÀ½çµÄ
- ASP.NET Core 3.0 : ¶þÊ®ËÄ. ÅäÖõÄOptionsģʽ
- .Net MVC ÌáʾδÄܼÓÔØÎļþ»ò³ÌÐò¼¯ - Á¹L - ²©¿ÍÔ°
- C# ¶àÏß³ÌÓë¸ß²¢·¢´¦Àí²¢ÇҾ߱¸ÔÝÍ£¡¢¼ÌÐø¡¢Í£Ö¹¹¦ÄÜ
- Fundebug ΢ÐÅС³ÌÐòBUG ¼à¿Ø²å¼þ¸üÐÂÖÁ 1.3.1£¬Ö§
- BeautyWe.js Ò»Ì×רעÓÚ΢ÐÅС³ÌÐòµÄ¿ª·¢·¶Ê½ - ǰ