涓栫晫闀挎湡楗卞彈骞冲彴纰庣墖鍖栦箣鑻︺€傚湪绉诲姩浜掕仈缃戜箣鍓嶏紝寮€鍙戣€呭彧闇€瑕佹剦蹇湴闈㈠缃戠粶鍗冲彲銆傜Щ鍔ㄤ簰鑱旂綉鏃朵唬锛宨OS銆丄ndroid銆丠5浠ュ強鍚勭灏忕▼搴忋€佸揩搴旂敤灞傚嚭涓嶇┓锛屽紑鍙戣€呬箰姝や笉鐤层€傚浜唍涓妧鏈紝寮€鍙戜簡n涓増鏈紝杩唬娣蜂贡锛屾棤娉曞榻愶紝鐢ㄦ埛鏃犳墍閫備粠锛屽唴蹇冪棝鑻︼紝寮€鍙戞祴璇曟垚鏈毚娑╪鍊嶏紝缁撴灉鏄伐绋嬪笀涓嶆柇鍔犵彮锛岀洿鍒拌剳琚嬮兘绉冧簡锛屼絾浜у搧闇€姹傝繕娌″仛瀹岋紝鑰佹澘鐨勯绠楁€绘槸鍘嬩笉涓嬶紝閮芥槸铔嬬柤銆倁ni-app姝ゅ墠宸插疄鐜版墜鏈哄叏瑕嗙洊锛屾敮鎸乮OS銆丄ndroid銆丠5銆佸井淇″皬绋嬪簭銆侀樋閲屽皬绋嬪簭銆佺櫨搴﹀皬绋嬪簭銆佸瓧鑺傝烦鍔ㄥ皬绋嬪簭銆丵Q灏忕▼搴忋€佸揩搴旂敤銆?60灏忕▼搴忥紝骞朵笖鍚勭杩愯鎬ц兘浼樼.浠?.9鐗堟湰寮€濮嬶紝uni-app杩涗竴姝ユ彁渚汸C绛夊灞忛€傞厤瑙ｅ喅鏂规锛屽畬鎴愬ぇ涓€缁熴€傚紑鍙戜汉鍛樼粓浜庡彲浠ヤ娇鐢ㄤ竴涓鏋讹紝涓€娆℃秷鐏墍鏈夐」鐩€傚簾璇濅笉澶氳锛屼妇涓疄闄呬緥瀛愯澶у鐩磋鎰熷彈涓€涓嬶細涓嬮潰鏄熀浜巙ni-app鐨凞Cloud绀惧尯鍦ㄧЩ鍔ㄧ鐨勫睍绀烘晥鏋溿€傚垪琛ㄥ拰璇︾粏淇℃伅鍒嗕负涓や釜椤甸潰銆傜偣鍑诲垪琛ㄤ腑鐨勫笘瀛愶紝鎵撳紑璇︽儏椤碉細涓嬮潰鏄熀浜巙ni-app鐨凞Cloud绀惧尯鐨勫悓涓€濂椾唬鐮併€傜◢浣滈厤缃悗锛孭C绔殑灞曠ず鏁堟灉锛屽垪琛ㄥ拰璇︽儏鍦ㄥ悓涓€椤甸潰鐨勫乏鍙虫爮鏄剧ず銆傜偣鍑诲乏渚у垪琛ㄤ腑鐨勫笘瀛愬彲浠ュ埛鏂板彸渚у唴瀹圭殑璇︽儏绐楀彛锛岃繖涓猆I鏇撮€傚悎pc瀹藉睆锛屼篃鏈塸c妗岄潰App鐨勪綋楠屻€俆ips锛氱偣鍑籇Cloud绀惧尯婕旂ず绯荤粺锛屾劅鍙桺C绔拰绉诲姩绔殑閫傞厤銆傝繖涓€庝箞鏍凤紵浣犲閰蜂簡鍚楋紵涓嬮潰璇︾粏璇磋uni-app鐨凱C瀹藉睆閫傞厤鏂规銆傚ぇ浣撲笂鍖呮嫭涓変釜鏂归潰锛氱獥鍙ｇ骇閫傞厤锛歭eftwindow銆乺ightwindow銆乼opwindow绛夊垪绾ч€傞厤锛歮atch-mediacomponentrpx瀹藉睆鍝嶅簲1.绐楀彛绾ч€傞厤锛歭eftwindow鍒楀湪鎵嬫満灞忓箷涓婅璁′笉鍚岋紝鐢佃剳鏄剧ず鍣ㄣ€備负浜嗘柟渚块€氳瘽鍜屾帴鍚數璇濓紝澶ч儴鍒嗘墜鏈虹殑璁惧楂樺害澶т簬璁惧瀹藉害锛堝嵆绐勫睆璁捐锛夛紝鍥犳绉诲姩搴旂敤澶氫负绔栧睆/绐勫睆鏄剧ずUI銆備絾鏄紝澶у鏁癙C鏄剧ず鍣ㄩ兘閲囩敤瀹藉睆璁捐锛屽嵆璁惧鐨勫搴﹀ぇ浜庤澶囩殑楂樺害銆傚緢澶歅C绔殑妗岄潰搴旂敤閮介噰鐢ㄤ簡宸﹀彸鍒嗘爮鐨刄I璁捐銆倁ni-app浠ュ綋鍓嶆墜鏈哄睆骞曚负涓荤獥鍙ｏ紙window锛夛紝鍦╨eft/right/up涓変釜鏂瑰悜鏂版墿灞曚簡涓変釜绐楀彛锛歭eftWindow銆乺ightWindow銆乼opWindow銆傝繖涓変釜绐楀彛鍙互璁剧疆褰撳睆骞曞搴﹀ぇ浜庢煇涓槇鍊兼椂鑷姩鍑虹幇锛堟樉绀哄甫鍒嗘爮鐨勫灞忚璁★級锛屽綋灞忓箷瀹藉害灏忎簬鏌愪釜闃堝€兼椂鑷姩娑堝け锛堟仮澶嶅崟涓?绐楀彛绐勫睆璁捐锛夈€倁ni-app鐨勪富绐椾綋鍜屼笁涓墿灞曠獥浣撶浉浜掔嫭绔嬶紝鐩镐簰鏀寔銆傚綋鐐瑰嚮閾炬帴鎴栧垏鎹㈤〉闈㈡椂锛屾敮鎸佸埛鏂扮浉搴旂殑琛ㄥ崟锛岃€屼笉鏄埛鏂版暣涓睆骞曘€備笅闈㈡垜浠互鏈枃寮€澶寸殑DCloud绀惧尯涓轰緥锛岃瑙ｅ浣曞湪uni-app涓揩閫熷疄鐜板灞忛€傞厤銆傛垜浠互绀惧尯鍒楄〃椤典负涓荤獥浣擄紝灏嗚鎯呭睍寮€鍒板彸渚х獥鍙ｄ腑锛屽涓嬪浘锛氫笅闈竴姝ユ璁茶В濡備綍鍦╱ni-app椤圭洰涓疄鐜版爮鐩垝鍒嗐€傜涓€姝ワ細鏂板缓涓€涓猺ight-window.vue鏉ユ樉绀哄笘瀛愯鎯呭綋鐒秗ightWindow涓嶉渶瑕侀噸鍐欐柊闂昏鎯呴〉锛屽彲浠ュ鐢ㄥ師鏉ョ殑浠ｇ爜銆傛敮鎸佸皢宸叉湁鐨勮鎯呴〉浣滀负涓€涓粍浠舵斁鍦╮ightWindow椤甸潰涓紝濡備笅锛?detail/detail.vue)浣滀负缁勪欢(pages-detail-detail)-->step2:鍦╨ist椤甸潰锛屽鐞嗛€昏緫鍗曞嚮鍒楄〃鍚庝笌rightWindow杩涜浜や簰銆?/鍒楄〃椤电殑鏀归€爂oDetail(detail){if(this._isWidescreen){//濡傛灉鏄灞忥紝鍦ㄥ彸渚ф爮鐩鎯呴〉瑙﹀彂鑷畾涔変簨浠讹紝閫氱煡鍙充晶绐楀彛鍒锋柊鏂伴椈璇︽儏uni.$emit('updateDetail',{detail:encodeURIComponent(JSON.stringify(detail))})}else{//濡傛灉鏄獎璇勮锛屽垯鎵撳紑涓€涓柊琛ㄥ崟锛屽湪鏂拌〃鍗曚腑鎵撳紑璇︽儏椤祏ni.navigateTo({url:'/pages/detail/detail?query='+encodeURIComponent(JSON.stringify(detail))});}}锛岀涓夋锛氬湪pages.json涓敞鍐宺ightWindow锛屽涓嬶細{"rightWindow":{"path":"responsive/right-window.vue",//鎸囧畾rightWindow椤甸潰鏂囦欢"style":{"width":"calc(100vw-400px)"//椤甸潰瀹藉害},"matchMedia":{"minWidth":768//鏈夋晥鏉′欢锛岀獥鍙ｅ搴﹀ぇ浜?68px鏃舵樉绀簘}}鍙互鐪嬪埌锛屼笉鐢ㄥお澶氬伐浣滀腑锛屾偍鍙互蹇€熷皢涓烘墜鏈虹獎灞忓紑鍙戠殑搴旂敤绋嬪簭閫傞厤鍒癙C鐨勫灞忓簲鐢ㄧ▼搴忋€傝€屼笖浠ュ悗鐨勪唬鐮佺淮鎶よ繕鏄竴鏍风殑锛屼笟鍔¤凯浠ｇ殑鏃跺€欎笉闇€瑕佸娆″崌绾с€傝鏂规鐨勫疄鐜板叿鏈変互涓嬬壒鐐癸細鍘熸湰閽堝鎵嬫満绐勫睆寮€鍙戠殑浠ｇ爜鍩烘湰涓嶉渶瑕佷慨鏀癸紝瀹屽叏鍙互閫傞厤PC鐨勫灞忥紱鏂板鐨勪笟鍔℃ā鍧椾篃鏄竴濂椾唬鐮侊紝鍏煎绐勫睆銆傛坊鍔燩C瀹藉睆閫傞厤鍚庯紝涓嶅奖鍝嶅師鏉ュ湪绉诲姩绔疄鐜扮獎灞忥紝leftWindow/rightWindow绛夋墿灞曠獥鍙ｄ細鑷姩闅愯棌鍦ㄧ獎灞忎笂銆俽ightWindow涓殑椤甸潰鏄彲澶嶇敤鐨勶紝鏃犻渶閲嶅啓鏂伴椈璇︽儏椤碉紝鏀寔灏嗗凡鏈夌殑璇︽儏椤典綔涓轰竴涓粍浠舵斁鍒皉ightWindow椤甸潰涓€傛洿澶氳缁嗛厤缃鍙傝€冩枃妗ｏ細https://uniapp.dcloud.net.cn/collocation/pages?id=topwindowleftWindow璇ユ柟妗堜笉浠呴€傜敤浜庡師MobileApp閫傞厤澶у睆鏄剧ず锛岄€傚悎鏂板紑鍙戠殑PC搴旂敤锛屽挨鍏舵槸PCAdmin绠＄悊鎺у埗鍙般€備笅闈㈡槸缁忓吀鐨勫熀浜巐eftwindow鍜宼opwindow鐨刾cadmin甯冨眬锛?.缁勪欢绾ч€傞厤锛歮atch-mediacomponentleftWindow绛夋柟妗堜负椤甸潰琛ㄥ崟绾ч€傞厤鏂规锛岄€傜敤浜庡椤甸潰缁勫悎鍜屽垎鏍忓睍绀恒€傞偅涔堝湪鍚屼竴涓〉闈腑锛岀粍浠舵槸鍚﹀彲浠ラ€傞厤涓嶅悓鐨勫睆骞曞搴﹀憿锛熷綋鐒惰繖鏃跺€欏彲浠ヤ娇鐢ㄧ粍浠剁骇鐨勯€傞厤鏂规銆傞櫎浜嗕紶缁熺殑cssmediaquery涔嬪锛寀ni-app杩樻彁渚涗簡骞冲彴鍏煎鐨刴atch-media缁勪欢鍜屽尮閰嶇殑uni.createMediaQueryObserver鏂规硶銆俶atch-media鏄竴涓獟浣撴煡璇㈤€傞厤缁勪欢锛屽彲浠ユ洿鏂逛究鐨勮繘琛屽姩鎬佸睆骞曢€傞厤銆傚湪match-media缁勪欢涓斁缃唴瀹癸紝骞朵负璇ョ粍浠舵寚瀹氫竴缁勫獟浣撴煡璇㈣鍒欙紝渚嬪灞忓箷瀹藉害銆傝繍琛屾椂锛屽鏋滃睆骞曞搴︽弧瓒虫煡璇㈡潯浠讹紝鍒欐樉绀虹粍浠讹紝鍚﹀垯闅愯棌銆俶atch-media缁勪欢鐨勪紭鐐瑰寘鎷細寮€鍙戣€呭彲浠ユ洿鏂逛究銆佹洿鏄庣‘鍦颁娇鐢ㄥ獟浣撴煡璇㈣兘鍔涳紝鑰屼笉鏄€﹀悎鍦–SS鏂囦欢涓紝闅句互澶嶇敤銆傚畠鍙互涓庢ā鏉夸腑鐨勬暟鎹粦瀹氬姩鎬佺粨鍚堜娇鐢紝涓嶄粎鍙互鏄剧ず鎴栭殣钘忕粍浠讹紝鑰屼笖鍦ㄨ繃绋婣PI涓洿鍏峰彲濉戞€с€侻ediaQuery缁勪欢鍙互宓屽浣跨敤锛屽嵆婊¤冻灞€閮ㄧ粍浠跺竷灞€鏍峰紡鐨勫彉鍖栥€傜粍浠跺寲鍚庯紝灏佽鎬ф洿寮猴紝鍙互闅旂鏍峰紡銆佹ā鏉裤€佹ā鏉跨粦瀹氱殑浜や簰浜嬩欢锛屾彁渚涙洿楂樼殑澶嶇敤鎬с€倁ni-app寤鸿閲囩敤杩愯鏃跺姩鎬侀€傞厤鐨勬柟妗堬紝鑰屼笉鏄崟鐙负PC鐗堢紪鍐欐潯浠剁紪璇戯紙涓嶈繃涔熷彲浠ラ€氳繃鑷畾涔夋潯浠剁紪璇戝疄鐜板崟鐙殑PC鐗堬級銆傝繖鏍疯璁＄殑濂藉鏄彲浠ュ湪ipad绛夎澶囩殑娴忚鍣ㄤ笂鏂逛究鐨勬í绔栧睆鍒囨崲銆?銆佸湪璁捐鍏锋湁rpx鐨勫灞忓搷搴旂殑鎵嬫満APP鏃讹紝璁捐鑰呭線寰€浠Phone6浣滀负瑙嗚绋跨殑鏍囧噯锛屽嵆鎸夌収750px鐨勫睆骞曞搴︽潵鐢诲浘锛涜澶囧睆骞曠殑鍏冪礌瀹藉害鍜岄珮搴︺€傝繖灏辨槸rpx锛坮esponsivepixel锛夌殑瀹炵幇鎬濊矾锛屽彧涓嶈繃rpx鏄敱妗嗘灦寮曟搸鍔ㄦ€佽浆鎹㈠厓绱犲ぇ灏忥紝涓嶉渶瑕佺▼搴忓憳鍐欎唬鐮佸共棰勩€傚浜庣Щ鍔ㄧ锛宺px鏄竴涓瘮杈冪悊鎯崇殑鏂规锛屽洜涓哄悇绉嶇Щ鍔ㄨ澶囩殑灞忓箷瀹藉害宸埆涓嶆槸寰堝ぇ銆傚姣?50px寰皟缂╂斁鏁堟灉锛屾渶澶х▼搴﹁繕鍘熻璁″笀鐨勮璁°€備絾鏄紝涓€鏃︾寮€绉诲姩璁惧锛屽湪PC灞忔垨鑰卲ad妯睆鐘舵€佷笅锛屽洜涓哄睆骞曞搴﹁繙澶т簬750锛岃繖鏃跺€檙px鏍规嵁灞忓箷瀹藉害鍙樺寲鐨勭粨鏋滃氨涓ラ噸鍑轰箮鎰忔枡浜嗭紝瀹冨お鍙€曚簡銆傚亣璁炬樉绀轰竴涓浘褰㈠垪琛紝鎴戜滑涓哄乏杈圭殑缂╃暐鍥惧畾涔夊涓媍ss锛?uni-media-list-logo{width:180rpx;height:140rpx;411*(180/750)411*(180/750)411*(180/750)}鍦ㄦ墜鏈轰笂锛岃繖涓樉绀烘晥鏋滄瘮杈冪悊鎯筹紝濡備笅锛氬綋鍓嶉€夋嫨pixel2浣滀负妯℃嫙璁惧锛屽苟涓斿睆骞曞搴︿负411px锛屾墍浠ョ缉鐣ュ浘鐨勫搴﹀彉涓猴細180*(411/750)=98px锛岄珮搴﹀彉涓猴細140*(411/750)=76px锛岃繖涓悊璁鸿绠楀拰瀹為檯鎿嶄綔鏄竴鑷寸殑锛屾晥鏋滄洿濂姐€傚悓鏍风殑浠ｇ爜濡傛灉鍦≒C绔繍琛岋紝鍋囪灞忓箷瀹藉害涓?920px锛屽垯缂╃暐鍥剧殑澶у皬浼氬彉鎴愶細180*(1920/750)=460px锛岄珮搴︿細鍙樻垚锛?40*(1920/750)=358px锛岃繖涓?920*1080鐨勬樉绀哄櫒鍙兘鏄剧ず2鏉¤褰曪紙涓昏鏄缉鐣ュ浘鏀惧ぇ鍊嶇巼楂橀€犳垚鐨勶級锛屾晥鏋滃涓嬶細涓烘锛屼粠uni-app2.9+寮€濮嬶紝鏂板浜唕px鎸夐挳750px浣滀负鍩哄噯灞忓箷瀹藉害鐨勬湁鏁堣寖鍥存帶鍒讹紝鍗冲綋灞忓箷瀹藉害瓒呰繃涓€瀹氶槇鍊硷紙榛樿960px锛夋椂锛屽厓绱犲楂樹笉鍐嶇敱瀹為檯灞忓箷瀹藉害杞崲锛岃€屾槸鍏冪礌width灏嗕互鍥哄畾鐨勫睆骞曞搴︼紙榛樿涓?75px锛夐珮璁＄畻銆備互涓婃枃鍥炬枃鍒楄〃涓轰緥锛屽綋灞忓箷瀹藉害涓?920px锛堝ぇ浜?60px锛夋椂锛屼細浣跨敤鍥哄畾灞忓箷瀹藉害锛堥粯璁?75px锛夎绠楃缉鐣ュ浘鐨勫楂橈紝鍗筹細180*(375/750)=90px锛岄珮搴﹀氨鍙樻垚浜嗭細140*(375/750)=70px銆傛寜鐓ц繖涓満鍒讹紝鍦≒C绔殑杩愯鏁堟灉濡備笅銆備笌涓婇潰鏀惧ぇ涓戦檵鐨勫浘鍍忕浉姣旓紝鏄剧ず鏇村姞鐞嗘兂鍜屼紭闆呫€俆ips:750px鐨勬湁鏁堝睆骞曞搴﹂槇鍊煎拰瀹藉睆璁＄畻浣跨敤鐨勫浐瀹氬睆骞曞搴﹂兘鏀寔鑷畾涔夐厤缃畕"globalStyle":{"rpxCalcMaxDeviceWidth":960,//rpx璁＄畻鏈€澶ф敮鎸佺殑璁惧瀹藉害锛屽崟浣峱x锛岄粯璁ゅ€糹s960"rpxCalcBaseDeviceWidth":375,//褰撹澶囧疄闄呭搴﹁秴杩噐px璁＄畻鏀寔鐨勬渶澶у搴︽椂锛宺px璁＄畻浣跨敤鐨勫浐瀹氬睆骞曞搴︼紝鍗曚綅px锛岄粯璁ゅ€间负375}}寮€鍙戣€呭彲浠ヨ缃湪rpxwidth鎺т欢鐨勫熀纭€涓婏紝杩涜寰皟锛屼互鑾峰緱鏇村ソ鐨凱C瀹藉睆鏁堟灉锛屼緥濡傚灞忋€佸浐瀹氬垪琛ㄥ搴﹀拰灞呬腑鏄剧ず锛屽涓嬪浘鎵€绀恒€傚綋鐒惰繖閲屽彧鏄负浜嗘紨绀簉px鍦ㄥ灞忎笅鐨勫け鎺х鐞嗐€傚湪瀹為檯搴旂敤涓紝鍙互浣跨敤涓€涓垪绐楀彛鏉ユ樉绀哄乏渚у垪涓殑鍒楄〃锛屽鏈枃寮€澶寸殑鎴浘鎵€绀恒€?.琛ュ厖4.1windows銆乵ac銆乴inux閫氳繃electron鎵撳寘閫氳繃瀹藉睆閫傞厤锛寀ni-app鐨勫簲鐢ㄥ彲浠ュ緢鏂逛究鐨勯€氳繃electron鎵撳寘涓虹數鑴戝鎴风搴旂敤锛寃indows銆乵ac銆乴inux閮芥敮鎸併€傚紑鍙戣€呭彲浠ラ殢鎰忚皟鐢╡lectron鐨凙PI鏉ヨ皟鐢ㄦ洿澶氱殑鎿嶄綔绯荤粺鑳藉姏锛堜负浜嗘柟渚垮缁堢鍏煎锛岃繖浜涚壒娈婄殑API鍙互鍐欏湪鑷畾涔夌殑鏉′欢缂栬瘧涓級銆倁ni-app鎻掍欢甯傚満涓婃湁涓€浜涙墦鍖呭ソ鐨勬彃浠躲€傝瑙侊細https://ext.dcloud.net.cn/search?q=electron4.2浣挎墜鏈虹増缃戦〉鏆傛椂鍙敤浜嶱C娴忚鍣ㄧ殑瑙ｅ喅鏂规濡傛灉浣犵殑h5鐗堟湰宸茬粡寮€鍙戝嚭鏉ヤ簡锛岃繕娌℃湁鏈夋椂闂撮€傚簲PC锛屼絾鎯冲厛鍦≒C涓婁娇鐢ㄣ€傜劧鍚庡彲浠ュ湪pc缃戦〉浣跨敤iframe锛岀害瀹氬ソ瀹藉害锛屽湪閲岄潰濂楃敤uni-app鐨勭獎灞忕増銆傚綋鐒讹紝浣犱篃鍙互鍦╥frame鏃佽竟鏀句竴涓簩缁寸爜锛屾彁渚涙墜鏈虹増鎵弿鍦板潃銆備笅闈㈡槸涓€涓疄鐜扮ず渚嬶細5.缁撹uni-app鍥㈤槦灏嗕繚鎸佽繍琛岋紝鎸佺画瀹屽杽uni-app鍦≒C銆乸ad绛夊灞忚澶囦笂鐨勬洿鏂般€傚緢濂界殑閫傞厤锛屽皢涓撴敞浜巗sr鍜宻erverless锛屾彁渚涙洿楂樻晥鐨勮瀺鍚堜簯鐨勮В鍐虫柟妗堬紙璇﹁uniCloud锛夛紝甯姪浼佷笟鏇撮珮鏁堬紝寮€鍙戣€呮洿杞绘澗锛佹杩庡埌https://github.com/dcloudio/uni-app缁欐垜浠瑂tar榧撳姳馃槃
