±à¼ÍƼö: |
±¾ÎÄÀ´×ÔÓÚ¼òÊé,±¾ÎÄÖ÷Òª½éÉܵ±ÏÂ¿çÆ½Ì¨ÒÆ¶¯¿ª·¢µÄÏÖ×´¡¢ÊµÏÖÔÀí¡¢¿ò¼ÜµÄÑ¡Ôñ£¬Ï£Íû¶ÔÄúµÄѧϰÓÐËù°ïÖú¡£ |
|
Ò»¡¢Ç°ÑÔ
ΪʲôÎÒÃÇÐèÒª¿çƽ̨¿ª·¢£¿ ±¾ÖÊÉÏ£¬¿çƽ̨¿ª·¢ÊÇΪÁËÔö¼Ó´úÂ븴Ó㬼õÉÙ¿ª·¢Õß¶Ô¶à¸öƽ̨²îÒìÊÊÅäµÄ¹¤×÷Á¿£¬½µµÍ¿ª·¢³É±¾£¬Ìá¸ßÒµÎñרעµÄͬʱ£¬Ìṩ±Èweb¸üºÃµÄÌåÑé¡£àÅ¡«Í¨Ë×ÁË˵¾ÍÊÇ£ºÊ¡Ç®¡¢ÍµÀÁ¡£
±¾ÆªÖ÷ÒªÒÔreact-native¡¢weex¡¢flutter£¬½áºÏ×ÊѶչÍû£¬ÉîÈëÁÄÁĵ±Ç°¿çÆ½Ì¨ÒÆ¶¯¿ª·¢µÄʵÏÖÔÀí¡¢ÏÖ×´ÓëδÀ´¡£ÖÁÓÚΪʲôֻ½²ËüÃÇ£¬ÒòΪ¶Ô±Èionic¡¢phoneGap£¬ËüÃǸüÓÚ
¡°naive¡± (£þ £þ)¡£
³¬ÍêÕû¿çƽ̨¿ªÔ´ÏîÄ¿

¶þ¡¢ÔÀíÓëÌØÐÔ
Ä¿Ç°ÒÆ¶¯¶Ë¿çƽ̨¿ª·¢ÖУ¬´óÖ¹éÄÉΪÒÔϼ¸ÖÖÇé¿ö£º
react native¡¢weex¾ùʹÓÃJavaScript×÷Ϊ±à³ÌÓïÑÔ£¬Ä¿Ç°JavaScriptÔÚ¿çÆ½Ì¨¿ª·¢ÖУ¬¿Éνռ¾Ý°ë±Ú½É½£¬´óÓС°Ò»Í³ÌìÏ¡±µÄÇ÷ÊÆ¡£
kotlin-native¿ªÊ¼Ö§³Ö iOS ºÍ Web ¿ª·¢£¬£¨kotlinÒѾ³ÉΪandroidµÄÒ»¼¶ÓïÑÔ£©Ò²Ïë³¢ÊÔ¡°Ò»Í³ÌìÏ¡±¡£
flutterÊÇGoogle¿çÆ½Ì¨ÒÆ¶¯UI¿ò¼Ü£¬Dart×÷Ϊ¹È¸èµÄÇ×¶ù×Ó£¬ºÁÎÞÒÉÎÊDart³ÉΪflutterµÄ±à³ÌÓïÑÔ£¬ÈçÏÂͼ£¬×÷Ϊ¾ÞÍ·ÐÂÉú¶ù£¬ÔÚflutter¹ÙÍøÒ²¿ÉÒÔ¿´³ö£¬flutterͬÑù¡°ÐÄ»³ÌìÏ¡±¡£

1¡¢React Native
Facebook ³öÆ·£¬JavaScriptÓïÑÔ£¬JSCoreÒýÇæ£¬ReactÉè¼ÆÄ£Ê½£¬ÔÉúäÖȾ
1.1¡¢ÀíÄî¼Ü¹¹
¡°Learn once, write anywhere¡± £¬´ú±í×Å Facebook¶Ô react
native µÄ¶¨Ò壺ѧϰ react £¬Í¬Ê±ÕÆÎÕ web Óë app Á½ÖÖ¿ª·¢¼¼ÄÜ¡£ react
native ÓÃÁË react µÄÉè¼ÆÄ£Ê½£¬µ«UIäÖȾ¡¢¶¯»Ð§¹û¡¢ÍøÂçÇëÇóµÈ¾ùÓÉÔÉú¶ËʵÏÖ¡£¿ª·¢Õß±àдµÄjs´úÂ룬ͨ¹ý
react native µÄÖмä²ãת»¯ÎªÔÉú¿Ø¼þºÍ²Ù×÷£¬±ÈionicµÈ¿çƽ̨ӦÓ㬴ó´óÌá¸ßÁ˵ÄÓû§ÌåÑé¡£
×ܽáÆðÀ´Æäʵ¾ÍÊÇÀûÓà JS À´µ÷Óà Native ¶ËµÄ×é¼þ£¬´Ó¶øÊµÏÖÏàÓ¦µÄ¹¦ÄÜ¡£
ÈçÏÂͼËùʾ£¬react native µÄ¿çƽ̨ÊÇʵÏÖÖ÷ÒªÓÉÈý²ã¹¹³É£¬ÆäÖÐ C++ ʵÏֵĶ¯Ì¬Á¬½á¿â(.so)£¬×÷ΪÖмäÊÊÅä²ãÇŽӣ¬ÊµÏÖÁËjs¶ËÓëÔÉú¶ËµÄË«ÏòͨÐŽ»»¥¡£ÕâÀï×îÖ÷ÒªÊÇ·â×°ÁË
JavaScriptCore Ö´ÐÐjsµÄ½âÎö£¬¶ø react native ÔËÐÐÔÚJavaScriptCoreÖУ¬ËùÒÔ²»´æÔÚä¯ÀÀÆ÷¼æÈݵÄÎÊÌâ¡£
ÆäÖÐÔÚIOSÉÏÖ±½ÓʹÓÃÄÚÖõÄjavascriptcore£¬ ÔÚAndroid ÔòʹÓÃwebkit.org¹Ù·½¿ªÔ´µÄjsc.so¡£

