Ê×Ò³ > ³ÌÐò¿ª·¢ > ×ۺϱà³Ì > ÆäËû×ÛºÏ >

BeautyWe.js Ò»Ì×רעÓÚ΢ÐÅС³ÌÐòµÄ¿ª·¢·¶Ê½ - ǰ¶Ë´ó±¦½£ - SegmentFault ˼·ñ

2019-06-19

¹ÙÍø£º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 ¡ú ...

ÏÂÃæÉîÈëһϲå¼þ»¯µÄÔ­Àí£º

beautywe pluggable

¹¤×÷Ô­ÀíÊÇÕâÑùµÄ£º

¾­¹ý 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

npm-wZ†·Ÿ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

ÈȵãÍÆ¼ö