① 浠涔堟槸璺ㄧ粓绔
阈炬帴锛歨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閰嶈壊缃閰嶈壊宸ュ叿镩插僵鎼閰嶈繘阒剁悊璁椤圭洰寮鍙戝弬钥冨紑鍙戣呮坠鍐寮鍙戣呮坠鍐-浜+绀惧尯-鑵捐浜链瀹屽緟镟存柊~