1.2¡¢ÊµÏÖÔÀí
ºÍǰ¶Ë¿ª·¢²»Í¬£¬react native ËùÓеıêÇ©¶¼²»ÊÇÕæÊµ¿Ø¼þ£¬JS´úÂëÖÐËùд¿Ø¼þµÄ×÷Óã¬ÀàËÆ
Map ÖÐµÄ key Öµ¡£JS¶Ëͨ¹ýÕâ¸ö key ×éºÏµÄ Dom £¬×îºóNative¶Ë»á½âÎöÕâ¸ö Dom
£¬µÃµ½¶ÔÓ¦µÄNative¿Ø¼þäÖȾ£¬Èç Android ÖÐ<view> ±êÇ©¶ÔÓ¦ ViewGroup
¿Ø¼þ¡£

ÔÚ react native ÖУ¬JS¶ËÊÇÔËÐÐÔÚ¶ÀÁ¢µÄÏß³ÌÖУ¨³ÆÎªJS Thread £©¡£JS Thread
×÷Ϊµ¥Ïß³ÌÂß¼£¬²»¿ÉÄÜ´¦ÀíºÄʱµÄ²Ù×÷¡£ÄÇôÈç fetch ¡¢Í¼Æ¬¼ÓÔØ ¡¢ Êý¾Ý³Ö¾Ã»¯ µÈ²Ù×÷£¬ÔÚ Android
ÖÐʵ¼Ê¶ÔÓ¦µÄÊÇ okhttp ¡¢Fresco ¡¢SharedPreferencesµÈ¡£¶ø¿çÏß³ÌͨÐÅ£¬Ò²Òâζ×Å
Js Thread ºÍÔÉúÖ®¼ä½»»¥ÓëͨѶÊÇÒì²½µÄ¡£
¿ÉÒÔ¿´³ö£¬¿çƽ̨µÄ¹Ø¼üÔÚÓÚC++²ã£¬¿ª·¢ÈËÔ±´ó²¿·Öʱºò£¬Ö»×¨×¢ÓÚJS ¶ËµÄ´úÂëʵÏÖ¡£ ÔÚÔÉú¶ËÌṩµÄ¸÷ÖÖ
Native Module Ä£¿é£¨ÈçÍøÂçÇëÇó£¬ViewGroup¿Ø¼þ£©£¬ºÍ JS ¶ËÌṩµÄ¸÷ÖÖ JS
Module£¨ÈçJS EventEmiterÄ£¿é£©£¬¶¼»áÔÚC++ʵÏÖµÄsoÖб£´æÆðÀ´£¬Ë«·½µÄͨѶͨ¹ýC++Öеı£´æµÄÓ³É䣬×îÖÕʵÏÖÁ½¶ËµÄ½»»¥¡£Í¨ÐŵÄÊý¾ÝºÍÖ¸ÁÔÚÖмä²ã»á±»×ªÎªString×Ö·û´®´«Ê䣬˫ÏòµÄµ÷ÓÃÁ÷³ÌÈçÏÂͼ¡£

1.3¡¢´ò°ü¼ÓÔØ
×îÖÕ£¬JS´úÂë»á±»´ò°ü³ÉÒ»¸ö bundle Îļþ£¬×Ô¶¯Ìí¼Óµ½ App µÄ×ÊԴĿ¼Ï¡£react native
µÄ´ò°ü½Å±¾Ä¿Â¼Îª/node_modules/react-native/local-cli£¬´ò°ü×îºó»áͨ¹ý
metro Ä£¿éѹËõ bundle Îļþ¡£¶øbundleÎļþÖ»»á´ò°üjs´úÂ룬×ÔÈ»²»»á°üº¬Í¼Æ¬µÈ¾²Ì¬×ÊÔ´£¬ËùÒÔ´ò°üºóµÄ¾²Ì¬×ÊÔ´£¬ÆäʵÊDZ»¿½±´µ½¶ÔÓ¦µÄƽ̨×ÊÔ´Îļþ¼ÐÖС£
ÆäÖÐͼƬµÈ´æÔÚ×ÊÔ´µÄÓ³É乿Ôò£¬±ÈÈç·ÅÔÚ react native ÏîÄ¿¸ùĿ¼Ï嵀 img/pic/logo.png
µÄ×ÊÔ´£¬±àÒëʱ£¬»á±»ÖØÃüÃûºó£¬¸ù¾Ý´óС merged µ½¶ÔÓ¦µÄÊÇdrawableĿ¼Ï£¬ÐÞ¸ÄÃû³ÆÎªimg_pic_logo.png¡£
´ò°üAndroidºÍIOS£¬¿Ï¶¨ÐèÒªÏàÓ¦µÄƽ̨ÏîÄ¿´æÔÚ£¬ÔÚ react-native init ʱ´´½¨µÄÏîÄ¿£¬¾ÍÒѾ°üº¬ÁË
android ºÍ ios µÄÄ£°æ¹¤³Ì£¬´ò°üÍêµÄ¹¤³Ì»á¼ÓÔØbundleÎļþ£¬È»ºóÆô¶¯ÏîÄ¿£¬ÈçÏÂͼ¡£ÕâÀï¾Í²»Õ¹£¨tou£©¿ª£¨lan£©ÁË£¬ÓÐÐËȤµÄ¿ÉÒÔ¿´£ºReact
Native For Android ¼Ü¹¹³õ̽¡£

