一 引言

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

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

三 教程

各位看官先不要吐槽這神一般的電影（室友），為了將頁(yè)面的效果率先完成，筆者先用了假數(shù)據(jù)將頁(yè)面的效果達(dá)到，因?yàn)樨堁垭娪皳碛虚_(kāi)源的API，在頁(yè)面效果達(dá)到之后我們將從api中獲取數(shù)據(jù)，并將其渲染到界面上。

步驟一：

自動(dòng)生成項(xiàng)目結(jié)構(gòu)

在根目錄下的app.json 中加入如下的代碼，作為程序的聲明。
注意"list"中的selectedIconPath即為底部的按鍵所對(duì)應(yīng)的page，一定要一一對(duì)應(yīng)好。數(shù)組中l(wèi)ist的個(gè)數(shù)相當(dāng)于底部按鍵的個(gè)數(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": "我的"
    }]
}
}

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

四 完成效果

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