一 引言

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

二 假數據 效果

三 教程

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

步驟一：

自動生成項目結構

在根目錄下的app.json 中加入如下的代碼，作為程序的聲明。
注意"list"中的selectedIconPath即為底部的按鍵所對應的page，一定要一一對應好。數組中list的個數相當于底部按鍵的個數。

{
"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.小程序中有其特殊的組件，詳情查看小程序開發文檔
https://mp.weixin.qq.com/debug/wxadoc/dev/
2.在小程序中，有一個wx:for的方法，可以讓頁面循環輸出，不要做無用功，任何可以循環的地方都要把握好。循環詳情：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html
3.用三元選擇符制作tab切換
在首頁的頂部有一個熱映和待映，作為tab切換的兩個選項改變下邊的部分的代碼。在js中的data里邊設置一個布爾值，在xml中使用hidden{{x}}，達到切換的效果
4.weui框架可大幅度加快開發
5.加上貓眼電影的api http://www.jianshu.com/p/9855610eb1d4

四 完成效果

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