ͼƬÀ´Ô´QQ¿Õ¼äÒÆ¶¯¿ª·¢ÍŶӣ¬Íê³ÉÆô¶¯Á÷³Ìͼ
2¡¢WEEX
Alibaba ³öÆ·£¬JavaScriptÓïÑÔ£¬JS V8ÒýÇæ£¬VueÉè¼ÆÄ£Ê½£¬ÔÉúäÖȾ
2.1¡¢ÀíÄî¼Ü¹¹
¡°Write once, run everywhere¡±, weexµÄ¶¨Òå¾ÍÏñÊÇ£ºÐ´¸ö vue ǰ¶Ë£¬Ë³±ã°ïÄã±àÒë³ÉÐÔÄÜ»¹²»´íµÄ
apk ºÍ ipa£¨µ±È»£¬ÏÖʵÓÐʱºÜ¹Ç¸Ð£©¡£»ùÓÚ Vue Éè¼ÆÄ£Ê½£¬Ö§³Ö web¡¢android¡¢ios
Èý¶Ë£¬ÔÉú¶ËͬÑùͨ¹ýÖмä²ãת»¯£¬½«¿Ø¼þºÍ²Ù×÷ת»¯ÎªÔÉúÂß¼À´Ìá¸ßÓû§ÌåÑé¡£
ÔÚ weex ÖУ¬Ö÷Òª°üÀ¨Èý´ó²¿·Ö£ºJS Bridge¡¢Render¡¢Dom£¬·Ö±ð¶ÔÓ¦WXBridgeManager¡¢WXRenderManager¡¢WXDomManager£¬Èý²¿·Öͨ¹ýWXSDKManagerͳһ¹ÜÀí¡£ÆäÖÐ
JS Bridge ºÍ Dom ¶¼ÔËÐÐÔÚ¶ÀÁ¢µÄ HandlerThread ÖУ¬¶ø Render ÔËÐÐÔÚ
UI Ï̡߳£
JS Bridge Ö÷ÒªÓÃÀ´ºÍ JS ¶ËʵÏÖ½øÐÐË«ÏòͨÐÅ£¬±ÈÈç°Ñ JS ¶ËµÄ dom ½á¹¹´«µÝ¸ø
Dom Ï̡߳£Dom Ö÷ÒªÊÇÓÃÓÚ¸ºÔð dom µÄ½âÎö¡¢Ó³Éä¡¢Ìí¼ÓµÈµÈµÄ²Ù×÷£¬×îºó֪ͨUIÏ̸߳üС£¶ø
Render ¸ºÔðÔÚUIÏß³ÌÖÐ¶Ô dom ʵÏÖäÖȾ¡£

2.2¡¢ÊµÏÖÔÀí
ºÍ react nativeÒ»Ñù£¬weex ËùÓеıêǩҲ²»ÊÇÕæÊµ¿Ø¼þ£¬JS ´úÂëÖÐËùÉú³É´æµÄ dom£¬×îºó¶¼ÊÇÓÉ
Native ¶Ë½âÎö£¬Ôٵõ½¶ÔÓ¦µÄNative¿Ø¼þäÖȾ£¬Èç Android ÖÐ <text>
±êÇ©¶ÔÓ¦ WXTextView ¿Ø¼þ¡£
weex ÖÐÎļþĬÈÏΪ .vue £¬¶ø vue ÎļþÊDZ»ÎÞ·¨Ö±½ÓÔËÐеģ¬ËùÒÔ vue »á±»±àÒë³É
.js ¸ñʽµÄÎļþ£¬Weex SDK»á¸ºÔð¼ÓÔØäÖȾÕâ¸öjsÎļþ¡£Weex¿ÉÒÔ×öµ½¿çÈý¶ËµÄÔÀíÔÚÓÚ£ºÔÚ¿ª·¢¹ý³ÌÖУ¬´úÂëģʽ¡¢±àÒë¹ý³Ì¡¢Ä£°å×é¼þ¡¢Êý¾Ý°ó¶¨¡¢ÉúÃüÖÜÆÚµÈÉϲãÓï·¨ÊÇÒ»Öµġ£²»Í¬µÄÊÇÔÚ
JS Framework ²ãµÄ×îºó£¬web ƽ̨ºÍ Native ƽ̨£¬¶Ô Virtual DOM
Ö´ÐеĽâÎö·½·¨ÊÇÓÐÇø±ðµÄ¡£

