① 浠涔堟槸璺ㄧ粓絝
閾炬帴錛歨ttps://juejin.cn/post/6944289729990885389
閴翠簬寰堝氫漢瀵硅法絝鎶鏈鎰熻夊緢紲炵橈紝鉶界劧鎴戝疄闄呬笂榪樻病鏈夊啓榪囦竴涓浠0鍒1鐨勮法絝妗嗘灦錛屼絾鏄鎴戞浘緇忕敤Yoga(甯冨矓寮曟搸Yoga(React-Native)鍋氳繃涓浜涚畝鍗曠殑璺ㄧ鐨勪簨鎯咃紝鍚庢潵鐢ㄤ簡Weex銆傜爺絀惰法絝鏈変竴孌墊椂闂翠簡錛屾兂縐戞櫘涓涓嬨
縐戞櫘涔嬪墠錛岄栧厛浣犺佺煡閬擄紝涓轟粈涔堥渶瑕佽法絝鎶鏈錛熸垜浠閫氬父浼氭妸Weex鍜孯eact-Native(鏈鏂囩粺縐頒負RN)璇存垚鏄璺ㄧ鎶鏈鍚(Flutter娌℃湁鍗曠嫭鎻愬埌)錛
鍏跺疄涓嶆槸錛屽ソ鍍廇ndroid/iOS鏈鏉ユ槸涓や釜浜虹殑錛屼絾鏈緇堝彉鎴愪簡涓涓浜恆傛垜鐨勪漢鍔涘噺灝戜簡涓鍗婏紒
浣嗗墠鎻愭槸榪欎釜浜哄姏闇瑕佹噦Android錛宨OS錛孞avaScript錛屾洿鎳傦紝涓嶇劧鍑轟簡闂棰橈紝鎬庝箞淇錛
鎵浠ュ湪涓鍥界殑浜掕仈緗戠幆澧冧笅錛屽緢闅炬嫑鍒拌繖鏍風殑浜恆傚ぇ瀹墮兘鍦ㄧ爺絀禤PT鏋舵瀯鎶鏈錛岃亴鍦虹敓瀛樼悊璁猴紝30宀佸備綍瑙ｈ劚璐㈠瘜銆傛垜浠濡備綍鏈夋椂闂存墿灞曟垜浠鐨勬妧鏈鍫嗘爤錛
絝涓婂紑鍙戝緢鎯錛屾繪湁宕╂簝(浣跨敤宕╂簝錛岄棯閫)鑰屼笖娌℃湁鍔炴硶榪滅▼淇澶嶃傚彧鑳界瓑涓嬩竴涓鐗堟湰緇欎嬌鐢ㄥ競鍦烘帹涓涓淇澶峛ug鐨勬柊鐗堟湰銆
浣嗗傛灉鎺ㄩ佹柊鐗堟湰錛岀敤鎴峰彲鑳戒笉浼氬崌綰с傚洜姝わ紝璁稿氬叕鍙哥爺絀朵簡鍚勭嶇儹淇澶嶆嗘灦錛屽挨鍏舵槸鍦ˋndroid騫沖彴涓娿傛湁寰堝氱儹淇澶嶆嗘灦錛屼富瑕佹槸鐢盌exClassLoader鏉ュ畬鎴愩
浣嗘槸錛屾渶鏃╃殑鏃跺欙紝WebView鏈変竴涓寰堝ぇ鐨勯棶棰橈紝灝ゅ叾鏄疉ndroid銆傝屼笖鍔犺澆緗戦〉鑲瀹氳佽姳鏃墮棿錛岃繃紼嬩腑灞忓箷浼氫竴鐗囩┖鐧界瓑絳夈傛墍浠ュ緢澶氫漢鍥寸粫榪欎簺鍋氫簡寰堝氫紭鍖栥傛垜涓浜鴻夊緱鏈鏈夌敤鐨勫叾瀹炴槸綰誇笅濂楅愩傚悓鏃訛紝姣忎竴浠WebView涔熷湪鏇存柊鍗囩駭銆傜劧鍚庝竴浜涙湁瀹炲姏鐨勫叕鍙稿紑鍙戜簡鑷宸辯殑鎵璋撴祻瑙堝櫒鍐呮牳錛屽悇縐嶉粦縐戞妧錛屽備綍鎻愰燂紝鏀鎸佸悇縐嶇壒鎬х瓑絳夈備絾鏄濂藉儚娌℃湁寮婧愶細dog:
涓嶇畻銆傝繖鍙鏄璺ㄥ畨鍗撳拰iOS錛屼笉鎶婃垜鐨凱C褰撶洰鐨勶紵
鍏跺疄嫻忚堝櫒鏄璺ㄧ鐨勶紝姣忎釜騫沖彴閮藉彲浠ョ敤Chrome(鍏朵粬嫻忚堝櫒涓昏佹槸鎯沖仛涓嶅仛)錛佷絾鏄瀹冧篃鏈夎嚜宸辯殑闂棰橈紝鍥犱負鍚勫墮兘鏈夎嚜宸辯殑嫻忚堝櫒錛屽唴鏍鎬笉鍚岋紝鍒掑垎瓚婃潵瓚婂ぇ銆俢hrome(Blink)/Safari(WebKit)/Firefox(Gecko錛)絳夌瓑錛屽挨鍏舵槸瀵筩ss鐨勬敮鎸併
Developer.mozilla.org/zh-CN/docs/.榪欎釜緗戠珯鍙浠ユ鏌ヤ竴浜涙祻瑙堝櫒鐨勫吋瀹規с備緥濡傦紝杈規嗗藉害鐨勫吋瀹規у備笅錛
鍏跺疄涔熶笉鏄涓嶅彲浠ワ紝浣嗘槸榪欐牱鍋氱浉褰撲簬鐩存帴涓篛penGL鎴栬呭叾浠栧浘褰㈠紩鎿庣紪紼嬶紝鑰屼笖瑕佽嚜涓嬭屼笂鐨勬惌寤轟竴濂楁覆鏌撴満鍒訛紝鎵撳寘鍚勭嶅熀紜UI緇勪歡緇欏紑鍙戣呬嬌鐢錛屾垨鑰呯暀涓嬪緢澶氭紡媧炶╁紑鍙戣呰嚜瀹氫箟鑷宸辯殑UI錛岄潪甯稿嶆潅銆備絾鍏跺疄Flutter灝辨槸榪欎箞鍋氱殑錛屾墍浠Flutter2.0鍙堝紑濮嬪悜妗岄潰絝鍙戝睍浜嗭紝鑰屼笖涓嶅矓闄愪簬Android/iOS錛屼絾涓嶇煡閬撹兘璧板氳繙銆傝繕鏈夌殑鏄鎼濺eact-Native-Skia鐨勶紝鎵浠ョ敤js浠ｇ爜鐩存帴璋僑kia(2D鍥懼艦娓叉煋寮曟搸)錛(鍏蜂綋娌＄湅榪)
浣犲啓鐨凧avaScript浠ｇ爜涓轟粈涔堣兘榪愯岋紵榪欏彇鍐充簬javaScript寮曟搸銆
鎵旂粰瀹冧竴孌礿s浠ｇ爜(瀹為檯涓婃槸涓涓鏂囨湰瀛楃︿覆)錛屽畠灝辮兘甯浣犺＄畻緇撴灉錛屽勭悊閫昏緫銆
甯歌佺殑Weex銆丷N銆丠ippy涔熶緷璧栦簬姝(MLN浣跨敤Lua)榪涜岄昏緫澶勭悊銆
榪欎釜鏃跺欎細鏈夊緢澶氭傚康銆
鏈変簺浜哄枩嬈㈡妸JavaScript寮曟搸縐頒負JavaScriptCore(涓嶇煡閬撲負浠涔堬紝鍙鑳芥槸鍥犱負iOS寮鍙戣呮墠鏄鐮旂┒榪欎簺姣旇緝娣卞叆鐨勪漢錛屽洜涓鴻嫻鏋滅殑JavaScript寮曟搸鍙獼avaScriptCore銆傝嫻鏋滅殑榪欎釜JavaScriptCore鍛錛熷緢澶氫漢鍠滄㈢О涔嬩負JSCore鎴栬匤SC)銆傛墍浠ワ紝鍚庢潵鐪嬪埌榪欎簺鍚嶈瘝錛屾垜鎬繪槸鎶婂畠浠甯﹀叆璇澧冧腑鍘繪劅鍙椾粬鎯寵寸殑鏄疛avaScript寮曟搸榪樻槸鑻規灉鐨凧avaScript寮曟搸3354 JavaScript Core (JSCore/JSC)銆
鍏堣碕avaScript寮曟搸銆
鏄鐨勶紝鏈夎繖涔堝氾紒褰撶劧榪樻湁JavaScriptCore(涓嶅湪鍥句腑)銆
鏈鍚庝竴琛屾槸璺戝垎錛岃秺澶氳秺濂姐傛湁JIT鐨刅8鍦3w鎸傛墍鏈変笢瑗褲傚叾涓璔uikJS鏋佸皬錛屽緱鍒嗗緢楂樸備及璁″緢澶氫漢浼氱敤QuikJS鍋氳法絝疛avaScript寮曟搸鍚э紵璧灝斿ⅷ鏂鏄鐢辮劯涔﹀壋閫犵殑銆傜湅鏉Android鐩鍓嶅湪RN涓浣跨敤鐨凧avaScript寮曟搸宸茬粡鍙栦唬浜嗕箣鍓嶄嬌鐢ㄧ殑JavaScriptCore銆俁N涓轟粈涔堜竴鐩翠笉鐢╒8錛熻繖涓鎴戜篃涓嶇煡閬.
浣嗘槸寰堝氫漢閮藉湪鎼濧ndroid鐨刅8欏圭洰錛孏ithub涓婁篃鏈変竴浜涘紑婧愰」鐩銆傚叾嬈★紝iOS涓嶆敮鎸丣IT錛屾湁鑷宸辯殑JavaScriptCore錛屾病鏈塉IT鏀筕8浼間箮鎰忎箟涓嶅ぇ銆
涓涓姝ｅ父鐨勮法絝妗嗘灦鏈綆鍗曠殑鎯呭喌濡備笅(鍚庨潰浼氳ㄨ洪棶棰橈紝閫愭ヤ赴瀵):
鐢ㄤ竴涓
綆鍗曠殑渚嬪瓙鐪
鍋囪炬垜鐨 js 鏂囦歡涓灝辨槸瑕 灞曠ず涓涓綰㈣壊鐨 div 鏂瑰潡 銆傞偅涔堥栧厛錛岀浼氭妸榪欎釜鏂囨湰浼犵粰 JavaScript Runtime錛屽畠瑙ｆ瀽瀹屽悗褰㈡垚涓涓綰﹀畾鐨勬牸寮忥紝姣斿傚備笅鐨 JSON 鏍煎紡(閲岄潰鐨勫肩敤鏉ユ弿榪版槸涓涓100*100綰㈣壊鏂瑰潡錛屾垜闅忎究瀹氫箟鐨)
{ "name":"div", "width":"100", "height":"100", "background":"red"}
閫氳繃 JavaScript Runtime 鍜 絝(Android/iOS) 閫氫俊錛屾妸榪欎釜娑堟伅浼犲洖鍘匯
絝鎷垮埌浜嗘秷鎮錛屽彂鐜拌佸壋寤轟竴涓 100*100 鐨勫彨鍋 div 鐨勪笢瑗匡紝娌℃湁 div 鍟婏紒榪欏氨闇瑕佺涓婃彁鍓嶅煁濂戒唬鐮侊紝姣斿 Android 閲屾湁 FrameLayout錛岄偅涔堝氨鏈夌被浼肩殑娉ㄥ唽浠ｇ爜
// 浼浠ｇ爜register("div", FrameLayout.class);
鐒跺悗絝灝辯煡閬撲簡錛宱h錛佹垜闇瑕佸壋寤轟竴涓闀100瀹100鐨勬ｆ柟褰銆
棣栧厛錛岃繖鏄妗嗘灦璁捐℃彁鍓嶆濊冨ソ鐨勶紝絀剁珶瑕佹敮鎸佸摢浜涘熀紜緇勪歡錛屾瘮濡 image 銆乼ext 絳夌瓑銆傝屼笖涓鑸榪欓噷閮戒細寮涓鍙ｅ瓙錛岃╁紑鍙戣呭彲浠ヨ嚜宸辨墿灞曠粍浠訛紝姣斿備綘闇瑕佷竴涓妯婊戝垪琛錛屾病鎻愪緵鎬庝箞鍔烇紵鐪嬬湅 div 鎬庝箞娉ㄥ唽鐨勶紝鎸夌収瀹冪殑榪囩▼娉ㄥ唽涓涓鍒楄〃灝卞ソ浜嗐傝繖涔熷彲浠 PPT 鍚規垚錛 鎵╁睍璺ㄧ妗嗘灦 錛屽叾瀹 闂ㄦ涙瘮鑷瀹氫箟 View 榪樿佷綆 銆
鍓嶉潰璇翠簡 JavaScript Engine錛岃繖閲屽拫鍙堟潵浜嗕釜 Runtime錛
JavaScript Engine 鑳藉仛浠涔堬紵
浠涔堥兘鍋氫笉浜嗭紝鍙鑳借В鏋愭墽琛 js 浠ｇ爜
閭ｄ箞闂棰樻潵浜嗭紝鎴戞庝箞鍘 鎻忚堪 鎴戝啓鐨 js 浠ｇ爜浠ｈ〃鐨 瑙嗗浘 鍛錛熷叾瀹炰笉鐢ㄦ弿榪幫紝js 浠ｇ爜鍙瑕佸湪 鍐呭瓨涓 緇存姢濂戒竴涓鏍戝艦緇撴瀯灝卞ソ浜嗭紝灝辨槸涓涓 Object錛屽洜涓哄疄浣撳湪鍏蜂綋鐨勭涓婏紝鎬庝箞鐞嗚В鍛錛
宸﹁竟鍙瑕佸湪鍐呭瓨涓緇存姢濂借繖鏍蜂竴涓鏍戝艦緇撴瀯灝卞ソ浜嗭紝浼犻掔粰瀹㈡埛絝鏃訛紝杞涓
{ "name":"div", "children":[ { "name":"image" }, { "name":"div", "children":[] } // 絳夌瓑 ]}
絝涓婃嬁鍒版秷鎮錛屽壋寤鴻嗗浘涓哄彸鍥句腑鐨勭粨鏋勫嵆鍙銆
濡備綍緇存姢濂借繖涓妯″瀷鍛錛熻皟鐢ㄤ粈涔 js 鐨勬柟娉曞彂閫佹秷鎮鍛錛熸庝箞緇欒繖浜涗釜 div 鍔犱笂 css 鏉ユ弿榪板畠鐨勫ぇ灝忓艦鐘跺憿錛熺瓑絳夋洿澶嶆潅鐨勪竴緋誨垪鐨勫墠絝闂棰橈紝閮介渶瑕 鍐欎唬鐮 鏉ュ疄鐜般
鎵浠ヤ竴鑸閮戒細鏈変釜 core.js 鎴栬 framework.js 綾諱技鐨勪竴鍫 js 浠ｇ爜錛屽氨鏄鐢ㄦ潵澶勭悊榪欎簺浜嬫儏錛岃岃繖浜涗唬鐮佸悓鏍蜂緷闈 JavaScript Engine 鏉ユ墽琛屻
浠庤屾墍璋撶殑 JavaScript Runtime 錛屾垜瑙夊緱鍙浠ュ崟綰鐨勭悊瑙ｄ負 JavaScript Engine 鑷韜鐨勪唬鐮佽窇璧鋒潵鍚庣殑鐜澧冿紝涔熷彲浠ョ悊瑙ｄ負 core.js 絳夎璺ㄧ妗嗘灦鎵闇瑕佺殑銆佸寘鍚浜嗗悇縐嶉昏緫鐨勫墠絝浠ｇ爜琚鍔犺澆榪愯屽悗鐨勭幆澧冦
褰撲綘鐢ㄨ繖浜涜法絝妗嗘灦鐨勬椂鍊欙紝浣犱細鍙戠幇浠栦滑鍙鏀鎸 css 瀛愰泦 錛岃屼笖甯冨矓鏂瑰紡鍩烘湰閮芥槸 flexbox(涓縐嶅竷灞妯″瀷) 銆
閭ｄ箞姣斿備綘鍐欎簡涓涓妯鐫瀹圭撼浜嗕笁涓灝忔柟鍧楃殑澶ф柟鍧楋紝浣犵殑鍓嶇 css 浠ｇ爜鑲瀹氳佸啓鎴愶紝 flex-diretion:row 錛岄偅涔堟姏緇欑涓婄殑娑堟伅鍙鑳藉備笅錛
{ "name":"div", "attribute":{ // 浣跨敤甯冨矓 "flex-diretion":"row" }, "children":[ { "name":"div" }, { "name":"div" }, { "name":"div" } ]}
絝涓婃嬁鍒拌繖涓娑堟伅錛岄兘涓嶇煡閬 flex-direction 鏄浠涔堛傚綋鐒訛紝浣犲彲浠ヨ嚜宸卞啓涓涓瑙ｆ瀽搴撴潵瑙ｏ紝浣嗘槸 Yoga 甯浣犲仛浜嗚繖浠朵簨錛
鎵浠 RN 浣跨敤鐨勬槸 Yoga 甯冨矓寮曟搸(鏀鎸 flexbox錛屼篃鏄 Facebook 鎼炵殑)銆
Weex 浼間箮涓寮濮嬫槸鐢ㄧ殑 Yoga錛屽悗鏉ヨ嚜宸卞啓浜嗕竴濂楋紵
榪欎釜鍦版柟灝卞嚭鐜頒簡涓涓鍚嶈瘝 Layout Engine 錛屽畠灝辨槸甯鎴戜滑澶勭悊鍚勭嶅竷灞鍙傛暟鐨勶紝鐒跺悗甯鎴戜滑綆楀ソ姣忎釜瑙嗗浘鐨勫潗鏍囷紝鐒跺悗絝涓婃嬁鍒板潗鏍囧悗璁劇疆瀵瑰簲鐨勮嗗浘鐨勫潗鏍囷紝涓涓浜曚簳鏈夋潯鐨勮嗗浘渚垮睍紺轟簡鍑烘潵銆傚傛灉浣犺夊緱浣犲啓鐨勫竷灞瑙ｆ瀽綆楁硶瓚呰秺浜 Yoga 絳夌瓑錛岄偅涔堜綘瀹屽叏鍙浠ヨ嚜宸卞啓涓濂椼
姣斿備粠 JavaScript Runtime 澶勭悊瀹屽悇縐嶅睘鎬т簡錛岃佹覆鏌撹嗗浘浜嗭紒浼犱簡涓孌 JSON 緇欑銆
絝涓婃墜鎸囩偣浜嗕竴涓嬭繖涓瑙嗗浘錛岄偅涔熻佸皝瑁呮垚涓涓娑堟伅浼犻掔粰 JavaScript Runtime錛岀劧鍚庤Е鍙戜綘涔嬪墠鍐欑殑 js 鐨勭洃鍚浠ｇ爜錛屾瘮濡傜偣鍑誨悗寮逛竴涓寮圭獥錛岄偅灝卞張瑕佸皝瑁呬竴涓璋冪敤寮圭獥鏂規硶鐨勬秷鎮緇欑銆
灝辨槸榪欐牱鏉ユ潵鍥炲洖銆
鎵浠ヤ袱杈歸兘鏈夎嚜宸辯殑娑堟伅闃熷垪銆
鑰屼笖褰撲綘鍋氬姩鐢昏繕鎯崇洃鍚鍔ㄧ敾榪囩▼鐨勬椂鍊欙紝鑲瀹氬湪鐭鏃墮棿鍐呭彂閫佷簡澶ч噺娑堟伅錛岃繖浜涜繃紼嬭偗瀹氭槸 闇瑕佷紭鍖 鐨勩
騫朵笖錛佹嵁鎴戜釜浜虹敤 Weex 鐨勭粡楠岋紝鏈夌殑 flexbox 灞炴т袱絝閮戒笉緇熶竴(鍙鑳芥槸 Weex 鐨 Bug錛屾瘯絝 KPI 欏圭洰錛岄兘涓嶇淮鎶や簡)
鎴戣板緱褰撴椂榪樺紑鐜╃瑧璇達紝鐢ㄤ簡 Weex 緇堜簬棰嗘偀浜嗚法絝鐨勭湡璋涳細
if(platform === 'Andoird') { // 宸寮傚寲閫昏緫} else if(platform === 'iOS') { // 宸寮傚寲閫昏緫}
璺ㄧ鐨勪唬浠峰氨鏄錛屼綘 鏈浠ヤ負 鐪熺殑鍙浠ヤ竴濂椾唬鐮佷袱絝璺戱紝鍚庢潵鍙戠幇鐪熺殑鏈夌偣鍋氭ⅵ浜(榪 H5 鏈夋椂鍊 Andoird/iOS 閮戒笉涓鑷達紝鍥犱負鐢ㄧ殑鍐呮牳閮戒笉鏄涓涓)錛屼唬鐮侀噷鏈変笉灝戠殑 if-else銆
鎵浠ョ粡榪囦笂闈㈢殑涓緋誨垪縐戞櫘錛屼竴涓璺ㄧ妗嗘灦鎴愪簡榪欐牱錛
榪欏叾涓涓鑸鏄闇瑕佷竴涓瀹㈡埛絝銆佷竴涓鍓嶇銆佷竴涓鎳 JavaScript Engine 浼 C/C 鐨勬潵鍒嗗埆寮鍙戙
鎴戣櫧鐒舵病寮鍙戣繃錛屼絾鏄鎰熻変細鏈夊緢澶氶棶棰樸
姣斿 JavaScript Runtime 鍦ㄥ彟涓涓榪涚▼鐨勮瘽錛岃法榪涚▼閫氫俊錛
姣斿傛秷鎮閫氫俊榪囦簬棰戠箒鏄涓嶆槸灝變細鏈夊悇縐嶈繛閿佸弽搴旓紝鎺夊撫鍟娿佷簨浠跺搷搴斾笉鍙婃椂銆佸姩鐢諱笉嫻佺晠鍟婏紝鎬庝箞浼樺寲錛
鍏跺疄鎴戞湰韜涓鐩磋嚜璇╁枩嬈㈢爺絀跺師鐞嗭紝浣嗘槸鐩磋嚦浠婃棩鎴戜篃娌＄湡鐨勪竴琛岃岀湅榪囪法絝妗嗘灦鐨勬簮鐮侊紝鎴戠煡閬撶殑榪欎簺涔熸湭蹇呮槸瀵圭殑錛屽彧鏄涔嬪墠鍋氳繃 Weex 鐨勪竴浜涘伐浣滅◢寰鐮旂┒浜嗕竴涓嬶紝榪樻槸鎸烘儹鎰х殑銆
鏃㈢劧浣犺嚜縐板枩嬈㈢爺絀跺師鐞嗭紝涓轟粈涔堜笉鐪嬪憿錛
閾炬帴錛歨ttps://juejin.cn/post/6944289729990885389
鐩稿叧闂絳旓細
鐩稿叧闂絳旓細鎵嬫満絝鍜岀數鑴戠鍚勬槸浠涔堬紵
鐢佃剳絝鍜屾墜鏈虹錛屽疄闄呬笂璇寸殑灝辨槸騫沖彴闂棰樸
褰撴垜浠浣跨敤鐢佃剳鐨勬椂鍊欙紝鐢佃剳鍩烘湰浣跨敤鐨勬搷浣滃鉤鍙版槸windows錛屾垨鑰呰嫻鏋滅瓑甯哥敤鎿嶄綔緋葷粺銆
鑰屾墜鏈轟笂鐢ㄧ殑騫沖彴錛屽傚畨鍗擄紝鑻規灉鐨処OS錛屽綋騫磋哄熀浜氱殑濉炵彮錛岄粦鑾撶殑緋葷粺錛岄兘鍙鍋氭墜鏈虹銆
閭ｄ箞鎬庝箞瀹氫箟鎵嬫満絝鍜岀數鑴戠鍛錛屾垜浠鍙浠ヨ繖涔堢悊瑙ｏ紝濡傛灉鐢ㄧ數鑴戞搷浣滅郴緇熺殑璁懼囷紝鍗充究鏄騫蟲澘鐢佃剳錛屼綘涔熷彲浠ョ悊瑙ｆ垚鏄鐢佃剳絝銆
濡傚井杞騫蟲澘鐢佃剳surface錛屼粬鐨勫畾浣嶆槸騫蟲澘涔熸槸鐢佃剳錛
鎴戜滑寰堝氱殑騫蟲澘錛屽氭暟浣跨敤鐨勬槸瀹夊崜緋葷粺錛岃嫻鏋滅殑褰撶劧灝辨槸IOS錛屼絾鏄騫蟲澘浣跨敤鍩烘湰浣跨敤鐨勭Щ鍔ㄥ鉤鍙幫紝涔熷氨鍙浠ョ湅鎴愭槸鎵嬫満絝銆
浣嗘槸錛屽傛灉榪欎釜縐誨姩璁懼囩殑騫沖彴浣跨敤鐨勬槸鐢佃剳鐨勬搷浣滅郴緇熺殑鏃跺欙紝浠栨墍浣跨敤鐨勫鉤鍙幫紝涔熷氨鎴愪簡鐢佃剳絝銆
② 澶氱疉PP寮鍙戞妧鏈
銆愯繖孌墊椂闂翠笉鑳藉嚭闂錛屾墦綆楀啓涓獮PP鏉ョ＄悊瀛︾敓鍜岃劇▼錛岀粡榪囧嚑澶╃殑鎶鏈閫夊瀷紜瀹氫笅鏉ワ紝鏁寸悊浜嗚繖浠芥枃妗ｄ緵瀛︾敓瀛︿範鍜屽弬鑰冦
鎵庡疄鐨勭▼搴忓熀紜+鑹濂界殑緙栫▼鎬濇兂+鎺屾彙蹇呴渶鐨勬妧鏈+鐔熸倝閫傜敤鐨勬嗘灦+涓瀹氱殑鍥炬枃澶勭悊鑳藉姏+緇嗚嚧鐨勫姛鑳借捐+鑰愬績鐨勬祴璇曚範鎯+鑷寰嬬殑欏圭洰榪涘害綆＄悊+榪炵畫鍥哄畾鐨勬椂闂+鍔ㄤ漢鐨勯煶涔愶紝榪欐牱浣犲氨鍙浠ユ剦蹇鐨勫紑濮嬬嫭絝婣PP鍒朵綔浜唦錛坁_*)鎶鏈鏍html+css+javascriptNodeJs+React+RexTaro+TaroUI+DvaJS+TypeScript+ScssJest+ESLint+JSDoc+Gitwx+wxCloud寮鍙戝伐鍏vscode+寰淇″紑鍙戣呭伐鍏鐩褰曠綉欏靛熀紜鎶鏈疕TML瓚呮枃鏈鏍囪拌璦CSS灞傚彔鏍峰紡琛↗avaScript鑴氭湰璇璦js璇璦鍜屾爣鍑嗗嚱鏁板紡緙栫▼綰鍑芥暟鏌閲屽寲鍑芥暟涓嶅彲鍙樻暟鎹鐢熸垚鍣ㄥ嚱鏁板紓姝ュ嚱鏁扮綉欏墊妧鏈榪涢樁JSXReact涓鐨勭晫闈㈡弿榪拌璦TypeScript涓ユ牸JS璇娉曠殑瓚呴泦SASS/SCSS棰勫勭悊CSS鐨勮秴闆嗗簲鐢ㄦ嗘灦NodeJs浣跨敤JS鐨勮法絝寮曟搸React鍓嶇妗嗘灦Flutter鍘熺敓縐誨姩搴旂敤UI妗嗘灦Taro澶氱寮鍙戝墠絝妗嗘灦TaroUI鍩轟簬Taro鐨刄I妗嗘灦AntDesign鍩轟簬React鐨刄I緇勪歡搴揜ex鍩轟簬Reactr鐘舵佺＄悊搴揇vaJS鍩轟簬rex鐨勬暟鎹嫻佹嗘灦寮鍙戝伐鍏稥SLint鎻掍歡鍖朖S浠ｇ爜媯嫻嬪伐鍏稪est嫻嬭瘯妗嗘灦Git浠ｇ爜鐗堟湰綆＄悊宸ュ叿jsDoc娉ㄩ噴鏂囨。鐢熸垚宸ュ叿騫沖彴妗嗘灦wx寰淇″皬紼嬪簭wxCloud寰淇′簯寮鍙戝叾浠栧伐鍏稩con鍥炬爣鍒朵綔綆＄悊騫沖彴Color閰嶈壊緗戞湇鍔＄鎶鏈疢ongoose鍒嗗竷寮忔暟鎹搴撻」鐩寮鍙戝弬鑰冨紑鍙戣呮墜鍐岀綉欏靛熀紜鎶鏈MDNWeb寮鍙戞妧鏈HTML瓚呮枃鏈鏍囪拌璦MDNHTML甯鍔瓚呮枃鏈鏍囪拌璦錛圚TML錛孒yperTextMarkupLanguage錛夌敤浜庢弿榪般佸畾涔夌綉欏靛唴瀹廣CSS灞傚彔鏍峰紡琛MDNCSS甯鍔灞傚彔鏍峰紡琛錛圕SS錛孋ascadingStyleSheets錛夌敤浜庢弿榪扮綉欏靛唴瀹圭殑澶栬備笌灞曠ず銆JavaScript鑴氭湰璇璦js璇璦鍜屾爣鍑MDNJavaScript甯鍔JavaScript鏄鍦ㄦ祻瑙堝櫒涓榪愯岀殑緙栫▼璇璦銆傚畠鍙浠ヤ負浣犵殑緗戠珯鎴栧簲鐢ㄧ▼搴忔坊鍔犱氦浜掓у拰鍏朵粬鍔ㄦ佸姛鑳姐傞殢鐫Node.js鐨勫嚭鐜幫紝浣犱篃鍙浠ュ湪鏈嶅姟鍣ㄤ笂榪愯孞avaScript銆鍑芥暟寮忕紪紼鍑芥暟寮忕紪紼嬪叆闂ㄦ暀紼-闃涓宄JS鍑芥暟寮忕紪紼嬫寚鍗-PDF涓嬭澆綰鍑芥暟浠涔堟槸綰鍑芥暟_浠ュ強涓轟粈涔堣佺敤綰鍑芥暟?鏌閲屽寲鍑芥暟[緲昏瘧]JavaScript涓鐨勬煰閲屽寲錛圕urryinginJavaScript錛涓嶅彲鍙樻暟鎹immutabledata璇﹁В浠庡紩鐢ㄦ暟鎹錛屽埌娣辨嫹璐濓紝鍐嶅埌涓嶅彲鍙樻暟鎹銆傝繖鏄璋冪敤鐨勮繘搴︼紝涔熸槸浼樺寲鐨勬彁鍗囥鐢熸垚鍣ㄥ嚱鏁MDNfunction*甯鍔寮傛ュ嚱鏁MDNasyncfunction甯鍔緗戦〉鎶鏈榪涢樁JSXReact涓鐨勭晫闈㈡弿榪拌璦React瀹樼綉-JSXJSX鏄涓縐岼avaScript鐨勮娉曟墿灞曪紝榪愮敤浜嶳eact鏋舵瀯涓錛屽叾鏍煎紡姣旇緝鍍忔槸妯＄増璇璦錛屼絾浜嬪疄涓婂畬鍏ㄦ槸鍦↗avaScript鍐呴儴瀹炵幇鐨勩傚厓緔犳槸鏋勬垚React搴旂敤鐨勬渶灝忓崟浣嶏紝JSX灝辨槸鐢ㄦ潵澹版槑React褰撲腑鐨勫厓緔狅紝React浣跨敤JSX鏉ユ弿榪扮敤鎴風晫闈銆TypeScript涓ユ牸JS璇娉曠殑瓚呴泦TypeScript涓鏂囨枃妗TypeScript鏄涓縐嶇敱寰杞寮鍙戠殑寮婧愩佽法騫沖彴鐨勭紪紼嬭璦銆傚畠鏄疛avaScript鐨勮秴闆嗭紝鏈緇堜細琚緙栬瘧涓篔avaScript浠ｇ爜銆俆ypeScript娣誨姞浜嗗彲閫夌殑闈欐佺被鍨嬬郴緇熴佸緢澶氬皻鏈姝ｅ紡鍙戝竷鐨凟CMAScript鏂扮壒鎬сSASS/SCSS棰勫勭悊CSS鐨勮秴闆SASS涓鏂囧畼緗SASS鏄鐢眀uby璇璦緙栧啓鐨勪竴嬈綾ss棰勫勭悊璇璦錛屽畠鏄涓嬈懼己鍖朇SS鐨勮緟鍔╁伐鍏鳳紝鏄瀵笴SS鐨勬墿灞曪紝瀹冨湪CSS璇娉曠殑鍩虹涓婂炲姞浜嗗彉閲(variables)銆佸祵濂(nestedrules)銆佹販鍚(mixins)銆佺戶鎵(extend)銆佸煎叆(inlineimports)絳夐珮綰у姛鑳斤紝榪欎簺鎷撳睍浠CSS鏇村姞寮哄ぇ涓庝紭闆呫SCSS鏄瘲ass3寮曞叆鏂扮殑璇娉曪紝鍏惰娉曞畬鍏ㄥ吋瀹笴SS3錛屽苟涓旂戶鎵誇簡Sass鐨勫己澶у姛鑳姐備篃灝辨槸璇達紝浠諱綍鏍囧噯鐨凜SS3鏍峰紡琛ㄩ兘鏄鍏鋒湁鐩稿悓璇涔夌殑鏈夋晥鐨凷CSS鏂囦歡銆係CSS闇瑕佷嬌鐢ㄥ垎鍙峰拰鑺辨嫭鍙瘋屼笉鏄鎹㈣屽拰緙╄繘銆係CSS瀵圭┖鐧界﹀彿涓嶆晱鎰燂紝鍏跺疄灝卞拰css3璇娉曚竴鏍鳳紝鍏跺悗緙鍚嶆槸鍒嗗埆涓.scss銆搴旂敤妗嗘灦NodeJs浣跨敤JS鐨勮法絝寮曟搸nodejs涓鏂囩綉Node.js鏄涓涓鍩轟簬ChromeV8寮曟搸鐨凧avaScript榪愯屾椂銆侼ode.js浣跨敤浜嗕竴涓浜嬩歡椹卞姩銆侀潪闃誨炲紡I/O鐨勬ā鍨嬨Node鏄涓涓璁㎎avaScript榪愯屽湪鏈嶅姟絝鐨勫紑鍙戝鉤鍙般傚逛竴浜涚壒孌婄敤渚嬭繘琛屼紭鍖栵紝鎻愪緵鏇誇唬鐨凙PI錛屼嬌寰梀8鍦ㄩ潪嫻忚堝櫒鐜澧冧笅榪愯屽緱鏇村ソ銆俈8寮曟搸鎵ц孞avascript鐨勯熷害闈炲父蹇錛屾ц兘闈炲父濂姐鐢ㄤ簬鏂逛究鍦版惌寤哄搷搴旈熷害蹇銆佹槗浜庢墿灞曠殑緗戠粶搴旂敤銆侼ode浣跨敤浜嬩歡椹卞姩錛岄潪闃誨濱/O妯″瀷鑰屽緱浠ヨ交閲忓拰楂樻晥錛岄潪甯擱傚悎鍦ㄥ垎甯冨紡璁懼囦笂榪愯屾暟鎹瀵嗛泦鍨嬬殑瀹炴椂搴旂敤銆nodejs瀹樼綉##node#鍏ㄥ矓瀹夎卬$npminstall-gn#鍗囩駭鍒版渶鏂扮ǔ瀹氱増$nstable#鍗囩駭鍒版渶鏂扮増$nlatest#鍗囩駭鍒板畾鍒剁増$nv7.10.0#鍒囨崲浣跨敤鐗堟湰$n7.10.0(ENTER)$nrm7.10.0#鍒犻櫎鍒跺畾鐗堟湰$nrm7.10.0#鐢ㄥ埗瀹氱殑鐗堟湰鎵ц岃剼鏈$nuse7.10.0some.js##npm#鍗囩駭npm$npminstall-gnpm#鏌ョ湅npm鐗堟湰$npm-v#鍗囩駭cnpm$npm-gicnpm#鏌ョ湅cnpm鐗堟湰$cnpm-v#鍏充簬package.jsonpackage-lock.json鐨勪綔鐢React鍓嶇妗嗘灦React瀹樼綉React璧鋒簮浜嶧acebook鐨勫唴閮ㄩ」鐩錛屾槸涓涓鐢ㄤ簬鏋勫緩鐢ㄦ埛鐣岄潰鐨凧avaScript搴擄紝涔熸槸Web搴旂敤紼嬪簭鐨勮嗗浘灞傘Flutter鍘熺敓縐誨姩搴旂敤UI妗嗘灦Flutter瀹樼綉Flutter鏄璋鋒瓕鐨勭Щ鍔║I妗嗘灦錛屽彲浠ュ揩閫熷湪iOS鍜孉ndroid涓婃瀯寤洪珮璐ㄩ噺鐨勫師鐢熺敤鎴風晫闈銆侳lutter鍙浠ヤ笌鐜版湁鐨勪唬鐮佷竴璧峰伐浣溿傚湪鍏ㄤ笘鐣岋紝Flutter姝ｅ湪琚瓚婃潵瓚婂氱殑寮鍙戣呭拰緇勭粐浣跨敤錛屽苟涓擣lutter鏄瀹屽叏鍏嶈垂銆佸紑婧愮殑銆Taro澶氱寮鍙戝墠絝妗嗘灦Taro瀹樻柟鏂囨。Taro鏄涓濂楅伒寰猂eact璇娉曡勮寖鐨勫氱寮鍙戣В鍐蟲柟妗堛鍙浠ュ彧涔﹀啓涓濂椾唬鐮侊紝鍐嶉氳繃Taro鐨勭紪璇戝伐鍏鳳紝灝嗘簮浠ｇ爜鍒嗗埆緙栬瘧鍑哄彲浠ュ湪涓嶅悓絝錛堝井淇/鐧懼害/鏀浠樺疂/瀛楄妭璺沖姩/QQ/浜涓滃皬紼嬪簭銆佸揩搴旂敤銆丠5銆丷eact-Native絳夛級榪愯岀殑浠ｇ爜銆闇瑕乶ode鐜澧冿紙>=8.0.0錛#浣跨敤npm瀹夎匔LI$npminstall-g@tarojs/cli#OR瀹夎呬簡cnpm錛屼嬌鐢╟npm瀹夎匔LI$cnpminstall-g@tarojs/cli浣跨敤鍛戒護鍒涘緩妯℃澘欏圭洰$taroinitmyApp寰淇″皬紼嬪簭緙栬瘧鎵撳寘#npmscript$npmrundev:weapp$npmrunbuild:weapp#浠呴檺鍏ㄥ矓瀹夎$tarobuild--typeweapp--watch$tarobuild--typeweapp娉ㄦ剰錛歍aro鍏ㄥ矓鐗堟湰闇瑕佸拰欏圭洰閲岀殑鐗堟湰涓鑷#鏇存柊鍏ㄥ矓鐗堟湰#taroupdateself[version]$taroupdateself#鏇存柊欏圭洰鐗堟湰#taroupdateproject[version]$taroupdateproject閿欒錛:Error:Cannotfindmole'autoprefixer':Error:Cannotfindmole'webpack-sources'瑙ｅ喅錛氬畨瑁呬互涓婄己灝戞ā鍧楀嵆鍙銆寮傛ョ紪紼Taro寮傛ョ紪紼嬬幆澧冮厤緗$npmibabel-plugin-transform-runtime-D$npmibabel-runtime銆奣aro妗嗘灦錛氬壋寤哄井淇″皬紼嬪簭銆Taro1.x鐗堟湰瀹夎匑tarojs/async-await錛2.0浠ヤ笂涓嶉渶瑕侊級錛$npmi@tarojs/async-await--savecomponentWillMount(){Taro.request({url:'ponentWillMount(){constresponse=awaitTaro.request({url:'pilerOptions":{"paths":{"@/*":["./src/*"]}}}鎵撳寘鏂囦歡榪囧ぇ璋冭瘯鏂規鎵撳寘鏂囦歡榪囧ぇ璋冭瘯鏂規坵ebpack-bundle-analyzerTaroUI鍩轟簬Taro鐨刄I妗嗘灦TaroUI瀹樼綉瀹夎呭ソTaro錛屽壋寤洪」鐩鍚庯紝鍦ㄩ」鐩鏍圭洰褰曞畨瑁卼aro-ui錛AntDesign鍩轟簬React鐨刄I緇勪歡搴AntDesignReactantd鏄鍩轟簬AntDesign璁捐′綋緋葷殑ReactUI緇勪歡搴擄紝涓昏佺敤浜庣爺鍙戜紒涓氱駭涓鍚庡彴浜у搧銆Rex鍩轟簬Reactr鐘舵佺＄悊搴Rex涓鏂囨枃妗Rematch錛氭槸娌℃湁boilerplate鐨凴ex鏈浣沖疄璺DvaJS鍩轟簬rex鐨勬暟鎹嫻佹嗘灦DvaJS瀹樼綉dva棣栧厛鏄涓涓鍩轟簬rex鍜宺ex-saga鐨勬暟鎹嫻佹柟妗堬紝鐒跺悗涓轟簡綆鍖栧紑鍙戜綋楠岋紝dva榪橀濆栧唴緗浜唕eact-router鍜宖etch錛屾墍浠ヤ篃鍙浠ョ悊瑙ｄ負涓涓杞婚噺綰х殑搴旂敤妗嗘灦銆dva閫氳繃model鐨勬傚康鎶婁竴涓棰嗗煙鐨勬ā鍨嬬＄悊璧鋒潵:鍖呭惈鍚屾ユ洿鏂皊tate鐨剅ecers銆傚勭悊寮傛ラ昏緫鐨別ffects銆傝㈤槄鏁版嵁婧愮殑subscriptions銆侻odel瀵硅薄鐨勫睘鎬namespace:褰撳墠Model鐨勫悕縐般傛暣涓搴旂敤鐨凷tate錛岀敱澶氫釜灝忕殑Model鐨凷tate浠namespace涓簁ey鍚堟垚state:璇Model褰撳墠鐨勭姸鎬併傛暟鎹淇濆瓨鍦ㄨ繖閲岋紝鐩存帴鍐沖畾浜嗚嗗浘灞傜殑杈撳嚭recers:Action澶勭悊鍣錛屽勭悊鍚屾ュ姩浣滐紝鐢ㄦ潵綆楀嚭鏈鏂扮殑Stateeffects錛欰ction澶勭悊鍣錛屽勭悊寮傛ュ姩浣$npminstalldva-cli-g$npminstall--savedva-coredva-loading#閰嶇疆Taro浣跨敤錛岃繕闇瑕佸畨瑁匑tarojs/rex$npmi--saverex@tarojs/rex@tarojs/rex-h5rex-thunkrex-loggerTaro+Dva鍙傝冿細Taro+dva+Typescript鎼寤哄井淇″皬紼嬪簭鏋舵瀯taro+dva灝忕▼搴--鎼寤洪厤浠惰繃紼taro+taro-ui+dva寮鍙戝伐鍏稥SLint鎻掍歡鍖朖S浠ｇ爜媯嫻嬪伐鍏ESLint瀹樼綉ESLint鏄涓涓鎻掍歡鍖栫殑javascript浠ｇ爜媯嫻嬪伐鍏楓VScode涓嬫惌閰岴SLint銆乼ypescript-eslint鐨勪唬鐮佹鏌ラ厤鏂vscode鑷甯︾殑浠ｇ爜媯鏌ヤ笉鏂逛究錛屽叧闂銆傜洿鎺ヤ嬌鐢╡slint錛屽湪settings.json涓閰嶇疆錛"editor.formatOnType":true,//緙栬緫鏃舵槸鍚﹁嚜鍔ㄦ牸寮忓寲"editor.formatOnSave":true,//淇濆瓨鏃舵槸鍚﹁嚜鍔ㄦ牸寮忓寲"javascript.validate.enable":true,//緙栬緫鍣ㄧ殑浠ｇ爜js媯鏌"typescript.validate.enable":true,//緙栬緫鍣ㄧ殑浠ｇ爜ts媯鏌"typescript.tsdk":"node_moles/typescript/lib",//鎵嬪姩閰嶇疆SDK"eslint.enable":true//寮鍚痚slint浠ｇ爜媯鏌闇瑕佹墽琛屽懡浠ゅ壋寤.eslintrc.js鏂囦歡$eslint--init鍒涘緩鍚庯紝緙栧啓姝ゆ枃浠惰勫垯錛mole.exports={"env":{"browser":true,"es6":true},"extends":["eslint:recommended","plugin:react/recommended","plugin:@typescript-eslint/eslint-recommended","Taro",],"globals":{"wx":"readonly",//灝忕▼搴忓叏灞鍙橀噺澹版槑"Atomics":"readonly","SharedArrayBuffer":"readonly"},"parser":"@typescript-eslint/parser","parserOptions":{"ecmaVersion":2018,"sourceType":"mole","ecmaFeatures":{"jsx":true},},"plugins":["react","@typescript-eslint"],"settings":{"react":{"createClass":"createReactClass","pragma":"React","version":"detect","flowVersion":"0.53"}},"rules":{"no-useless-return":"error",//涓嶄嬌鐢ㄥ氫綑鐨剅eturn"no-unused-vars":["error",{"varsIgnorePattern":"Config"}],"react/react-in-jsx-scope":false,//閬垮厤Taro涓浣跨敤React鍐欐垚react浜х敓鐨勬姤閿"react/jsx-filename-extension":[1,{"extensions":[".js",".jsx",".tsx"]}]}};鍙傝冨府鍔╋細typescript-eslint涓婃墜VScode涓嬫惌閰岴SLint銆乼ypescript-eslint鐨勪唬鐮佹鏌ラ厤鏂Jest嫻嬭瘯妗嗘灦jest涓鏂囧畼緗2019騫存渶嫻佽岀殑浜斿ぇJavaScript鑷鍔ㄥ寲嫻嬭瘯妗嗘灦Git浠ｇ爜鐗堟湰綆＄悊宸ュ叿Git瀹樼綉Git鏄涓涓寮婧愮殑鍒嗗竷寮忕増鏈鎺у埗緋葷粺錛屽彲浠ユ湁鏁堛侀珮閫熷湴澶勭悊浠庡緢灝忓埌闈炲父澶х殑欏圭洰鐗堟湰綆＄悊銆github瀹樼綉Git鑿滈笩鏁欑▼jsDoc娉ㄩ噴鏂囨。鐢熸垚宸ュ叿浠庢敞閲婄＄悊鐢熸垚寮鍙戞枃妗jsDoc涓鏂囨枃妗騫沖彴妗嗘灦wx寰淇″皬紼嬪簭寰淇″皬紼嬪簭瀹樻柟鏂囨。寰淇″紑鍙戣呭伐鍏蜂笅杞wxCloud寰淇′簯寮鍙浜戝紑鍙戞枃妗褰撲嬌鐢ㄧ幇鏈夐」鐩瀵煎叆鍚庯紝闇瑕佸壋寤篶loudfunctions鐩褰曪紝騫跺湪project.config.json涓鎸囧畾浜戝嚱鏁扮洰褰曪細{..."cloudfunctionRoot":"cloudfunctions/",...}鐒跺悗錛屽湪寰淇″紑鍙戣呭伐鍏蜂腑鍙浠ュ彸閿甤loudfunctions鐩褰曡繘琛屽悓姝ユ垨鍒涘緩浜戝嚱鏁般浜戞暟鎹搴撹嚜鍔ㄥ囦喚浜戞暟鎹搴撹嚜鍔ㄥ囦喚紺轟緥浠ｇ爜娉ㄦ剰錛氫笂闈㈠井淇＄ぞ鍖烘彁渚涚殑紺轟緥浠ｇ爜涓鏈塀UG錛岄渶瑕佹敼閫狅紝鏂規堟槸鍙琛岀殑銆鍏朵粬宸ュ叿Icon鍥炬爣鍒朵綔綆＄悊騫沖彴iconfonteasyiconColor閰嶈壊緗閰嶈壊宸ュ叿鑹插僵鎼閰嶈繘闃剁悊璁欏圭洰寮鍙戝弬鑰冨紑鍙戣呮墜鍐寮鍙戣呮墜鍐-浜+紺懼尯-鑵捐浜鏈瀹屽緟鏇存柊~
