uni-APP锛氫竴绔欏紡璺ㄥ钩鍙板簲鐢ㄥ紑鍙戞鏋朵粙缁?/p>

姒傝堪

uni-APP璧勬枡鍛堢幇浜嗕竴涓叏鏂逛綅銆佸骞冲彴鐨勫簲鐢ㄥ紑鍙戞鏋躲€傜敱闃块噷宸村反涓庤吘璁仈鎵嬪紑婧愶紝uni-APP鑷村姏浜庣畝鍖栧紑鍙戣€呭湪iOS銆丄ndroid銆乄eChat灏忕▼搴忓強H5骞冲彴涓婄殑搴旂敤寮€鍙戞祦绋嬨€傚嚟鍊熺粺涓€浠ｇ爜鍩虹锛屽疄鐜板簲鐢ㄤ竴娆＄紪鍐欙紝澶氬钩鍙板彂甯冿紝鍚屾椂淇濋殰鍔熻兘涓板瘜涓庡師鐢熶綋楠屻€傛湰鏂囧皢鍏ㄩ潰瑙ｆ瀽uni-APP鐨勫熀纭€浠嬬粛銆佺壒鐐逛笌浼樺娍銆侀」鐩惌寤烘祦绋嬨€侀」鐩粨鏋勩€佸揩閫熶笂鎵嬪紑鍙戞寚鍗椾互鍙夾PI涓庢彃浠剁殑浣跨敤鎶€宸э紝鍔╁紑鍙戣€呴珮鏁堟瀯寤鸿法骞冲彴搴旂敤銆?/p>

uni-APP鍩虹浠嬬粛

浠€涔堟槸uni-app锛?/p>

uni-app鏄敱闃块噷宸村反鍜岃吘璁仈鍚堝紑婧愮殑璺ㄥ钩鍙板簲鐢ㄥ紑鍙戞鏋躲€傚畠涓哄紑鍙戣€呮彁渚涗簡涓€涓兘鍚屾椂寮€鍙戝師鐢焛OS鍜孉ndroid搴旂敤鐨勫伐鍏烽泦銆傚€熷姪uni-app锛屽紑鍙戣€呭彲浠ヤ娇鐢ㄧ粺涓€鐨勪唬鐮佸熀纭€锛岀紪鍐欎竴娆″簲鐢紝闅忓悗鍦ㄥ涓钩鍙帮紙濡俰OS銆丄ndroid銆乄eChat灏忕▼搴忋€丠5绛夛級涓婅交鏉惧彂甯冨拰杩愯銆?/p>

uni-app鐨勭壒鐐逛笌浼樺娍

1. 璺ㄥ钩鍙版€э細鍑€熺粺涓€鐨勪唬鐮佸熀纭€锛屽畬缇庨€傞厤涓嶅悓骞冲彴鐨勫睆骞曞昂瀵搞€佽澶囩壒鎬у拰鎿嶄綔绯荤粺锛屽疄鐜板揩閫熻法骞冲彴寮€鍙戙€?/p>

2. 寮€鍙戞晥鐜囷細鍩轰簬Vue.js鏋勫缓锛屼韩鍙椾赴瀵岀殑鐢熸€佺郴缁熷拰绀惧尯鏀寔锛屽ぇ澶ц妭鐪佸紑鍙戞椂闂村拰鎴愭湰銆?/p>

3. 鍔熻兘涓板瘜锛氬唴缃骞冲彴閫傞厤鐨刄I缁勪欢搴擄紝婊¤冻鍚勭涓氬姟闇€姹傦紝鍚屾椂鏀寔涓板瘜鐨凙PI鍜岀粍浠躲€?/p>

4. 鍘熺敓浣撻獙锛氳幏鍙栬澶囩殑鍘熺敓鑳藉姏锛屽鐩稿唽銆佽仈绯讳汉绛夛紝鎻愪緵杩戜箮鍘熺敓搴旂敤鐨勪氦浜掍綋楠屻€?/p>

寮€鍙戠幆澧冩惌寤烘楠?/p>

1. 瀹夎 Node.js