ʵ¼ÊÉÏ£¬ÔÚ Native ÖÐ¶Ô bundle ÎļþµÄ¼ÓÔØ´óÖ¾ÀúÒÔϽ׶Σº
weex ½ÓÊÕµ½ js ÎļþÒÔºó£¬JS Framework ¸ù¾ÝÎļþΪ Vue ģʽ£¬»áµ÷ÓÃweex-vue-framework
ÖÐÌṩµÄ createInstance·½·¨´´½¨ÊµÀý¡£(Ò²¿ÉÄÜÊÇRaxģʽ)
createInstance ÖлáÖ´ÐÐ Js Entry ´úÂëÀï new Vue() ´´½¨Ò»¸ö×é¼þ£¬Í¨¹ýÆä
render º¯Êý´´½¨³ö Virtual DOM ½Úµã¡£
ÓÉJS V8 ÒýÇæÉϽâÎö Virtual DOM £¬µÃµ½ Json Êý¾Ý·¢ËÍÖÁ Dom Ïߣ¬ÕâÀïÊä³ö
Json Ò²ÊÇ·½±ã¿ç¶ËµÄÊý¾Ý´«Êä¡£
Dom Ï߳̽âÎö Json Êý¾Ý£¬µÃµ½¶ÔÓ¦µÄ WxDomObject£¬È»ºó´´½¨¶ÔÓ¦µÄWxComponent
Ìá½» Render ¡£
RenderÔÚÔÉú¶Ë×îÖÕ´¦Àí´¦ÀíäÖȾÈÎÎñ£¬²¢»Øµ÷ÀïJS·½·¨¡£
µÃÒæÓÚÉϲãµÄͳһÐÔ£¬Ö»ÊÇͨ¹ý weex-vue-framework ÅжÏÊÇÓÉVue.js Éú³ÉÕæÊµµÄ
Dom £¬»¹ÊÇͨ¹ý Native Api äÖȾ×é¼þ£¬weex Ò»¶¨³Ì¶ÈÉÏÉÏ£¬ÓÃJS ʵÏÖÁË vue
һͳÌìϵÄЧ¹û¡£

weex ÔÚÔÉúäÖȾ Render ʱ£¬ÔÚ½ÓÊÕµ½äÖȾָÁîºó£¬»áÖð²½½«Êý¾ÝäÖȾ³ÉÔÉú×é¼þ¡£Render
ͨ¹ý½âÎöäÖȾÊý¾ÝµÄÃèÊö£¬È»ºó·Ö·¢¸ø²»Í¬µÄÄ£¿é¡£
±ÈÈç ¿Ø¼þäÖȾÊôÓÚ dom Ä£¿éÖУ¬Ò³ÃæÌø×ªÊôÓÚnavigatorÄ£¿éµÈ¡£Ä£¿éµÄäÖȾ¹ý³Ì²¢·ÇÒ»¸öÖ´ÐÐÍ꣬ÔÙÖ´ÐÐÁíÒ»¸öµÄÁ÷³Ì£¬¶øÊÇÀàËÆÁ÷ʽµÄ¹ý³Ì¡£ÈçÉÏÒ»¸ö
<text> µÄ×é¼þ»¹Ã»äÖȾºÃ£¬ÏÂÒ»¸ö <div> µÄäÖȾÓÖ·¢Á˹ýÀ´¡£ÕâÑùµ±Ò»¸ö×é¼þµÄǶÌ××é¼þºÜ¶àʱ£¬»òÕß¿ÉÒÔ¿´µ½Õâ¸ö´ó×é¼þÄÚµÄUI£¬Ò»¸öÒ»¸öäÖȾ³öÀ´µÄ¹ý³Ì¡£
weex ±ÈÆðreact native£¬Ö÷ÒªÊÇÔÚJS V8µÄÒýÇæÉÏ£¬¶àÁË JS Framework
³Ðµ±ÁËÖØÒªµÄÖ°Ôð£¬Ê¹µÃÉϲã¾ß±¸Í³Ò»ÐÔ£¬¿ÉÒÔÖ§³Ö¿çÈý¸öƽ̨¡£×ܵÄÀ´ËµËüÖ÷Òª¸ºÔðÊÇ£º¹ÜÀíWeexµÄÉúÃüÖÜÆÚ£»½âÎöJS
Bundle£¬×ªÎªVirtual DOM£¬ÔÙͨ¹ýËùÔÚÆ½Ì¨²»Í¬µÄAPI·½·¨£¬¹¹½¨Ò³Ã棻½øÐÐË«ÏòµÄÊý¾Ý½»»¥ºÍÏìÓ¦¡£

