如何搭建一个电影微信小程序

⑴ 濡備綍鍒涘缓鑷宸辩殑寰淇″皬绋嬪簭锛

鍒涘缓鑷宸辩殑寰淇″皬绋嬪簭闇瑕侀伒寰浠ヤ笅姝ラわ細
1. 娉ㄥ唽锛氶栧厛锛屼綘闇瑕佸湪寰淇″叕浼楀钩鍙颁笂娉ㄥ唽涓涓灏忕▼搴忚处鍙枫傝块棶寰淇″叕浼楀钩鍙板畼缃戯紙https://mp.weixin.qq.com/锛夛紝鐐瑰嚮鈥滅珛鍗虫敞鍐屸濓紝鎸夌収鎻愮ず濉鍐欑浉鍏充俊鎭锛屽畬鎴愭敞鍐屻
2. 鐧诲綍锛氫娇鐢ㄥ垰鍒氭敞鍐岀殑璐﹀彿鐧诲綍寰淇″叕浼楀钩鍙般
3. 寮閫氬皬绋嬪簭锛氬湪寰淇″叕浼楀钩鍙扮殑棣栭〉锛岀偣鍑诲乏渚ц彍鍗曟爮鐨勨滃皬绋嬪簭鈥濓紝鐒跺悗鐐瑰嚮鈥滄柊寤哄皬绋嬪簭鈥濇寜閽锛屾寜鐓ф彁绀哄～鍐欑浉鍏充俊鎭锛屽畬鎴愬皬绋嬪簭鐨勫垱寤恒
4. 浜嗚В灏忕▼搴忓紑鍙戞枃妗ｏ細鍦ㄥ井淇″叕浼楀钩鍙扮殑寮鍙戣呬腑蹇冿紝浣犲彲浠ユ壘鍒拌︾粏鐨勫皬绋嬪簭寮鍙戞枃妗ｃ傝繖浜涙枃妗ｅ寘鎷浜嗗皬绋嬪簭鐨勫熀鏈姒傚康銆佺粍浠躲丄PI绛夛紝鏄寮鍙戝皬绋嬪簭鐨勯噸瑕佸弬鑰冦
5. 涓嬭浇骞跺畨瑁呭井淇″紑鍙戣呭伐鍏凤細寰淇″紑鍙戣呭伐鍏锋槸寮鍙戝皬绋嬪簭鐨勫繀澶囧伐鍏枫備綘鍙浠ュ湪寰淇″叕浼楀钩鍙扮殑寮鍙戣呬腑蹇冧笅杞藉苟瀹夎呭畠銆
6. 鍒涘缓椤圭洰锛氭墦寮寰淇″紑鍙戣呭伐鍏凤紝鐐瑰嚮鈥滄柊寤洪」鐩鈥濓紝濉鍐欓」鐩鍚嶇О銆佺洰褰曠瓑淇℃伅锛岄夋嫨涓涓鍚堥傜殑妯℃澘锛岀劧鍚庣偣鍑烩滃垱寤衡濄
7. 缂栧啓浠ｇ爜锛氬湪寰淇″紑鍙戣呭伐鍏蜂腑锛屼綘鍙浠ョ紪鍐欏皬绋嬪簭鐨勪唬鐮併傚井淇″皬绋嬪簭涓昏佷娇鐢╓XML锛堢被浼间簬HTML锛夈乄XSS锛堢被浼间簬CSS锛夊拰JavaScript杩涜屽紑鍙戙備綘鍙浠ユ牴鎹寰淇″畼鏂规彁渚涚殑缁勪欢鍜孉PI锛岀紪鍐欒嚜宸辩殑灏忕▼搴忛昏緫鍜岀晫闈銆
8. 棰勮堝拰璋冭瘯锛氬湪寰淇″紑鍙戣呭伐鍏蜂腑锛屼綘鍙浠ュ疄鏃堕勮堝拰璋冭瘯浣犵殑灏忕▼搴忋傜偣鍑诲伐鍏锋爮涓婄殑鈥滈勮堚濇寜閽锛屾壂鎻忎簩缁寸爜锛屽嵆鍙鍦ㄦ墜鏈轰笂鏌ョ湅灏忕▼搴忕殑鏁堟灉銆傚悓鏃讹紝浣犺繕鍙浠ヤ娇鐢ㄥ伐鍏锋爮涓婄殑鈥滆皟璇曗濆姛鑳斤紝瀵瑰皬绋嬪簭杩涜岃皟璇曘
9. 鎻愪氦瀹℃牳锛氬綋浣犵殑灏忕▼搴忓紑鍙戝畬鎴愬悗锛屽彲浠ュ湪寰淇″叕浼楀钩鍙扮殑寮鍙戣呬腑蹇冩彁浜ゅ℃牳銆傚℃牳閫氳繃鍚庯紝浣犵殑灏忕▼搴忓氨鍙浠ユｅ紡涓婄嚎浜嗐
10. 鍙戝竷涓婄嚎锛氬湪寰淇″叕浼楀钩鍙扮殑寮鍙戣呬腑蹇冿紝鐐瑰嚮鈥滅増鏈绠＄悊鈥濓紝鐒跺悗鐐瑰嚮鈥滃彂甯冣濇寜閽锛屾寜鐓ф彁绀哄畬鎴愬彂甯冩搷浣溿傝繖鏍凤紝浣犵殑灏忕▼搴忓氨鍙浠ユｅ紡涓婄嚎锛屼緵鐢ㄦ埛浣跨敤浜嗐