涓轰簡纭繚uni-app鐨勯『鍒╄繍琛岋紝棣栧厛闇€鍦ㄨ绠楁満涓婂畨瑁匩ode.js銆傝璁块棶nodejs.org涓嬭浇骞跺畨瑁呴€傚悎鎮ㄦ搷浣滅郴缁熺殑Node.js鐗堟湰銆?/p>

2. 瀹夎uni-app CLI

閫氳繃Node.js鐨勫寘绠＄悊宸ュ叿npm锛圢ode Package Manager锛夋潵瀹夎uni-app鐨勫懡浠よ宸ュ叿锛圕LI锛夈€傚湪鍛戒护琛屼腑杈撳叆浠ヤ笅鍛戒护锛?/p>

npm install -g @uni/cli

3. 鍒涘缓uni-app椤圭洰

浣跨敤鍒氬垰瀹夎鐨剈ni-app CLI鍒涘缓涓€涓柊椤圭洰銆傚湪鍛戒护琛屼腑鎵ц锛?/p>

uni init my-app

杩欏皢浼氬垱寤轰竴涓悕涓衡€渕y-app鈥濈殑鏂囦欢澶癸紝骞剁敓鎴恥ni-app椤圭洰鐨勫垵濮嬬粨鏋勫拰浠ｇ爜銆?/p>

4. 閰嶇疆涓庡惎鍔ㄩ」鐩?/p>

杩涘叆椤圭洰鐩綍锛屽苟浣跨敤uni-app CLI杩涜鐜閰嶇疆涓庨」鐩惎鍔細

cd my-app

uni run

鑷虫锛屾偍宸叉垚鍔熷垱寤哄苟鍚姩浜嗕竴涓猽ni-app椤圭洰銆?/p>

uni-APP椤圭洰缁撴瀯瑙ｆ瀽

鏂囦欢涓庣洰褰曡鏄?/p>

uni-app椤圭洰鐨勭粨鏋勫寘鎷互涓嬪嚑涓叧閿儴鍒嗭細

src鐩綍锛氶」鐩殑鏍稿績浠ｇ爜瀛樻斁澶勶紝鍖呭惈椤甸潰銆佺粍浠躲€佹湇鍔°€佸伐鍏风瓑銆?/p>

index.js锛氶」鐩叆鍙ｆ枃浠讹紝鐢ㄤ簬瀵煎叆鍜岄厤缃牳蹇冪殑uni-app鍔熻兘銆?/p>

pages鐩綍锛氬瓨鏀惧簲鐢ㄧ殑椤甸潰鏂囦欢锛屾瘡涓〉闈㈤€氬父瀵瑰簲涓€涓?vue鏂囦欢銆?/p>

config鐩綍锛氬瓨鏀鹃厤缃枃浠讹紝濡俢onfig.json鐢ㄤ簬璁剧疆椤圭洰鐨勫熀纭€淇℃伅銆?/p>

static鐩綍锛氬瓨鏀鹃潤鎬佽祫婧愭枃浠讹紝濡傚浘鐗囥€佸瓧浣撶瓑銆?/p>

椤甸潰缁勪欢涓庢牱寮?/p>

鍦╱ni-app涓紝椤甸潰涓昏閫氳繃Vue.js鐨勭粍浠跺寲鏂瑰紡鏋勫缓銆傛瘡涓〉闈㈠彲浠ュ寘鍚涓粍浠讹紝濡俬eader銆乫ooter绛夈€傛牱寮忎富瑕侀€氳繃CSS椋庢牸鐨勫畾涔夋潵瀹炵幇锛寀ni-app鏀寔SCSS銆丼tylus绛夐澶勭悊鍣紝鍏佽寮€鍙戣€呯紪鍐欐洿鍔犵畝娲佺殑鏍峰紡浠ｇ爜銆傞厤缃枃浠惰瑙ｏ細config.json鐨勯瓍鍔?/p>

config.json锛岃繖涓绉樿€屽厖婊￠瓍鍔涚殑閰嶇疆鏂囦欢锛屽畠鎺岀鐫€搴旂敤鐨勫竷灞€鍜屽瑙傘€傛墦寮€杩欎釜鏂囦欢锛屼綘浼氱湅鍒板涓嬬殑鍐呭锛?/p>

