如何搭建一個電影微信小程序

⑴ 濡備綍鍒涘緩鑷宸辯殑寰淇″皬紼嬪簭錛

鍒涘緩鑷宸辯殑寰淇″皬紼嬪簭闇瑕侀伒寰浠ヤ笅姝ラわ細
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絳夋牳蹇冩妧鏈銆傝繖鏄涓鏉￠氬線緙栫▼涓栫晫鐨勫ぇ闂錛岃櫧鐒跺叆闂ㄦ椂闂村彲鑳介暱杈懼嚑涓鏈堬紝浣嗘垚灝辨劅鍜屾帶鍒跺姏灝嗕即闅忎綘鍓嶈繘錛屽彧鏄闅懼害鐩稿硅緝澶с

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

鐒惰岋紝瀵逛簬闈炴妧鏈鑳屾櫙鐨勬湅鍙嬶紝濡備粖甯傚満涓婃穠鐜頒簡浼楀氬皬紼嬪簭鍒朵綔宸ュ叿騫沖彴錛屽畠浠鎻愪緵鏃犻渶緙栫爜鐨勮В鍐蟲柟妗堛傚彧闇鎸戦夋ā鏉匡紝鐐瑰嚮銆佹嫋鎷斤紝涓婁紶鍥劇墖錛屽嵆浣挎槸緙栫▼灝忕櫧涔熻兘榪呴熸惌寤鴻搗鑷宸辯殑灝忕▼搴忥紝杞繪澗瀹炵幇鏁板瓧鍖栨ⅵ鎯熾

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

鎬葷殑鏉ヨ達紝寰淇″皬紼嬪簭鐨勫紑鍙戣礬寰勫氭牱錛屽叧閿鍦ㄤ簬鎵懼埌鏈閫傚悎鑷宸辯殑鏂瑰紡銆傛棤璁轟綘鏄緙栫▼杈句漢榪樻槸鏂版墜錛屾繪湁涓鏉¤礬鍙浠ュ甫棰嗕綘榪涘叆榪欎釜鍏呮弧鍙鑳芥х殑棰嗗煙銆