⑵ 鍦ㄥ井淇″皬绋嬪簭涓濡備綍鍒朵綔鐚鐪肩數褰

鏈夌敤鎴峰枩娆㈢湅鐢靛奖鏈夊枩娆㈢帺寰淇″皬绋嬪簭锛屼粖澶╁皬缂栧氨缁欏ぇ瀹跺甫鏉ヤ簡鍦ㄥ井淇″皬绋嬪簭涓鍒朵綔鐚鐪肩數褰辩殑璇︾粏姝ラわ紝鎰熷叴瓒ｇ殑灏忎紮浼村氨璧剁揣鍜屽皬缂栦竴璧锋潵鐪嬬湅鍚с

姝ｆ枃

搴熻瘽涓嶅氳达紝鍏堜笂鏁堟灉鍥

鏁堟灉鍥

鏈琩emo瀹屾垚鍏辫楄垂杩戜袱鍛锛屼篃鏄鍦ㄧ┖浣欐椂闂村幓鍐欑殑锛屽洜涓烘秹鍙婂埌鏂扮煡璇咼S銆丠TML鍜孋SS3锛屾墍浠ヤ篃鏄杈瑰︿範杈瑰啓锛屼唬鐮佺紪鍐欎笂鏈変粈涔堜笉褰撳勶紝杩橀渶灏忎紮浼村湪璇勮哄勬寚鏄庯紝甯鍔╀綔鑰呮洿涓婁竴灞傛ゼ!

(娉锛氭湰鏂囩珷宸查粯璁ゅ悇浣嶅皬浼欎即宸茬粡鐔熸倝寰淇″皬绋嬪簭鐨勭洰褰曠粨鏋勪互鍙婃瘡涓鏂囦欢鎵浠ｈ〃鐨勭殑鍚涔夊拰灏忕▼搴廇PI鐨勪娇鐢锛屾墍浠ユ枃涓涓嶄細璇︾粏璇存槑锛岀粨灏句細鐩存帴缁欏嚭瀹屾暣浠ｇ爜)

鐚鐪肩數褰盿pi锛氱偣鍑绘ゅ

涓銆佺洰褰曠粨鏋

鐩褰曠粨鏋

閲囩敤鐨勫紑鍙戝伐鍏锋槸Egret Wing(鐐瑰嚮杩涘叆瀹樼綉涓嬭浇)锛屼富瑕佺洰褰曡存槑锛

浠庣洰褰曞彲鐭ユ暣浣撶粨鏋勭畝鍗曪紝涓昏佸氨鏄涓変釜鐣岄潰锛氶栭〉homepage銆佺數褰辫︽儏椤祄oviedetail銆佸奖闄㈠垪琛ㄩ〉cinema銆

浜屻侀栭〉

棣栭〉

