小程序模板網(wǎng)

微信小程序--貓眼電影高仿制造

發(fā)布時間:2017-12-12 17:33 所屬欄目:小程序開發(fā)教程

貓眼電影小程序仿制完整的demo教程。

 
 
 

一 引言

作為一只程序猿,面對微信小程序的出現(xiàn),筆者已經(jīng)按捺不住咔哧咔哧的柴刀。作為一只想要好好學(xué)習的程序猿,相中了貓眼電影這個demo。筆者也是開始擼到一半才知道,這個demo在網(wǎng)上的仿制不是一般的多。但是大多數(shù)都不夠精細(有一個是花錢的就沒看過)。這次筆者想分幾個部分,將整個貓眼電影小程序仿制下來,做成一個完整的demo教程。

二 假數(shù)據(jù) 效果

099980A10028DD90511D78C29F6B2508.png


01.png

 

三 教程

各位看官先不要吐槽這神一般的電影(室友),為了將頁面的效果率先完成,筆者先用了假數(shù)據(jù)將頁面的效果達到,因為貓眼電影擁有開源的API,在頁面效果達到之后我們將從api中獲取數(shù)據(jù),并將其渲染到界面上。

步驟一:

自動生成項目結(jié)構(gòu)

Paste_Image.png

02.png

在根目錄下的app.json 中加入如下的代碼,作為程序的聲明。
注意"list"中的selectedIconPath即為底部的按鍵所對應(yīng)的page,一定要一一對應(yīng)好。數(shù)組中l(wèi)ist的個數(shù)相當于底部按鍵的個數(shù)。

{
"pages": [
    "pages/home/index",
    "pages/my/index",
    "pages/cinema/index",
    "pages/index/index",
    "pages/logs/logs",
    "pages/switchcity/switchcity"
],
"window": {
    "backgroundTextStyle": "white",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "貓眼電影",
    "navigationBarBackgroundColor": "#ea4238",
    "backgroundColor": "#F2F2F2",
    "enablePullDownRefresh": true
},
"tabBar": {
    "color": "#8b8b8b",
    "selectedColor": "#ef2438",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/home/index",
        "iconPath": "image/icon-film.png",
        "selectedIconPath": "image/icon-film_selected.png",
        "text": "電影"
    }, {
        "pagePath": "pages/cinema/index",
        "iconPath": "image/icon-cinema_normal.png",
        "selectedIconPath": "image/icon-cinema_selected.png",
        "text": "影院"
    }, {
        "pagePath": "pages/my/index",
        "iconPath": "image/icon-me_normal.png",
        "selectedIconPath": "image/icon-me_selcted.png",
        "text": "我的"
    }]
}
}

步驟三:漫無界限的切圖生活...(這就不放代碼了)
注意事項:
1.小程序中有其特殊的組件,詳情查看小程序開發(fā)文檔
https://mp.weixin.qq.com/debug/wxadoc/dev/
2.在小程序中,有一個wx:for的方法,可以讓頁面循環(huán)輸出,不要做無用功,任何可以循環(huán)的地方都要把握好。循環(huán)詳情:
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html
3.用三元選擇符制作tab切換
在首頁的頂部有一個熱映和待映,作為tab切換的兩個選項改變下邊的部分的代碼。在js中的data里邊設(shè)置一個布爾值,在xml中使用hidden{{x}},達到切換的效果
4.weui框架可大幅度加快開發(fā)
5.加上貓眼電影的api http://www.jianshu.com/p/9855610eb1d4

四 完成效果

51D87EDA9C8CBD2FD31755E4E27EAE8C.png

86BC52CAAB48E511FA27D0DE5BB86DD6.png

7348C54E31718C4FA8348E30D343ED24.png

C4C01BEBF103800A9D67F3D87322AAAB.png

初步的完成了模仿與制作。(初步完成了偷懶的目的)



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/18141.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