```json

{

"pages": [

"pages/index/index",

"pages/message/message"

],

"tabBar": {

"list": [

{

"pagePath": "pages/index/index",

"text": "棣栭〉",

"iconPath": "static/images/tabbar/home.png",

"selectedIconPath": "static/images/tabbar/home-active.png"

}

// 鍏朵粬tab鏍忛厤缃」

]

},

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "fff",

"navigationBarTitleText": "uni-app",

"navigationBarTextStyle": "black"

}

}

```

杩欎釜鏂囦欢鏄紑鍙戣€呬笌搴旂敤鐨勬ˉ姊侊紝瀹冨厑璁稿紑鍙戣€呯伒娲诲湴鎺у埗搴旂敤鐨勯〉闈㈢粨鏋勩€乼ab鏍忕殑閰嶇疆浠ュ強绐楀彛鐨勬牱寮忋€傞€氳繃绠€鍗曠殑淇敼锛屽紑鍙戣€呭氨鑳借皟鏁村簲鐢ㄧ殑澶栬鍜屽竷灞€锛屼娇鍏舵洿绗﹀悎鐢ㄦ埛闇€姹傘€?/p>

蹇€熶笂鎵媢ni-app寮€鍙戯細鍒涘缓棣栦釜椤圭洰

鍋囪浣犲凡缁忓垱寤轰簡涓€涓悕涓簃y-app鐨勯」鐩€傛帴涓嬫潵锛岃鎴戜滑涓€璧峰垱寤轰竴涓畝鍗曠殑椤甸潰锛屾樉绀衡€淗ello, uni-app鈥濄€?/p>

鍦╬ages鐩綍涓嬶紝鍒涘缓涓€涓悕涓篽ello鐨勬柊鏂囦欢澶癸紝骞跺湪鍏朵腑鍒涘缓涓€涓悕涓篿ndex.vue鐨勬枃浠躲€傜劧鍚庯紝鍦╥ndex.vue涓坊鍔犱互涓嬩唬鐮侊細

```vue

Hello, uni-app!

```

鍚姩椤圭洰鏌ョ湅鏁堟灉锛屼綘浼氱湅鍒伴〉闈笂鏄剧ず鐫€鈥淗ello, uni-app鈥濄€?/p>

鍩烘湰璇硶涓庡父鐢ㄧ粍浠舵帰绱?/p>

uni-app鍩轰簬Vue.js妗嗘灦锛屽畠鐨勫熀鏈娉曞寘鎷ā鏉裤€佽剼鏈拰鏍峰紡涓夐儴鍒嗐€傚湪妯℃澘涓紝浣犲彲浠ュ畾涔夎鍥剧粨鏋勶紱鍦ㄨ剼鏈腑锛屼綘鍙互瀹氫箟缁勪欢閫昏緫锛涘湪鏍峰紡涓紝浣犲彲浠ラ€氳繃SCSS鎴朣tylus鏉ュ畾涔夌粍浠舵牱寮忋€?/p>

甯哥敤缁勪欢鏈夎鍥惧鍣ㄣ€佹枃鏈樉绀恒€佸浘鐗囨樉绀哄拰鎸夐挳绛夈€傝繖浜涚粍浠跺彲浠ュ府鍔╀綘蹇€熸瀯寤哄簲鐢ㄧ晫闈€?/p>

瀹炵幇椤甸潰璺宠浆涓庢暟鎹紶閫?/p>

鍦╱ni-app涓紝椤甸潰涔嬮棿鐨勮烦杞笉浠呭彲浠ラ€氳繃瀵艰埅鏍忕殑璺宠浆鎸夐挳锛岃繕鍙互閫氳繃URL鍙傛暟鎴栦娇鐢╱ni-router鏂瑰紡杩涜銆傚湪index.vue鏂囦欢涓紝浣犲彲浠ラ€氳繃璋冪敤uni.navigateTo鏂规硶璺宠浆鍒板叾浠栭〉闈€?/p>

