一 引言
作為一只程序猿，面對微信小程序的出現(xiàn)，筆者已經按捺不住咔哧咔哧的柴刀。作為一只想要好好學習的程序猿，相中了貓眼電影這個demo。筆者也是開始擼到一半才知道，這個demo在網上的仿制不是一般的多。但是大多數(shù)都不夠精細（有一個是花錢的就沒看過）。這次筆者想分幾個部分，將整個貓眼電影小程序仿制下來，做成一個完整的demo教程。
二 假數(shù)據 效果
三 教程
各位看官先不要吐槽這神一般的電影（室友），為了將頁面的效果率先完成，筆者先用了假數(shù)據將頁面的效果達到，因為貓眼電影擁有開源的API，在頁面效果達到之后我們將從api中獲取數(shù)據，并將其渲染到界面上。
步驟一：
自動生成項目結構
在根目錄下的app.json 中加入如下的代碼，作為程序的聲明。
注意"list"中的selectedIconPath即為底部的按鍵所對應的page，一定要一一對應好。數(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里邊設置一個布爾值，在xml中使用hidden{{x}}，達到切換的效果
4.weui框架可大幅度加快開發(fā)
5.加上貓眼電影的api http://m.itdecent.cn/p/9855610eb1d4
四 完成效果
初步的完成了模仿與制作。(初步完成了偷懶的目的)
五、后記
1.貓眼電影的api 是從簡書上某位大佬提供的，但是，這份api所提供的數(shù)據不夠全面，導致有許多地方是沒法下手的，因為使用了api后，本身很難再自己添加數(shù)據，所以有一些功能是沒法實現(xiàn)的。（或許是因為作者的功力不夠呀~）
2.筆者為學生狗一枚~大多數(shù)時間在上課學習，本作品系作者熬夜抽時間肝出來的，踩了很多坑，走了很多的彎路。本身作品還存在很多的bug，筆者會慢慢修復。（給我一個她好我也好的機會）
3.如果有什么問題歡迎提出。
4.源碼地址 https://github.com/yanlvji54/CatEye