tab浠ｇ爜锛屾墦寮app.json濡傚浘锛

pages鍜宼abBar

杩欓噷鎴戞兂璇翠笅锛屽井淇″皬绋嬪簭鑷甯﹀箃abBar閫夋嫨鏁堟灉浣滆呰繕鏄鎸哄枩娆㈢殑(濡傛灉鍦ˋndroid涓婅繕瑕佺粰姣忎釜tab鍐欎釜selector閫夋嫨鍣ㄧ殑XML鏂囦欢)鐢变簬杩欐垫病浠涔堟妧鏈闅剧偣锛屾墍浠ュ氨涓嶅氳翠簡銆

鎺ヤ笅鏉ヨ繘鍏ラ栭〉homepage锛屼竴涓鐣岄潰鐨勬枃浠剁粨鏋勭讳笉寮涓変釜鏂囦欢锛歺xx.js銆亁xx.wxml銆亁xx.wxss

鍏堟潵鐪嬬湅甯冨眬浠ｇ爜锛

鍦ㄨ繖閲屼綔鑰呮壙璁ゅ綋鍒濆啓鐨勬椂鍊欏伔浜嗕笅鎳掞紝鏈変簺鏍囩惧睘鎬ф垜鐩存帴鐢╯tyle鍐欎簡锛屼絾鐪熸ｅ紑鍙戞椂锛屾渶濂芥妸姣忎釜鏍囩剧殑style鍐欏湪.wxss鏂囦欢閲岋紝閫氳繃鑷瀹氫箟鐨刢lass鍚嶇О(鎴栬卛d)锛岀浉鍚屽竷灞鐨勫湴鏂瑰彲浠ョ洿鎺ュ紩鐢ㄥ悓涓涓猚lass灏卞彲浠ヤ簡锛屼笉鐒朵細鍍忎綔鑰呰繖鏍锋湁浜涘睘鎬ч噸澶嶅啓浜嗗嚑娆(鎵嬪姩灏村艾)銆

.js浠ｇ爜寰涓嬬湅锛

homepage.js

鐢靛奖鍒楄〃鐨勪俊鎭鏈鏀惧埌浜嗗畾涔夌殑infos[]鏁扮粍涓锛屽皬绋嬪簭涔熶笉瀛樺湪json瑙ｆ瀽锛屽湪wx.request璇锋眰涓嬪緱鍒扮殑res鍙栫浉搴旂殑鍊紃es.data.data.movie锛岀洿鎺ュ湪homepage.html鏍囩句腑鐢╳x:for={{infos}}閬嶅巻锛屽厓绱犻粯璁や负item锛屽彇鍊肩殑鏃跺欑敤item.鍊肩殑鍚嶇О灏卞彲浠ュ彇鍒版暟鎹銆

杩欓噷鏈変釜灏忓湴鏂归渶瑕佽存槑涓嬶紝褰撴椂涓轰簡瑙ｅ喅涔熸槸鑺变簡鐐规椂闂达細鍦╦son鏁版嵁閲屾湁涓鍙傛暟鍚嶇О涓3d锛岃屼笖杩欎釜鏍囩句笉鏄鎵鏈夌數褰遍兘鏈夌殑锛屾墍浠ュ畾涔変簡threeD:true杩欎釜鍙橀噺锛屼负浜嗚兘鍦.wxml涓鍙栧埌鍊硷紝灏卞彲鎯宠岀煡鐨勭洿鎺ュ啓鎴愪簡wx:if={{item.3d}}锛岀粨鏋滃氨鎶ラ敊浜嗭細

閿欒淇℃伅

闂棰樺氨鍑哄湪杩欎釜3d涓婏紝鍚庢潵鏌ヨ祫鏂欐墠寰楃煡鏀瑰啓鎴恮x:if={{item['3d']}}灏辩珛椹瑙ｅ喅鍟︼紝娌′粈涔堝師鍥狅紝绾﹀畾淇楁垚锛屽彧鏄浣滆呰繖鍙鍓嶇灏忕櫧涓嶇煡閬撹屽凡(鑾瑙佹......鎵嬪姩寰绗)