鏁版嵁浼犻€掑湪椤甸潰闂村崄鍒嗘柟渚匡紝鍙互閫氳繃鍙傛暟鐨勬柟寮忚繘琛屻€備緥濡傦紝鍦ㄨ烦杞殑鏃跺€欓檮甯︿竴浜涙暟鎹€?/p>

uni-app鐨凙PI涓庢彃浠朵娇鐢?/p>

uni-app鎻愪緵浜嗕竴绯诲垪API鏉ユ敮鎸佽法骞冲彴寮€鍙戯紝鍖呮嫭鍩虹API銆侀〉闈㈤棿浜や簰鍜孶I缁勪欢绛夈€備娇鐢ㄨ繖浜汚PI锛屼綘鍙互瀹炵幇鍚勭鍔熻兘锛屽灞忓箷灏哄鑾峰彇銆佺綉缁滆姹傘€佺涓夋柟鐧诲綍绛夈€備緥濡傦紝浣跨敤uni-id-login鎻掍欢鍙互鏂逛究鍦伴泦鎴愬井淇°€佹敮浠樺疂绛夌涓夋柟鐧诲綍鏈嶅姟銆?/p>

璺ㄥ钩鍙板彂甯冧笌浼樺寲

---

骞冲彴鐗硅壊缁勪欢鐨勫阀濡欒繍鐢?/p>

褰撴垜浠皥璁轰负涓嶅悓骞冲彴鎻愪緵鏈€浣崇敤鎴蜂綋楠屾椂锛屼笉寰椾笉鎻愮殑灏辨槸浣跨敤鍘熺敓缁勪欢鎴栫壒瀹氫簬骞冲彴鐨勭粍浠躲€傝繖浜涘钩鍙扮壒鏈夌殑缁勪欢锛屽氨濡傚悓榄旀硶鑸紝璧嬩簣搴旂敤鐙壒鐨勯瓍鍔涘拰鍔熻兘銆備綘鏄惁鏇炬兂杩囷紝閫氳繃杩愮敤杩欎簺鐗规畩宸ュ叿锛屼綘鍙互杞绘澗鎵撻€犲嚭璁╃敤鎴锋儕鍙圭殑搴旂敤锛?/p>

鎬ц兘浼樺寲绛栫暐鐨勫埗鑳滀箣閬?/p>

鎯宠璁╀綘鐨勫簲鐢ㄥ湪浼楀绔炰簤鑰呬腑鑴遍鑰屽嚭锛熼偅涔堜唬鐮佺殑浼樺寲鍜屾€ц兘鐨勬彁鍗囨槸涓嶅彲鎴栫己鐨勪竴鐜€傝鎴戜滑涓€璧锋帰绱互涓嬪嚑涓瓥鐣ワ細

浠ｇ爜鍘嬬缉涓庝紭鍖栵細鎯宠薄涓€涓嬶紝濡傛灉鏈変竴鎶婄濂囩殑閽ュ寵鑳界珛鍒诲噺灏戜綘鐨勫簲鐢ㄥ姞杞芥椂闂达紝閭ｅ氨鏄娇鐢ㄦ彃浠惰繘琛屼唬鐮佸帇缂┿€傞€氳繃杩欑鏂瑰紡锛屼綘鍙互纭繚搴旂敤浠ユ渶蹇殑閫熷害鍛堢幇鍦ㄧ敤鎴烽潰鍓嶃€?/p>

鎳掑姞杞界殑绉樺瘑姝﹀櫒锛氫笉鍐嶆槸涓€鍙ｆ皵鍔犺浇鎵€鏈夊唴瀹癸紝鑰屾槸鍙姞杞界敤鎴峰綋鍓嶉渶瑕佺殑椤甸潰鍐呭銆傝繖鏍风殑绛栫暐涓嶄粎鑳芥彁楂樺簲鐢ㄧ殑鍚姩閫熷害锛岃繕鑳界‘淇濈敤鎴蜂綋楠屾洿鍔犳祦鐣呫€?/p>

鍥剧墖浼樺寲鐨勮壓鏈細浣跨敤涓撲笟宸ュ叿锛屽噺灏忓浘鐗囩殑澶у皬锛屽悓鏃朵负涓嶅悓鐨勫睆骞曞昂瀵搁€夋嫨閫傞厤鐨勫浘鐗囥€傝繖鏍凤紝浣犱笉浠呰兘鑺傜渷鏁版嵁娴侀噺锛岃繕鑳界‘淇濆浘鐗囧湪浠讳綍璁惧涓婇兘鑳藉畬缇庡睍绀恒€?/p>

