大家好型奥，決定在這里碼碼字琐旁，寫寫文章啦误窖，希望和大家一起交流分享~
最近在學(xué)習(xí)微信小程序叮盘，在這里記錄下學(xué)習(xí)到的知識點，歡迎大家指正~
一霹俺、項目最終效果展示
github地址：https://github.com/haogjin/Douban-Movie/tree/master
注：
- 這里主要展示"熱映"界面效果柔吼，其中"找片"和"我的"界面效果沒有展示，"找片"的效果與"熱映"基本技術(shù)操作是一樣的丙唧。
- 主要知識點：flex布局愈魏、可滾動視圖組件scroll-view、自定義組件（調(diào)用及傳值）想际。
二培漏、開始開發(fā)項目
環(huán)境搭建
創(chuàng)建自己的第一個小程序只需要2步即可：1.申請賬號，2.安裝開發(fā)者工具胡本。
這里就不多說啦牌柄，傳送門：https://mp.weixin.qq.com/debug/wxadoc/dev/
項目結(jié)構(gòu)說明
整體項目結(jié)構(gòu)：
說明（這里只做簡要說明，具體在后面講解）：
- conponents--自定義組件文件夾
- images--圖片文件夾
- pages--頁面文件夾 所有的頁面都放在pages文件夾下打瘪，每個頁面包括 .js（js文件）友鼻、 .wxml（頁面模板文件，相當(dāng)于h5的html文件） 闺骚、 .wxss（頁面樣式文件彩扔，相當(dāng)于h5的css文件）、 .json文件（頁面配置文件）僻爽；pages文件夾下的index（首頁）和logs（日志）文件夾是搭建環(huán)境時自動生成的虫碉，但本項目沒使用到這個頁面，請知悉胸梆。
- styles--公共樣式文件夾
- utils--公共js文件
- app.js--項目入口文件
- app.json--小程序全局配置文件
- app.wxss--全局樣式文件 如果有共同使用的樣式文件可以寫在這個文件里敦捧，當(dāng)然也可以自己創(chuàng)建樣式文件進(jìn)行引用。
- project.config.json--工具配置 每個項目的根目錄都會生成一個 project.config.json碰镜，用于保存當(dāng)前項目的所有配置兢卵，保證載入項目的時候同步開發(fā)項目時的個性化配置。
開始開發(fā)
一绪颖、實現(xiàn)底部tab頁
一共包含3個tab頁：熱映秽荤、找片、我的。
1.在pages文件夾下建立home窃款、finding课兄、user文件夾，并分別創(chuàng)建相應(yīng)文件晨继。
2.在app.json文件中配置新建的三個文件的路徑烟阐。
說明：
1)所有新增的頁面都必須在pages里面注冊，否則無法顯示紊扬，建議新建一個頁面立即在pages里面注冊蜒茄，以免忘記。這里pages是一個數(shù)組珠月，第一個元素即為當(dāng)前顯示的頁面扩淀。
2)在app.json文件的pages中注冊后的相應(yīng).js文件需要定義相應(yīng)的Page:
Page({
data: {
},
onLoad: function (options) {
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
},
onUnload: function () {
}
//.....
})
可以參照環(huán)境搭建好之后生成的index.js代碼，在其中可以定義屬性和事件啤挎，具體后續(xù)會講解驻谆。
3)window字段說明：用于配置小程序所有頁面的頂部背景顏色，文字顏色等庆聘，這里用到的屬性說明：
backgroundTextStyle ： 下拉背景字體胜臊、loading 圖的樣式，僅支持 dark/light
navigationBarBackgroundColor ：導(dǎo)航欄背景色
navigationBarTitleText：導(dǎo)航欄標(biāo)題
navigationBarTextStyle：導(dǎo)航欄標(biāo)題顏色伙判，僅支持 black/white
注：注冊保存后相應(yīng)文件夾就會自動生成對應(yīng)頁面的.json文件象对，可以對當(dāng)前頁面進(jìn)行局部配置，當(dāng)然也可以手動新建宴抚。
- 在app.json中配置tab
"tabBar": {
"backgroundColor": "#dfdfdf",
"color": "#8a8a8a",
"selectedColor": "#000000",
"list": [
{
"text": "熱映",
"iconPath": "images/ing.png",
"selectedIconPath": "images/ing-active.png",
"pagePath": "pages/home/home"
},
{
"text": "找片",
"iconPath": "images/find.png",
"selectedIconPath": "images/find-active.png",
"pagePath": "pages/finding/finding"
},
{
"text": "我的",
"iconPath": "images/user.png",
"selectedIconPath": "images/user-active.png",
"pagePath": "pages/user/user"
}
]
}
說明：
- 三個tab項需要放置于list數(shù)組中勒魔。
- color表示文本顏色，selectedColor表示選中文本的顏色菇曲。
- iconPath表示位于text上方的圖標(biāo)路徑冠绢，selectedIconPath表示選中tab的圖標(biāo)路徑。
- 圖標(biāo)庫推薦： Iconfont-阿里巴巴矢量圖標(biāo)庫
完整的app.json文件：（"debug":true表示開啟調(diào)試模式）
{
"pages":[
"pages/home/home",
"pages/finding/finding",
"pages/user/user",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#dfdfdf",
"navigationBarTitleText": "豆瓣電影",
"navigationBarTextStyle":"black"
},
"tabBar": {
"backgroundColor": "#dfdfdf",
"color": "#8a8a8a",
"selectedColor": "#000000",
"list": [
{
"text": "熱映",
"iconPath": "images/ing.png",
"selectedIconPath": "images/ing-active.png",
"pagePath": "pages/home/home"
},
{
"text": "找片",
"iconPath": "images/find.png",
"selectedIconPath": "images/find-active.png",
"pagePath": "pages/finding/finding"
},
{
"text": "我的",
"iconPath": "images/user.png",
"selectedIconPath": "images/user-active.png",
"pagePath": "pages/user/user"
}
]
},
"debug":true
}
到這里tab頁面切換就完成啦常潮，是不是很簡單~~~
為了驗證正確性弟胀，分別編輯home.wxml、finding.wxml喊式、user.wxml文件：
/* <view>標(biāo)簽表示視圖容器孵户，相當(dāng)于<div>標(biāo)簽 */
/* home.wxml */
<view class="fa fa-book">熱映界面</view>
/* finding.wxml */
<view class="fa fa-eye">找片界面</view>
/* user.wxml */
<view class="fa fa-user">用戶界面</view>
其中 class="fa fa-user" 表示引入font Awesome圖標(biāo)，引入方法：http://www.reibang.com/p/936e3f09e217岔留。
當(dāng)然也是可以引用iconfont字體的夏哭，看個人選擇~
對應(yīng)的界面：
當(dāng)然也可以加入各種樣式，方式與h5基本沒區(qū)別献联。
今天就先到這里啦~
接著會抓取豆瓣電影數(shù)據(jù)展示電影正在熱映和即將上映列表及詳情方庭，如果文中有什么不對的或者需要注意的地方歡迎大家指正厕吉，一起分享交流~
接下文 微信小程序仿豆瓣電影頁面demo（2）--實現(xiàn)"正在熱映"與"即將上映"切換：
http://www.reibang.com/p/0eff6f592d53
版權(quán)聲明：本文為作者原創(chuàng)文章，未經(jīng)允許不得轉(zhuǎn)載械念。如需轉(zhuǎn)載，請聯(lián)系作者并標(biāo)明出處及原鏈接运悲！