涓轰簡璁╁ぇ瀹舵洿娓呮氫簡瑙ｇ數褰卞垪琛ㄥ揩鐨勫竷灞锛屼綔鑰呯敾浜嗕釜鑽夊浘(鐪熺殑寰堣崏......)锛

鐢靛奖鍒楄〃甯冨眬

鍙戜釜鐗㈤獨锛氱涓娆″啓甯冨眬鏃跺績閲屽氨鎯筹紝杩樻槸Android甯冨眬鍐欒捣鏉ユ柟渚匡紝鍒氬紑濮嬫帴瑙CSS3鏃惰夊緱濂介夯鐑︼紝杩欎釜class瑕佺粰涓猻tyle锛岄偅涓涔熻佺粰涓锛岃屼笖鏈夋椂瑕佽剧疆id锛屽湪鍚屼竴涓猚lass涓嬩笉鍚岀殑id涔熻佸湪wxss缁欎釜style锛岀幇鍦ㄩ傚簲鍚庢劅瑙夎繕绠楄壇濂戒簡銆傚洜涓哄竷灞鍙傛暟娌￠毦鐐癸紝鎵浠ヨ繖閲屽氨涓嶈创浠ｇ爜浜嗐

浜屻佽︽儏椤

鐢靛奖璇︽儏椤

杩欓噷涓嶈创鍏ㄩ儴浠ｇ爜浜嗭紝鍙鐢ㄥ叧閿浠ｇ爜璇存槑涓嬪綋鏃堕亣鍒扮殑鍑犱釜闂棰橈細

鈶犻珮鏂妯＄硦

楂樻柉妯＄硦

杩欓噷鍏辨湁涓や釜锛屼竴涓猚lass=blur(楂樻柉妯＄硦鑳屾櫙)锛屼竴涓猚lass=info(鐢靛奖淇℃伅)銆傚垰寮濮嬫槸鏈鐫Android鐨勫竷灞璁捐℃濈淮鍘诲啓杩欎釜甯冨眬锛岃繖涓嶅氨鏄涓猂elativeLayout鍚楋紝鍐欑潃鍐欑潃鍒版渶鍚庢晥鏋滃嚭鏉ワ紝鍙戠幇浣滆呰繕鏄澶澶╃湡锛屼俊鎭閭ｄ竴鏍忔垜鑾鍚嶅叾濡欏啓鍒伴珮鏂妯＄硦鐨勪笅闈浜嗭紝涔熷氨鏄鍐欐垚浜哃inearLayout涓攐rientation=vertical锛屽綋鏃跺氨绗戣嚜宸憋細浣犵幇鍦ㄥ張涓嶆槸鍦ㄥ啓Android锛岄啋閱!瀛╁瓙~涓昏佸師鍥犳槸CSS3鐨勭煡璇嗕笉澶燂紝鎵浠ユ垜灏辫佽佸疄瀹炲幓瀛︿範浜嗕竴鐣锛屼笅闈渚挎槸浠ｇ爜锛

楂樻柉妯＄硦鍜岀粷瀵瑰竷灞

filter:blur(30px)鍜-webkit-filter:blur(30px)褰㈡垚浜嗛珮鏂妯＄硦鐨勬晥鏋(鍐呭績OS锛氬傛灉鏄疉ndroid鐨勮瘽鍙堟槸涓澶у爢浠ｇ爜)銆俰nfo涓鐨刾osition:relative銆亃-index:1锛宐lur涓鐨刾osition锛歛bsolute銆亃-index:0鐩哥粨鍚堝氨鑳藉睍绀哄嚭涓婇潰鐨勬晥鏋滐紝鍏抽敭鍦ㄤ簬info涓鐨剒-index瑕佸ぇ浜巄lur鐨勶紝琛ㄧず鏄剧ず鍦╞lur鐨勪笂鏂癸紝杩樿佷繚璇乮nfo鏄鐩稿圭殑锛宐lur鏄缁濆圭殑锛屾劅鍏磋叮骞朵笖娌℃帴瑙﹁繃CSS3鐨勭泦鍙嬪彲浠ヤ笅杞戒唬鐮佽嚜宸卞幓璇曡瘯鏀规敼鐪嬬湅鏁堟灉锛屼笉瑕佸儚浣滆呬竴鏍蜂互涓鸿嚜宸变細鍙嶈屾槸鑷浣滆仾鏄庛