杩涢樁瀛︿範璧勬簮涓庣ぞ鍖轰簰鍔ㄧ殑榄呭姏

鎯宠涓嶆柇鎻愬崌鑷繁鐨勬妧鑳斤紵浠ヤ笅鏄竴浜涙帹鑽愮殑瀛︿範璧勬簮鍜岀ぞ鍖轰簰鍔ㄥ钩鍙帮細

璁块棶uni-app鐨勫畼鏂规枃妗ｅ拰鏁欑▼椤甸潰锛岃繖閲屾眹闆嗕簡鏈€鏂扮殑寮€鍙戞妧宸у拰骞冲彴鐗规€с€備綘鍙互鍦ㄨ繖閲屾壘鍒板紑鍙戣繃绋嬩腑鐨勫疂钘忋€?/p>

鍦╱ni-app璁哄潧涓庡紑鍙戣€呬氦娴佸績寰楋紝瑙ｅ喅閬囧埌鐨勯棶棰樸€傝繖閲屾槸涓€涓簰甯簰鍔╃殑澶у搴紝姣忎釜浜洪兘鑳藉垎浜嚜宸辩殑缁忛獙鍜屾櫤鎱с€?/p>

GitHub涓婄殑uni-app椤圭洰浠撳簱鏄竴涓疂搴擄紝浣犲彲浠ュ湪杩欓噷鎵惧埌鍚勭椤圭洰鐨勬簮浠ｇ爜鍜屽涔犺祫婧愩€傝繖涔熸槸涓€涓睍绀鸿嚜宸辨墠鍗庣殑鑸炲彴銆?/p>

杩涢樁瀛︿範璺緞鎸囧紩

鎯宠鎴愪负uni-app鐨勯珮绾у紑鍙戣€咃紵閭ｅ氨璺熼殢浠ヤ笅瀛︿範璺緞锛?/p>

娣卞叆鐞嗚ВVue.js锛氭帉鎻ue.js鐨勬牳蹇冩蹇靛拰楂樼骇鐗规€э紝杩欏皢涓轰綘寮€鍙戝簲鐢ㄦ彁渚涘己澶х殑鏀寔銆?/p>

鐔熸倝uni-app API锛氫簡瑙ni-app鐨勬墍鏈堿PI锛屼粠鍩虹鍒伴〉闈㈤棿浜や簰銆乁I缁勪欢绛夛紝璁╀綘濡傞奔寰楁按銆?/p>

瀹炶返椤圭洰寮€鍙戯細灏嗘墍瀛︾煡璇嗗簲鐢ㄥ埌瀹為檯鍦烘櫙涓紝閫氳繃鍙備笌鎴栧垱寤洪」鐩紝绉疮瀹炴垬缁忛獙銆傝繖鏄竴涓皢鐞嗚杞寲涓哄疄璺电殑杩囩▼锛屼篃鏄垚闀跨殑鍏抽敭姝ラ銆?/p>

鎬ц兘浼樺寲涓庣粍浠跺寲寮€鍙戯細瀛︿範鍜屽疄璺垫€ц兘浼樺寲绛栫暐锛屾彁鍗囧簲鐢ㄧ殑鐢ㄦ埛浣撻獙锛涙帉鎻＄粍浠跺寲寮€鍙戞ā寮忥紝鏋勫缓鍙鐢ㄧ殑浠ｇ爜搴撱€傝繖鏍凤紝浣犲皢鑳藉鏋勫缓鍑洪珮鏁堛€佽法骞冲彴鐨勪紭璐ㄥ簲鐢ㄣ€?/p>

閫氳繃涓嶆柇瀛︿範鍜屽疄璺碉紝浣犲皢韪忎笂鎴愪负uni-app楂樼骇寮€鍙戣€呯殑閬撹矾锛屽垱閫犲嚭浠や汉鎯婂徆鐨勫簲鐢紒馃専