2.3¡¢´ò°ü
weex ×÷Ϊ react-native Ö®ºó³öÏÖµÄ¿çÆ½Ì¨ÊµÏÖ·½°¸£¬×ÔÈ»¿ÉÒÔÕ¾ÔÚǰÈ˵ļç°òÉÏÓÅ»¯ÎÊÌ⣬±ÈÈ磺BundleÎļþ¹ý´óÎÊÌâ¡£
BundleÎļþµÄ´óС£¬ºÜ´ó³Ì¶ÈÉÏÓ°ÏìÁË¿ò¼ÜµÄÐÔÄÜ£¬¶ø weex Ñ¡Ôñ½« JS Framework
¼¯³Éµ½ WeexSDK ÖУ¬Ò»¶¨³Ì¶È¼õÉÙÁËJS BundleµÄÌå»ý£¬Ê¹µÃ bundle ÀïÃæÖ»±£ÁôÒµÎñ´úÂë¡£
´ò°üʱ£¬weex ÊÇͨ¹ý webpack ´ò°ü³ö bundle ÎļþµÄ¡£bundle ÎļþµÄ´ò°üºÍ
entry.js ÎļþµÄÅäÖÃÊýÁ¿Óйأ¬Ä¬ÈÏÇé¿öÏÂÖ®ºóÒ»¸ö entry Îļþ£¬×ÔȻҲ¾ÍÖ»ÓÐÒ»¸öbundleÎļþ¡£
ÔÚ weex ÏîÄ¿µÄ webpack.common.conf.js ÖпÉÒÔ¿´µ½£¬Æäʵ´ò°üÒ²ÊÇÇø·ÖÁË
webConfig ºÍ weexConfig µÄ²»Í¬´ò°ü·½Ê½¡£ÈçÏÂͼ£¬ÆäÖÐweexEntry ¾ÍÊÇ
weex ´ò°üÅäÖõĵط½£¬¿ÉÒÔ¿´µ½±¾À´ÒѾÓÐ index ºÍ entry.js ´æÔÚÁË¡£Èç¹ûÓÐÐèÒª£¬¿ÉÅäÖÃÉÏÄãÐèÒªµÄ´ò°üÒ³Ãæ£¬¾ßÌåÕâÀï¾Í²»Ïêϸչ¿ªÁË¡£ÓÐÐËȤ¿É¿´£ºWeexÔÀíÖ®´øÄãÈ¥¶×¿Ó
¡£

3¡¢Flutter
Google ³öÆ·£¬DartÓïÑÔ£¬Flutter EngineÒýÇæ£¬ÏìӦʽÉè¼ÆÄ£Ê½£¬ÔÉúäÖȾ
Flutter Êǹȸè2018Äê·¢²¼µÄ¿çÆ½Ì¨ÒÆ¶¯UI¿ò¼Ü¡£Ïà½ÏÓÚ±¾ÈËÒѾÔÚÏîÄ¿ÖÐʹÓùý react
native ºÍ Weex£¬FlutterĿǰ½ö½öÊǼòµ¥ÔËÐйýDemo£¬±Ï¾¹»¹ÊÇbeta ½×¶Î£¬ÕâÀï¸ü¶àµÄÁÄÒ»ÏÂËüµÄʵÏÖ»úÖÆºÍЧ¹û¡£
Óë react native ºÍ weex µÄͨ¹ý Javascript ¿ª·¢²»Í¬£¬Flutter
µÄ±à³ÌÓïÑÔÊÇDrat£¬£¨¹È¸èÇ×¶ù×Ó£¬¾Ý˵ÊÇÒòΪ Drat ÏîÄ¿×é¾ÍÔÚ Flutter ¸ô±Ú¶ø±»Ñ¡ÉÏ()£©ËùÒÔÖ´ÐÐʱ²¢²»ÐèÒª
Javascript ÒýÇæ£¬µ«Êµ¼ÊЧ¹û×îÖÕҲͨ¹ýÔÉúäÖȾ¡£

ÈçÉÏͼ£¬Flutter Ö÷Òª·ÖΪ Framework ºÍ Engine£¬ÎÒÃÇ»ùÓÚFramework
¿ª·¢App£¬ÔËÐÐÔÚ Engine ÉÏ¡£Engine ÊÇ Flutter µÄ¶ÀÁ¢ÐéÄâ»ú£¬ÓÉËüÊÊÅäºÍÌṩ¿çƽ̨֧³Ö£¬Ä¿Ç°²Â²â
Flutter Ó¦ÓóÌÐòÔÚ Android ÉÏ£¬ÊÇÖ±½ÓÔËÐÐ Engine ÉÏ ËùÒÔÔÚÊDz»ÐèÒªDalvikÐéÄâ»ú¡££¨ÕâÊDZÈkotlin¸ü³¹µ×£¬ÅׯúJVMµÄ¾À²ø£¿£©
ÈçÏÂͼ£¬µÃÒæÓÚ Engine ²ã£¬Flutter ÉõÖÁ²»Ê¹ÓÃÒÆ¶¯Æ½Ì¨µÄÔÉú¿Ø¼þ£¬ ¶øÊÇʹÓÃ×Ô¼º Engine
À´»æÖÆ Widget £¨FlutterµÄÏÔʾµ¥Ôª£©£¬¶ø Dart ´úÂë¶¼ÊÇͨ¹ý AOT ±àÒëΪƽ̨µÄÔÉú´úÂ룬ËùÒÔ
Flutter ¿ÉÒÔ Ö±½ÓÓëÆ½Ì¨Í¨ÐÅ£¬²»ÐèÒªJSÒýÇæµÄÇŽӡ£Í¬Ê± Flutter ΨһҪÇóϵͳÌṩµÄÊÇ
canvas£¬ÒÔʵÏÖUIµÄ»æÖÆ¡£ß×£¿ÕâôÏëÀ´£¬Ö§³Öweb¶ËҲûÎÊÌâ°É£¡