鈶＄偣鍑绘樉绀哄叏閮

鐐瑰嚮鍥炬爣鏄剧ず鍏ㄩ儴

杩欓噷鏈鐚垮張瑕佽禐鎵涓涓嬩笁鍏冭繍绠楃︿簡锛

褰辩墖绠浠

.js鏂囦欢涓鍦╠ata閲岃剧疆涓変釜鍙橀噺

鍙傛暟

showall鏂规硶

showall鏂规硶

hideText甯冨皵鍊肩敤鏉ュ垽鏂褰撳墠鏄鍚︿负闅愯棌鐘舵侊紝鐢╯tyle={{hideText?'-webkit-line-clamp:3':' '}}璁剧疆鏄剧ず琛屾暟锛屽綋hideText涓簍rue鏄鏄剧ず3琛岋紝鍚﹀垯涓嶇粰鍊硷紝鍗抽粯璁ゃ傚畾涔塰ideClass鏉ユ帶鍒剁澶寸殑鎸囧悜锛宒own琛ㄧず褰撳墠绠浠嬩负闅愯棌锛寀p琛ㄧず鏄剧ず浜嗗叏閮锛屽逛簬鍥炬爣鏃嬭浆杩欓噷鍙闇缁欎釜鏃嬭浆灞炴у氨琛

绠澶180鏃嬭浆

濂戒簡锛屽湪璇︽儏椤典腑鑺辩殑鏃堕棿姣旇緝澶氱殑灏卞湪杩欎袱澶勪簡锛岃繕鏄閭ｅ彞鑰佽瘽锛氫笉鏄庣櫧鐨勫氬幓鏌ユ壘浜涜祫鏂欍

璇勮洪儴鍒嗗氨鏄绠鍗曠殑鍒楄〃锛岃繖閲屼笉鍐嶈︾粏璇存槑銆

涓夈佺數褰遍櫌鍒楄〃

褰遍櫌鍒楄〃

杩欓噷鍙鏄绠鍗曠殑鍒楀嚭淇℃伅灏辫屼簡锛屽湪甯冨眬涓婃病闅剧偣锛屼笉杩囦唬鐮佸彲浠ヤ紭鍖栦笅锛屼负浜嗙渷浜嬫墍浠ュ氨娌″幓鍐欎簡锛屽氨绠鍗曚负浜嗗疄鐜颁笅鏁堟灉銆

浠婂ぉ鐨勫唴瀹瑰氨鍜屽ぇ瀹朵粙缁嶅埌杩欓噷浜嗭紝鎯宠佷簡瑙ｆ洿澶氱簿褰╁唴瀹硅风户缁鍏虫敞鎴戜滑锛

⑶ 寰淇″皬绋嬪簭鎬庝箞鍒朵綔鑷宸辩殑灏忕▼搴

鍒朵綔寰淇″皬绋嬪簭闇瑕佺紪绋嬬煡璇嗗拰鎶鑳斤紝纭瀹氬姛鑳藉拰鐩鏍囧彈浼楋紝娉ㄥ唽鐧诲綍寰淇″叕浼楀钩鍙帮紝閫夋嫨灏忕▼搴忔ā鏉匡紝缂栧啓浠ｇ爜璁捐＄晫闈㈠拰鍔熻兘锛屾祴璇曡皟璇曠‘淇濇ｅ父杩愯岋紝鎻愪氦瀹℃牳绛夊緟瀹℃牳缁撴灉锛屽℃牳閫氳繃鍗冲彲鍙戝竷銆傚缓璁鍏堝︿範缂栫▼璇瑷鍜屾妧鏈锛屽啀寮鍙戝皬绋嬪簭锛屽苟浜嗚В寰淇″皬绋嬪簭鐨勫紑鍙戞枃妗ｅ拰瑙勮寖銆

⑷ 濡備綍寮鍙戜竴涓寰淇″皬绋嬪簭锛

