Äú¿ÉÒÔ¾èÖú£¬Ö§³ÖÎÒÃǵĹ«ÒæÊÂÒµ¡£

1Ôª 10Ôª 50Ôª





ÈÏÖ¤Â룺  ÑéÖ¤Âë,¿´²»Çå³þ?Çëµã»÷Ë¢ÐÂÑéÖ¤Âë ±ØÌî



  ÇóÖª ÎÄÕ ÎÄ¿â Lib ÊÓÆµ iPerson ¿Î³Ì ÈÏÖ¤ ×Éѯ ¹¤¾ß ½²×ù Model Center   Code  
»áÔ±   
   
 
     
   
 ¶©ÔÄ
  ¾èÖú
ÒÆ¶¯¶Ë¿çƽ̨¿ª·¢µÄÉî¶È½âÎö
 
  3461  次浏览      31
 2019-5-24
 
±à¼­ÍƼö:
±¾ÎÄÀ´×ÔÓÚ¼òÊé,±¾ÎÄÖ÷Òª½éÉܵ±ÏÂ¿çÆ½Ì¨ÒÆ¶¯¿ª·¢µÄÏÖ×´¡¢ÊµÏÖÔ­Àí¡¢¿ò¼ÜµÄÑ¡Ôñ£¬Ï£Íû¶ÔÄúµÄѧϰÓÐËù°ïÖú¡£

Ò»¡¢Ç°ÑÔ

ΪʲôÎÒÃÇÐèÒª¿çƽ̨¿ª·¢£¿ ±¾ÖÊÉÏ£¬¿çƽ̨¿ª·¢ÊÇΪÁËÔö¼Ó´úÂ븴Ó㬼õÉÙ¿ª·¢Õß¶Ô¶à¸öƽ̨²îÒìÊÊÅäµÄ¹¤×÷Á¿£¬½µµÍ¿ª·¢³É±¾£¬Ìá¸ßÒµÎñרעµÄͬʱ£¬Ìṩ±È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 Ã²ËÆ»¹È±ÉÙһЩÓï·¨ÌÇ£¬Ç¶Ì×ÏÂÀ´µÄ´úÂëÓе㲻ÈÌÖ±ÊÓ£¬»òÕßµ½Õýʽ°æÖ®ºó£¬ÎÒÃǸüÄܸÐÊܳöËüµÄÃÀÀö°É¡£

×îºó

ÄÚÈÝÓе㳤£¬ÆäʵºÜ¶àµã²¢Ã»ÓÐϸÖµÄÕ¹¿ªËµÃ÷£¬µ«ÊÇͨ¹ý±¾ÎÄ£¬¶ÔÓÚÒÆ¶¯¶Ë¿çƽ̨µÄÏÖ×´ÓëδÀ´£¬Ï£Íû¿ÉÄܸøÄã´øÀ´Ò»µã°ïÖú¡£

³¬ÍêÕû¿çƽ̨¿ªÔ´ÏîÄ¿

 

   
3461 ´Îä¯ÀÀ       31
Ïà¹ØÎÄÕÂ

Éî¶È½âÎö£ºÇåÀíÀôúÂë
ÈçºÎ±àд³öÓµ±§±ä»¯µÄ´úÂë
ÖØ¹¹-ʹ´úÂë¸ü¼ò½àÓÅÃÀ
ÍŶÓÏîÄ¿¿ª·¢"±àÂë¹æ·¶"ϵÁÐÎÄÕÂ
Ïà¹ØÎĵµ

ÖØ¹¹-¸ÄÉÆ¼ÈÓдúÂëµÄÉè¼Æ
Èí¼þÖØ¹¹v2
´úÂëÕû½àÖ®µÀ
¸ßÖÊÁ¿±à³Ì¹æ·¶
Ïà¹Ø¿Î³Ì

»ùÓÚHTML5¿Í»§¶Ë¡¢Web¶ËµÄÓ¦Óÿª·¢
HTML 5+CSS ¿ª·¢
ǶÈëʽC¸ßÖÊÁ¿±à³Ì
C++¸ß¼¶±à³Ì