鏈暀绋嬩富瑕侀潰鍚戝垵娆′娇鐢ˋPI鈥嬧€婥loudStudio3鍙鍖栧伐鍏风殑鏂版墜寮€鍙戣€呫€傛棬鍦ㄩ€氳繃绠€鍗曟槑浜嗙殑鍥炬枃璇存槑锛屽府鍔╁紑鍙戞柊鎵嬪揩閫熸帉鎻″彲瑙嗗寲宸ュ叿鐨勪娇鐢ㄣ€侫PICloudStudio3鍙鍖栧伐鍏风鎵夸綆浠ｇ爜璁捐鐞嗗康锛岃寮€鍙戣€呴€氳繃鎷栨嫿绉湪鐨勬柟寮忓揩閫熸瀯寤虹敓鎴愬簲鐢ㄩ潤鎬侀〉闈紝鏀寔鍚屾瀹炴椂鐢熸垚AVM璺ㄧ浠ｇ爜銆傝宸ュ叿鍐呯疆浜嗕赴瀵岀殑UIStyle缁勪欢锛屼负寮€鍙戣€呰妭鐪佷簡澶ч噺鐨勯〉闈㈡瀯寤烘椂闂达紝璁╁紑鍙戣€呮洿涓撴敞浜庡簲鐢ㄤ笟鍔￠€昏緫鐨勫紑鍙戙€?.宸ュ叿涓嬭浇涓嬭浇鏈€鏂扮増APICloudStudio3涓嬭浇鍦板潃锛圥C绔墦寮€锛夛細https://www.a鈥峱icloud.com/studio3PS锛氭敞鍐孉PICloud鍏紬鍙?.婵€娲诲苟杩涘叆鍙鍖栧伐鍏风晫闈?.1鍚姩APICloudStudio3锛岀偣鍑诲乏渚ч潰鏉夸笂鐨勭櫥褰曟寜閽櫥褰旳PICloud璐﹀彿銆侾S锛氭病鏈夎处鍙风殑鍚屽闇€瑕佺偣鍑烩€滅珛鍗虫敞鍐屸€濇寜閽敞鍐岃处鍙凤紝鍚﹀垯灏嗘棤娉曟寜鐓ф暀绋嬪垱寤洪」鐩瓑鎿嶄綔銆?.2鍒涘缓椤圭洰鍦ㄩ《閮ㄨ彍鍗曚腑閫夋嫨鈥滈」鐩€?鈥滄柊寤洪」鐩€濓紝鎵撳紑鏂板缓椤圭洰鐣岄潰锛屽湪鐣岄潰涓～鍐欏唴瀹癸紝瀹屾垚鏂伴」鐩殑鍒涘缓銆傛敞鎰忥細闇€瑕佸紑鍚€淒evelopwithAVM.js鈥濋€夐」锛屽惁鍒欐棤娉曚娇鐢ㄥ彲瑙嗗寲宸ュ叿銆?.3閫夋嫨pages/main/main.stml椤甸潰鏂囦欢锛岀偣鍑诲乏涓婅缁胯壊鍥炬爣锛堝浘涓孩妗嗛€変腑锛夛紝杩涘叆鍙鍖栧伐鍏风晫闈€侾S锛氬彲瑙嗗寲宸ュ叿鏄繁搴︾粦瀹氱殑AVM澶氱寮曟搸锛屾墍浠ュ彧鏈夋墿灞曞悕涓?stml鐨勬枃浠舵墠鍏峰鍙鍖栬兘鍔涳紙鍗虫樉绀哄垏鎹㈠彲瑙嗗寲鐨勬寜閽級锛屽叾浠栨牸寮忕殑鏂囦欢鏃犳硶婵€娲诲彲瑙嗗寲鐣岄潰銆?.4鍙鍖栧伐鍏风晫闈⑩€斺€旂孩鑹插尯鍩燂細绯荤粺宸ュ叿鏍忔祬钃濊壊鍖哄煙锛氳祫婧愮鐞嗗櫒闈㈡澘椤堕儴鑿滃崟鏍忎腑鐨勨€滆鍥锯€?鈥滃瑙傗€?鈥滄樉绀轰晶杈规爮鈥濓紝鍙互灞曞紑鎴栧叧闂晶杈规爮闈㈡澘锛圡ac蹇嵎閿寴b)鐧借壊鍖哄煙锛氫究鎹峰伐鍏锋爮锛堢偣鍑诲乏渚х涓€涓豢鑹插浘鏍囪繑鍥炰唬鐮佹煡鐪嬮〉闈級娣辫摑鑹插尯鍩燂細缁勪欢闈㈡澘鍖哄煙缁胯壊鍖哄煙锛氶〉闈㈢紪杈戝尯鍩熼粍鑹插尯鍩燂細鍔熻兘闈㈡澘鍖哄煙3.蹇€熸嫋鏀剧粍浠舵瀯寤洪〉闈㈠厓绱?.1缁勪欢鍒嗙被姒傝堪鍦ㄧ粍浠堕潰鏉垮尯锛屾湁澶ч噺瀹樻柟鍐呯疆鐨勫悇绉嶆牱寮忓拰鍔熻兘鐨勭粍浠躲€傜洰鍓嶇殑缁勪欢鍩烘湰鍒嗕负涓夌被锛屽垎鍒槸UI缁勪欢銆侀珮灞傜粍浠跺拰绯荤粺缁勪欢銆傚崟鍑婚《閮ㄧ殑Tab瀵艰埅鏍忓彲鍒囨崲缁勪欢绫诲埆銆俇I缁勪欢锛氬皢椤圭洰UI璁捐椤甸潰涓父鐢ㄧ殑鍔熻兘鍏冪礌鍙婂叾鏍峰紡鎶借薄灏佽鑰屾垚鐨勭粍浠躲€傚洜涓虹粍浠惰灏佽浜嗕竴瀹氱▼搴︾殑榛樿鏍峰紡锛屼慨鏀圭殑鑷敱搴︿細姣旂郴缁熺粍浠堕珮銆傜◢宸€傞珮绾х粍浠讹細鍦║I缁勪欢鐨勫熀纭€涓婏紝杩涜浜嗘洿楂樼骇鐨勫皝瑁呫€傛瘡涓珮绾х粍浠堕兘鏈夊畬鏁寸殑鐙珛鍔熻兘锛屼篃鍙互鐪嬩綔鏄竴涓叿鏈夊姛鑳介€昏緫鐨刄I缁勪欢銆傜郴缁熺粍浠讹細瀵归〉闈㈠厓绱犺繘琛屾渶鍩烘湰鐨勬娊璞★紝褰㈡垚鏋勫缓椤甸潰鎵€闇€鐨勬渶绠€鍗曠殑鍩虹缁勪欢銆傛槸鏋勫缓椤甸潰鐨勬渶灏忓崟浣嶏紝涔熸槸鑷敱搴︽渶澶х殑缁勪欢銆傚紑鍙戜汉鍛樺彲浠ュ熀浜庡綋鍓嶇粍浠躲€備互鏈€澶х殑鑷敱搴﹁繘琛屼慨鏀癸紝浠ユ弧瓒虫偍鑷繁鐨勯鏍奸渶姹傘€?.2娣诲姞缁勪欢榧犳爣宸﹂敭閫変腑缁勪欢锛屾寜浣忎笉鏀撅紝鎷栨嫿鑷冲彲瑙嗗寲宸ュ叿涓棿缂栬緫鍖猴紝鍗冲彲瀹屾垚缁勪欢娣诲姞銆?.2.1娣诲姞UI缁勪欢-鎸夐挳鎸夐挳3.2.2娣诲姞楂樼骇缁勪欢-绐椾綋绫?鍗＄墖鍗曞厓鏍?.2.3娣诲姞绯荤粺缁勪欢-瀹瑰櫒缁勪欢-viewPS锛氬鍣ㄧ粍浠剁壒娈婅鏄庯細瀹瑰櫒缁勪欢鏄竴绉嶇壒娈婄被鍨嬬殑缁勪欢锛屽畠鏈夊寘鍚叾浠栫粍浠跺厓绱犵殑鐗规€э紝鐩稿綋浜庣粍鍚堢粍浠剁殑澶栧寘瑁呫€傜伒娲讳娇鐢ㄧ浉搴旂殑瀹瑰櫒缁勪欢锛屽彲浠ヨ鎴戜滑鏇存柟渚裤€佹洿鐏垫椿鍦拌璁″拰瀹炵幇鍚勭UI椤甸潰銆傚洜姝わ紝鍦ㄥ熀浜嶶I璁捐鍥惧紑鍙戝疄鐜伴〉闈箣鍓嶏紝寮€鍙戣€呭繀椤诲褰撳墠鐨刄I璁捐鍥捐繘琛岀粨鏋勫垎鏋愩€傛牴鎹笉鍚岀殑缁撴瀯甯冨眬锛屽厛鎷栨嫿鐩稿簲缁撴瀯鐨勫鍣ㄧ粍浠跺畬鎴愮粨鏋勫竷灞€锛岀劧鍚庢彁浜ゅ埌瀹瑰櫒涓坊鍔犳洿璇︾粏鐨勫姛鑳界粍浠躲€?.3缁勪欢淇敼缁勪欢閫変腑鍚庡彲瑙嗗寲椤甸潰鍔熻兘绀烘剰鍥撅細澶嶅埗鎸夐挳锛氬彲浠ュ揩閫熷鍒跺綋鍓嶉€変腑鐨勭粍浠跺厓绱犮€傚垹闄ゆ寜閽細鍙互蹇€熷垹闄ゅ綋鍓嶉€変腑鐨勭粍浠跺厓绱犮€?.3.1淇敼缁勪欢鏍峰紡鏍峰紡闈㈡澘锛氬彲浠ヤ慨鏀瑰綋鍓嶉€変腑缁勪欢鐨勫瑙傛牱寮忋€傚湪鍙鍖栫紪杈戝尯閫変腑缁勪欢锛屽垏鎹㈠埌鍙充晶闈㈡澘鐨勬牱寮忛潰鏉匡紝灏嗘牱寮忛潰鏉垮唴鐩稿簲鐨勬牱寮忓弬鏁颁慨鏀逛负鑷繁璁剧疆鐨勬牱寮忓弬鏁帮紝鍗冲彲瀹屾垚缁勪欢鐨勬牱寮忎慨鏀广€傛牱寮忎腑鐨勭浉鍏冲弬鏁颁笌CSS鐨勬牱寮忎竴鑷达紝鏈塁SS鍩虹鐨勫悓瀛︿竴鐪嬪氨鎳傘€傝鎯呰瑙佷笅鍥俱€傛垜浠互鈥滅郴缁熺粍浠垛€?鈥滄樉绀虹粍浠垛€濅腑鐨勬寜閽寜閽粍浠朵负渚嬶紝鎷栧叆缁勪欢-閫夋嫨缁勪欢-鍒囨崲鍔熻兘闈㈡澘-鈥滄牱寮忊€濄€傛牴鎹埅鍥句慨鏀圭粍浠剁殑W锛堝搴︼級鍜孒锛堥珮搴︼級锛屽彲浠ョ湅鍒扮紪杈戝櫒涓粍浠剁殑瀹藉害鍜岄珮搴︽槸鍚屾鍙樺寲鐨勩€侾S锛氭牱寮忎慨鏀瑰悗锛屽伐鍏蜂細鍦ㄤ唬鐮侀〉瀵瑰簲鏍峰紡鍖鸿嚜鍔ㄧ敓鎴愪竴涓笌缁勪欢鍚屽悕鐨勭被鏍峰紡锛屽锛?templatename='tpl'>...button...3.3.1.1甯冨眬缁撴瀯鏍峰紡鍙傛暟璇存槑size鍙傛暟涓殑W鐩稿綋浜嶤SS涓殑width锛孒鐩稿綋浜嶤SS涓殑height銆傚楂樹篃鏀寔鐩存帴杈撳叆鏁板瓧锛屾瘮濡備笂闈㈡埅鍥句腑鐨刉杈撳叆120涔熸槸鍙互鐨勩€傛敞鎰忥細W鍙傛暟鍜孒鍙傛暟姣旇緝鐗规畩銆傝緭鍏ュ畬鎴愬悗锛屽繀椤绘寜涓嬮敭鐩樺洖杞﹂敭锛圗nter锛夋墠鑳界敓鏁堛€傚鏋滆緭鍏ユ澶辩劍锛屽垯涓嶄細浣夸慨鏀圭敓鏁堛€備富杞存柟鍚?涓寜閽浉褰撲簬CSS:flex-direct:rowflex-direction:row-reverseflex-direction:columnflex-direction:column-reverse5涓寜閽湪涓昏酱瀵归綈鍐呯浉褰撲簬CSS:justify-content:flex-startjustify-content:flex-endjustify-content:centerjustify-content:space-betweenjustify-content:space-around瀛愯酱瀵归綈閲岄潰鐨?涓寜閽浉褰撲簬CSS涓殑:align-items:flex-startalign-items:centeralign-items:flex-endalign-items:baselinealign-items:stretch鎹㈣涓殑3涓寜閽浉褰撲簬CSS:aflex-wrap:nowrapflex-wrap:wrapflex-wrap:wrap-reverse3.3.1.2鍏充簬margin鍜宲adding鐨勭壒娈婅鏄庡浘鏍囦负锛?.3.1.3鏍峰紡鏁堟灉鐗瑰埆璇存槑瀵逛簬鏍峰紡闈㈡澘涓殑淇敼锛屽彲瑙嗗寲宸ュ叿浼氬湪浠ｇ爜灞傚悓姝ョ敓鎴愪竴涓悓鍚嶇被鏍峰紡锛屼互淇濇寔鏍峰紡鍚屾銆傚洜涓虹被鏍峰紡缁戝畾鍒扮粍浠剁殑鏈€澶栧眰鍏冪礌锛屾墍浠ラ€夋嫨缁勪欢鍚庡湪鏍峰紡闈㈡澘涓婃墍鍋氱殑淇敼鍙細瀵圭粍浠剁殑鏈€澶栧眰鏍峰紡鐢熸晥銆傜敱浜嶶I缁勪欢鍜岄珮绾х粍浠舵湰韬湁涓€瀹氱殑鏍峰紡璁剧疆锛屼竴浜涙牱寮忎慨鏀瑰彲鑳藉湪杩欎袱涓粍浠朵笂鏃犳晥銆傜壒姝わ紝鏁寮€鍙戣€呭叧娉ㄣ€?.3.2淇敼缁勪欢鐨勫睘鎬у湪鍙鍖栫紪杈戝尯閫変腑缁勪欢锛屽垏鎹㈠埌鍙充晶闈㈡澘鐨勬牱寮忛潰鏉匡紝灏嗘牱寮忛潰鏉块噷闈㈠搴旂殑鏍峰紡鍙傛暟淇敼涓鸿嚜宸辫缃殑鏍峰紡鍙傛暟锛屽畬鎴愭牱寮忎慨鏀圭粍浠剁殑璇︾粏淇℃伅瑙佷笅鍥俱€?.3.2.1閫氱敤灞炴€ч€氱敤灞炴€ф槸鎵€鏈夌粍浠堕兘鍏锋湁鐨勫睘鎬с€傛牴鎹笉鍚岀粍浠跺皝瑁呮椂鏆撮湶鐨勪笉鍚屽睘鎬э紝姣忎釜缁勪欢鐨勭粍浠跺睘鎬т篃涓嶅悓銆俰d锛氬瓧绗︿覆绫诲瀷锛屾寚瀹氬厓绱犵殑鍞竴id銆備緥濡傦細鍦ㄤ唬鐮佷腑锛屽搴攊d="button-1"hidden:boolean绫诲瀷锛岃缃厓绱犵殑hidden灞炴€х殑鍊硷紝褰撳墠鍙傛暟鍦ˋVM璇硶涓槧灏勫埌瑕侀殣钘忕殑浠ｇ爜灞傘€侾S锛氶殣钘忎富瑕佹槸涓轰簡鍜孉VM寮曟搸鐗堟湰缁熶竴閫昏緫銆傚綋鍓嶇増鏈彧鏈夌郴缁熺粍浠舵敮鎸佽鍙傛暟鎺у埗鏄剧ず鍜岄殣钘忋€俇I缁勪欢鍜岄珮绾х粍浠舵殏涓嶆敮鎸侊紝鎵€浠ュ綋闇€瑕佹帶鍒剁粍浠剁殑鏄剧ず鎴栭殣钘忔椂锛屽缓璁紭鍏堜娇鐢ㄤ笅闈㈢殑鈥滄潯浠舵樉绀衡€濆弬鏁般€備緥濡傦細浠ｇ爜涓搴攈idden={false}鏉′欢鏄剧ず锛氱敤涓€涓〃杈惧紡鎺у埗缁勪欢鏄惁鏄剧ず锛屽綋鍓嶅弬鏁版槧灏勫埌浠ｇ爜灞傛槸AVM璇硶鐨剉-if锛屽畠鏀寔甯冨皵鍊笺€佽〃杈惧紡銆佸嚱鏁板拰鍏宠仈鐨勬槧灏勬暟鎹簮銆備緥濡傦細浠ｇ爜涓搴攙-if="false"寰幆鏄剧ず锛氫互绫讳技鏁扮粍寰幆閬嶅巻鐨勬柟寮忔樉绀哄涓粍浠讹紝鏀寔鍏宠仈鏄犲皠椤甸潰鏁版嵁婧愰亶鍘嗘樉绀虹粍浠讹紝灏嗗綋鍓嶅弬鏁版槧灏勫埌浠ｇ爜涓眰鏄疉VM璇硶v-for銆傛瘮濡傦細鍦ㄤ唬鐮佷腑瀵瑰簲buttons涓殑v-for="(item,index)"PS锛氬叧浜庢暟鎹簮鐨勬蹇靛拰浣跨敤锛屽悗闈㈠啀璇淬€傛湰鏁欑▼閫傚悎鍒濆鑰呫€備负浜嗛檷浣庡涔犵殑澶嶆潅搴︼紝鎴戜滑灏变笉浠嬬粛Expand浜嗐€?.3.2.2缁勪欢灞炴€у彧鏈夊綋鍓嶇粍浠舵湁灞炴€с€傛牴鎹笉鍚岀粍浠跺皝瑁呮椂鏆撮湶鐨勪笉鍚屽睘鎬э紝姣忎釜缁勪欢鐨勭粍浠跺睘鎬т篃涓嶅悓銆?.3.2.3Dataset灞炴€у綋鍓嶆槧灏勫埌浠ｇ爜灞傜殑鍙傛暟鏄疉VM璇硶鐨刣ata-*锛屽嵆椤甸潰dom鍏冪礌鐨刣ataset灞炴€с€備笅鍥炬槸AVM寮€鍙戞枃妗ｄ腑鐨勬弿杩颁俊鎭細渚嬪锛氫唬鐮佷腑瀵瑰簲data-status="selected"3.3.3缁欑粍浠舵坊鍔犱簨浠跺湪鍙鍖栫紪杈戝尯閫変腑缁勪欢锛屽垏鎹㈠埌鍙充晶闈㈡澘鐨勪簨浠堕潰鏉匡紝鍏蜂綋濡備笅鍥撅細鐐瑰嚮鈥滄坊鍔犱簨浠垛€?>鈥滄鏌ヤ簨浠垛€?>鈥滅‘瀹氣€濓細娣诲姞浜嬩欢鍚庯紝娣诲姞浜嬩欢瀵瑰簲鐨勬墽琛屽嚱鏁般€傛偍鍙互閫夋嫨鐜版湁鐨勫嚱鏁版柟娉曡繘琛岀粦瀹氾紝涔熷彲浠ヨ嚜宸卞垱寤轰竴涓柊鐨勫嚱鏁般€傗€滆嚜寤哄嚱鏁扳€濋潰鏉垮嚱鏁板悕锛氬畾涔夊嚱鏁板姛鑳界殑鍑芥暟鍚嶃€傛坊鍔犲姩浣滐細杩欓噷浠嬬粛瀹樻柟鍐呯疆鐨勪袱涓揩閫熻烦杞〉闈㈢殑鍑芥暟鏂规硶銆傞€夋嫨鍚庯紝瀵瑰簲鐨勫嚱鏁版柟娉曚細鑷姩娣诲姞鍒颁唬鐮佹鍖哄煙銆備唬鐮佺墖娈碉細杩欐槸鍑芥暟鍐呴儴鐨勯€昏緫浠ｇ爜銆傚垱寤哄畬鎴愬悗锛岃寰楀叧鑱旂粦瀹氾細鍒氭墠缁勪欢缁戝畾鐨勪簨浠讹紝鍦ㄤ唬鐮侀〉鐨勭粍浠跺厓绱犱笂锛屽疄闄呮槧灏勪唬鐮佹槸onclick={this.showTip}锛岃繖閲屾柊寤虹殑鍜岀幇鏈夌殑functions閮藉湪褰撳墠椤甸潰methods涓嬬殑function鏂规硶锛屾垜浠垏鎹唬鐮佺晫闈㈡煡鐪嬪垰鍒氭坊鍔犵殑function鏂规硶銆侾S锛氫簡瑙ｄ簡浜嬩欢鐨勫師鐞嗕箣鍚庯紝鎴戜滑搴旇鐭ラ亾锛屽湪鍙鍖栧伐鍏蜂腑鏄笉闇€瑕佸啀鏂板缓鍑芥暟鐨勩€備篃鍙互鐩存帴鍦ㄤ唬鐮侀〉鐨勬柟娉曚腑缂栧啓鍔熻兘绋嬪簭浠ｇ爜锛岀劧鍚庣粦瀹氬埌鍙鍖栫晫闈笂銆?.鏁版嵁婧愮被鍨嬭鏄庢垜浠湪寰堝闈㈡澘灞炴€т腑鍐欏叆鍐呭鍊肩殑鏃跺€欙紝缁忓父浼氬彂鐜拌緭鍏ユ鍙充晶鏈変竴涓皬灏忕殑馃敆閾炬帴鍥炬爣銆備緥濡傦紝鍦ㄥ睘鎬ч潰鏉?浜嬩欢涓紝鐐瑰嚮鈥滈€氱敤灞炴€р€濅腑鈥滃懆鏈熸樉绀衡€濊鍙充晶鐨勫皬閾炬帴鍥炬爣銆傚彉閲忥細褰撳墠鍒嗙粍涓嬫槧灏勯〉闈㈡暟鎹腑鐨勫彉閲忓€硷紝濡備笂鍥炬埅鍥句腑鐨則ext鍜寉ear銆侾S锛氬浘涓樉绀虹殑鍙橀噺鍐呭涓哄綋鍓嶉〉闈ata涓繚瀛樼殑鍙橀噺鐨勯粯璁ゅ€硷紙瑙佹埅鍥撅級銆侸S琛ㄨ揪寮忥細鍒囨崲JS琛ㄨ揪寮忥紝鏀寔浣跨敤浠ｇ爜琛ㄨ揪寮忚嚜瀹氫箟灞炴€у€笺€傝В闄ょ粦瀹氭寜閽紝瀵逛簬鏈夌粦瀹氬彉閲忓€肩殑鍏冪礌锛屽彲浠ョ偣鍑昏В闄ょ粦瀹?/p>