ÔÚFlutterÖУ¬´ó¶àÊý¶«Î÷¶¼ÊÇwidget£¬¶øwidgetÊDz»¿É±äµÄ£¬½öÖ§³ÖÒ»Ö¡£¬²¢ÇÒÔÚÿһ֡Éϲ»»áÖ±½Ó¸üУ¬Òª¸üжø±ØÐëʹÓÃWidgetµÄ״̬¡£ÎÞ״̬ºÍÓÐ״̬
widget µÄºËÐÄÌØÐÔÊÇÏàͬµÄ£¬Ã¿Ò»Ö¡ËüÃǶ¼»áÖØÐ¹¹½¨£¬ÓÐÒ»¸öState¶ÔÏó£¬Ëü¿ÉÒÔ¿çÖ¡´æ´¢×´Ì¬Êý¾Ý²¢»Ö¸´Ëü¡£
Flutter ÉÏ Android ×Ô´øÁË Skia£¬SkiaÊÇÒ»¸ö 2DµÄ»æÍ¼ÒýÇæ¿â£¬¿çƽ̨£¬ËùÒÔ¿ÉÒÔ±»Ç¶Èëµ½
FlutterµÄ iOS SDKÖУ¬Ò²Ê¹µÃ Flutter Android SDKÒª±È iOS SDKСºÜ¶à¡£
Èý¡¢¶Ô±È
ÕâËãÊÇ»¥ÏàÉ˺¦µÄ»·½ÚÁ˰ɡ£(///¨Œ///)

1¡¢´óС
ÉÏÃæApk´óСÊÇͨ¹ý react-native init¡¢weex create ºÍ flutter
´´½¨³öµÄ¹¤³Ìºó£¬Ö±½Ó²»Ìí¼ÓÈκδúÂ룬´ò°ü³öÀ´µÄ release Ç©Ãû apk ´óС¡£´ÓÏÂͼ¿ÉÒÔ¿´³ö£¬ÆäÖдó±ÈÀý¶¼ÊÇÔÚso¿â¡£

2¡¢ÉçȺ
react native ×÷Ϊ Facebook Ö÷Á¦¿ªÔ´ÏîĿ֮һ£¬ÖÁ½ñÒÑÓи÷Àà·á¸»µÄµÚÈý·½¿â£¬ÉõÖÁÈç
realm¡¢lottie µÈ¿ªÔ´ÏîĿҲÓÐ react native Ïà¹ØµÄ°æ±¾£¬ÉçȺʵ¼ÊÎÞÐèÖÊÒÉ¡£µ±È»£¬ÒòΪ²¢ÍêÈ«Õýͳ¿ª·¢Æ½Ì¨£¬µÚÈý¿âµÄ½¡×³ÐԺͼæÈÝÐÔÓÐʱºò×ÜÊÇÁ¼Ý¬²»Æë¡£
weex ÆäʵÓÐÖÖÉú´íÔÚ¹úÄڵĸоõ¡£Æäʵ weex µÄÉè¼ÆºÍÀíÄî¶¼ºÜÓÅÐ㣬ÐÔÄÜÒ²²»´í£¬µ«ÊÇ¶Ô±È react
native µÄµÚÈý·½Ö§³Ö£¬¾ÍÏÔµÃÓеãºóÂèÑøµÄ¡£2016Ä꿪ԴÖÁ½ñ£¬ÉçÇøºÍ¸÷ÀàÎĵµ¶¼ÏÔµÃÓÐµãÆ£Èõ£¬×÷Ϊ¿çƽ̨¿ª·¢ÈËÔ±£¬´ó¶àʱºò¿Ï¶¨²»»áÏ£Íû£¬ÐèҪƵ·±µÄ×Ô¼ºÔö¼ÓÔÉú¹¦ÄÜÖ§³Ö£¬ÒòΪÕâÑùµÄ¹¤×÷Ò»¶à£¬·´¶ø»áÓë¿çƽ̨¿ª·¢µÄÀíÄî±³µÀ¶ø³Û£¬´øÀ´¿ª·¢³É±¾±»Î¬»¤ÄѶÈÔö¼Ó¡£
FlutterĿǰ»¹´¦Àíbeta½×¶Î£¬µ«ÊǹȸèµÄºÅÕÙÁ¦Ò»Ö±ºÜ¿É¹Û£¬ÕâÒ»µãÎÞÐèÖÊÒÉ¡£
3¡¢ÐÔÄÜ
ÀíÂÛÉÏ flutter µÄÐÔÄÜÓ¦¸ÃÊÇ×îºÃµÄ£¬µ«ÊÇĿǰʵ¼ÊÌåÑéÖУ¬È´²¢Ã»ÓиÐÊܳöÀ´Ì«´óµÄ²î¾à£¬ºÍ react
native£¨0.5.0Ö®ºó£©¡¢weex ÔÚÐÔÄÜÉϸöÈËÌåÑé²îÒì²»ÊǺܴ󡣵±È»£¬ÕâÀﲢûÓÐʵ²âäÖȾµÄºÁÃëʱ¼äºÍÖ¡ÂÊÊý¾Ý¡£
4¡¢ÆäËûÇø±ð
WeexµÄ¶àÒ³ÃæÊµÏÖÎÊÌâweex ÔÚ native ¶ËÊDz»Ö§³Ö <keep-alive>
µÄ£¬ÕâÒ»µãºÍ react-native ²»Í¬ÔÚÓ룬Èç¹ûÔÚ native ÐèҪʵÏÖÒ³ÃæÌø×ª£¬Ê¹Óà vue-router
½«»á²Ò²»È̶㺷µ»ØºóÒ³Ãæ²»×öÌØ±ð´¦Àíʱ£¬ÊÇ»á¿Õ°×һƬ¡£²Î¿¼¹Ù·½Demo playground£¬native
¶Ë µÄ²ÉÓà weex.requireModule('navigator') Ìø×ª Activity
ÊDzÅÕýȷʵÏÖ¡£Í¬Ê±£¬weexÖÐ navigator Ìø×ªµÄÉè¼Æ£¬Ò²µ¼ÖÂÁ˶àÒ³ÃæµÄÒ³Ãæ¼äͨѶµÄ²îÒì¡£weexÔÚ¶àÒ³ÃæÏµÄÊý¾ÝͨѶ£¬ÊÇͨ¹ýurlʵÏֵ쬱ÈÈçfile://assets/dist/SecondPage.jsparams=0£¬¶øvuexºÍvue-routerÔÚ¿çÒ³ÃæÊÇÎÞ·¨¹²Óõģ»¶ø
react native ÔÚ¿ç Actvity ʹÓÃʱ£¬ÒòΪÊÇͬһ¸öbundleÎļþ£¬Ö»Òª manager
Ïàͬ£¬ÄÇô router ºÍ store ʱ¿ÉÒÔÕÕÑùʹÓõģ¬Êý¾ÝͨÐÅ·½Ê½Ò²ºÍµ±¸ö Actvity Ã»Çø±ð¡£ÏîĿģ°å
weex ºÍ react native Ä£°å´úÂëģʽҲ²»Í¬¡£weex µÄÄ£°åÊÇ´Ó cordova ģʽÐ޸ĹýÀ´µÄ£¬¸ù¾ÝplatformÐèÇó£¬ÓÃÃüÁîÌí¼Ó¹Ì¶¨Ä£¿é£¬¶øÔÚ
.gitignore ¶Ô platforms Îļþ¼ÐÊǺöÂÔ¸ú×Ù¡£ react native ÔÚÏîÄ¿´´½¨Ê±Ä£°æ¾Í´æÔÚÁË£¬ÌرðÊÇÌí¼ÓµÚÈý·½²å¼þÔÉú¶ËÖ§³Öʱ£¬»áÖ±½ÓÐÞ¸ÄÄ£°å´úÂ룬git´úÂëÖÐÒ²»áÌí¼Ó¸ú×ÙÐ޸ġ£
ËÄ¡¢Î´À´Ç÷ÊÆ
ÎÒÃÇÑ¡Ôñ¿ò¼ÜµÄʱºò£¬ºÜ¶àʱºò»á¹Ø×¢¿ò¼ÜµÄ³ÉÊì¶ÈºÍÉúÃüÁ¦²»ÊÇô()¡£
1¡¢React Native
¡°Airbnb Ðû²¼·ÅÆúʹÓà React Native£¬»Ø¹éʹÓÃÔÉú¼¼Êõ¡± : Airbnb ×÷Ϊ
react native ƽ̨ÉÏ×î´óµÄÖ§³ÖÕßÖ®Ò»£¬Æä¿ªÔ´µÄlottie ͬÑùÊÇÖ§³ÖÔÉúºÍ react
native¡£
Airbnb ÔÚÐû²¼·ÅÆúµÄÎÄÖУ¬Ò²¶Ô react native µÄ±íʾÁ˺ܴóÁ¿µÄ¿Ï¶¨£¬¶øÊ¹µÃËûÃÇ·ÅÆúµÄÀíÓÉ£¬ÆäʵÖ÷Òª»¹ÊǼ¯ÖÐÓÚÏîÄ¿ÅÓ´óÖ®ºóµÄά»¤À§ÄÑ£¬µÚÈý·½¿âµÄÁ¼Ý¬²»Æë£¬¼æÈÝÉÏÐèÒªºÄ·Ñ¸ü¶àµÄ¾«Á¦µ¼ÖÂ·ÅÆú¡£
ps£º£¨ Lottie¿âAirbnb³öµÄÊÇÒ»¸öÄܹ»°ïÖú½âÎöAEµ¼³öµÄ°üº¬¶¯»ÐÅÏ¢µÄjsonÎļþ¡£ÕâºÜºÃµÄ½â¾öÁËÒ»¸öì¶Ü£¬Éè¼ÆÊ¦¿ÉÒÔ¸üרעµÄÉè¼Æ³ö¸÷ÖÖìÅ¿áµÄ¶¯»Ð§¹û£¬¶ø¿ª·¢Ö»ÐèÒª½«Æä¼ÓÈëÖ§³Ö¼´¿É¡££©
Facebook ÕýÔÚÖØ¹¹ React Native£¬½«ÖØÐ´´óÁ¿µ×²ã¡£ÔÚ¾ÀúÁË¿ªÔ´ÐÒé·ç²¨ºó£¬¿ÉÒÔ¿´³ö
Facebook ¶ÔÓÚ react native »¹ÊǺܿ´Öصģ¬ ÕâЩµ×²ãÖØ¹¹ÓÅ»¯µÄµØ·½£¬Ö÷Òª¼¯ÖÐÓÚ£º
Ê×ÏÈ£¬¸Ä±äÏß³ÌÄ£ÐÍ¡£UI ¸üв»ÔÙÐèÒªÔÚÈý¸ö²»Í¬µÄÏß³ÌÉÏÖ´ÐУ¬¶øÊÇ¿ÉÒÔÔÚÈÎÒâÏß³ÌÉÏͬ²½µ÷Óà JavaScript
½øÐÐÓÅÏȸüУ¬Í¬Ê±½«µÍÓÅÏȼ¶¹¤×÷ÍÆ³öÖ÷Ị̈߳¬ÒԱ㱣³Ö¶Ô UI µÄÏìÓ¦¡£
Æä´Î£¬½«Òì²½äÖȾ¹¦ÄÜÒýÈë React Native ÖУ¬ÔÊÐíÖ´Ðжà¸öäÖȾ²¢¼ò»¯Òì²½Êý¾Ý´¦Àí¡£
×îºó£¬¼ò»¯ÇŽӣ¬ÈÃËü¸ü¿ì¡¢¸üÇáÁ¿¡£ÔÉúºÍ JavaScript Ö®¼äµÄÖ±½Óµ÷ÓÃЧÂʸü¸ß£¬²¢ÇÒ¿ÉÒÔ¸üÇáËɵع¹½¨µ÷ÊÔ¹¤¾ß£¬Èç¿çÓïÑÔ¶ÑÕ»¸ú×Ù¡£
2¡¢Weex
ûÓÐËÀ£¡°¢À﹫¿ªWeex¼¼Êõ¼Ü¹¹£¬»¹¿ªÔ´ÁËÒ»´ó²¨×é¼þ¡£ 2018Äê³õµÄÐÂÎÅ¿ÉÒÔ¿´³ö£¬weex µÄÔâÓöÓеãÀàËÆÔø¾µÄ
Duddo£¨DubboÒòΪÄÚ²¿¾ºÕù±»°¢ÀïÒ»¶È·ÅÆúά»¤£©£¬ÕⲨթʬºó weex ±»Íйܵ½ÁËApache£¬¶øgithubµÄ
weexteam Èç½ñÒ²»¹±£³ÖןüУ¬Ï£ÍûºóÐøÄÜÓжàºÃµÄ·¢Õ¹£¬ÊÃÄ¿ÒÔ´ý°É¡£
3¡¢Flutter
Flutter ÊÇ Google ¿çÆ½Ì¨ÒÆ¶¯UI¿ò¼Ü£¬Dart×÷Ϊ¹È¸èµÄÇ×¶ù×ÓÔÚ Flutter
ÖÐʹÓ㬲¢ÇҹȸèвÙ×÷ϵͳ Fuchsia Ö§³Ö Dart£¬Ê¹Óà Flutter ×÷Ϊ²Ù×÷UI¿ò¼Ü¡£ÕâЩ¼¯ºÏµ½Ò»ÆðÄÑÃâÈÃÄ㻳ÒÉ
Android ÊÇ·ñÒª±»¹È¸èÅׯúµÄÏë·¨¡£
»òÕßÈç½ñÏÈ Android µÈƽ̨ÉÏÍÆ¹ã Flutter Óë Dart£¬¾ÍÊÇΪÁËÒÔºó¸úºÃµÄ¹ý¶Éµ½ÐÂϵͳÉÏ£¬±Ï¾¹¿ª·¢ÕßÊDzÙ×÷ϵͳµÄÉúÃüԴȪ֮һ¡£¶ø
Java Óë JVM »òÕß¿ÉÒÔ±»¹È¸èÍêÈ«Å׿ª¡£µ±È»£¬Ä¿Ç°¿´ÆðÀ´ Flutter Ã²ËÆ»¹È±ÉÙһЩÓï·¨ÌÇ£¬Ç¶Ì×ÏÂÀ´µÄ´úÂëÓе㲻ÈÌÖ±ÊÓ£¬»òÕßµ½Õýʽ°æÖ®ºó£¬ÎÒÃǸüÄܸÐÊܳöËüµÄÃÀÀö°É¡£
×îºó
ÄÚÈÝÓе㳤£¬ÆäʵºÜ¶àµã²¢Ã»ÓÐϸÖµÄÕ¹¿ªËµÃ÷£¬µ«ÊÇͨ¹ý±¾ÎÄ£¬¶ÔÓÚÒÆ¶¯¶Ë¿çƽ̨µÄÏÖ×´ÓëδÀ´£¬Ï£Íû¿ÉÄܸøÄã´øÀ´Ò»µã°ïÖú¡£
³¬ÍêÕû¿çƽ̨¿ªÔ´ÏîÄ¿

|