瀵逛簬鎯宠佽笍鍏ュ井淇″皬绋嬪簭涓栫晫鐨勬湅鍙嬶紝杩欓噷鏈変唤璇﹀敖鐨勫紑鍙戞寚鍗楋紝璁╂垜浠涓璧锋帰绱㈠備綍杞绘澗鏋勫缓鑷宸辩殑灏忕▼搴忓惂锛</

棣栧厛锛屽傛灉浣犲圭紪绋嬫湁涓瀹氬熀纭锛岄夋嫨鑷宸卞姩鎵嬪紑鍙戜笉澶变负涓绉嶆寫鎴樸傚皬绋嬪簭鐨勫埗浣滃悓鏍烽渶瑕佺紪绋嬫妧鑳斤紝灏ゅ叾鏄鎺屾彙JavaScript銆丆SS銆丣SON鍜孹ML绛夋牳蹇冩妧鏈銆傝繖鏄涓鏉￠氬線缂栫▼涓栫晫鐨勫ぇ闂锛岃櫧鐒跺叆闂ㄦ椂闂村彲鑳介暱杈惧嚑涓鏈堬紝浣嗘垚灏辨劅鍜屾帶鍒跺姏灏嗕即闅忎綘鍓嶈繘锛屽彧鏄闅惧害鐩稿硅緝澶с

瀵逛簬鎶鏈闂ㄦ涜緝楂樼殑寮鍙戣咃紝澶栧寘鎴栬喘涔扮幇鎴愭簮鐮佷笉澶变负涓鏉℃嵎寰勩</浣犲彲浠ュ旀墭涓撲笟鐨勫栧寘鍏鍙稿畾鍒讹紝鎴栬呭湪甯傚満涓婂绘壘鍚堥傜殑婧愮爜绯荤粺銆備絾杩欓渶瑕佹姇鍏ュ紑鍙戣垂鐢ㄥ拰鏈嶅姟鍣ㄦ垚鏈锛屽叿澶囦竴瀹氱殑鏈嶅姟鍣ㄧ＄悊鐭ヨ瘑鑷冲叧閲嶈侊紝浠ラ槻姝㈤櫡鍏ヤ笉蹇呰佺殑楹荤儲銆

鐒惰岋紝瀵逛簬闈炴妧鏈鑳屾櫙鐨勬湅鍙嬶紝濡備粖甯傚満涓婃秾鐜颁簡浼楀氬皬绋嬪簭鍒朵綔宸ュ叿骞冲彴锛屽畠浠鎻愪緵鏃犻渶缂栫爜鐨勮В鍐虫柟妗堛傚彧闇鎸戦夋ā鏉匡紝鐐瑰嚮銆佹嫋鎷斤紝涓婁紶鍥剧墖锛屽嵆浣挎槸缂栫▼灏忕櫧涔熻兘杩呴熸惌寤鸿捣鑷宸辩殑灏忕▼搴忥紝杞绘澗瀹炵幇鏁板瓧鍖栨ⅵ鎯炽

鎯宠佷竴姝ュ埌浣嶇殑鏈嬪弸锛屼笉瑕侀敊杩囨垜浠鐨勮︾粏寮鍙戞暀绋</锛屽畠灏嗘寚瀵间綘蹇閫熶笂鎵嬶紝閫氳繃鐩磋傜殑姝ラゅ拰瀹炰緥锛岃╁皬绋嬪簭寮鍙戝彉寰楃畝鍗曟槗鎳傘傜偣鍑讳笅鏂归摼鎺ワ紝绔嬪嵆寮鍚浣犵殑灏忕▼搴忓紑鍙戣呬箣鏃咃細[灏忕▼搴忓紑鍙戞暀绋嬮摼鎺]

鎬荤殑鏉ヨ达紝寰淇″皬绋嬪簭鐨勫紑鍙戣矾寰勫氭牱锛屽叧閿鍦ㄤ簬鎵惧埌鏈閫傚悎鑷宸辩殑鏂瑰紡銆傛棤璁轰綘鏄缂栫▼杈句汉杩樻槸鏂版墜锛屾绘湁涓鏉¤矾鍙浠ュ甫棰嗕綘杩涘叆杩欎釜鍏呮弧鍙鑳芥х殑棰嗗煙銆