我們(men) 創建起了小程序項目，並粗淺的了解了小程序的外部項目結構，了解了 js，wxml，wxss都最基本運用，現在我們(men) 在進行循序漸進的深入探究，如何製作真實項目。

先看效果圖：

分析步驟：

1、講頭部的視圖滑動，簡單

2、講底部的導航欄，簡單

3、講中間的內(nei) 容顯示，中等

4、講JS邏輯實現。複雜

難度等級的劃分隻局限於(yu) 本文，不聯係實際開發。

1、頭部視圖滑動，實例圖：

準備工作先做好，創建一個(ge) 項目，把係統自帶的都刪了 隻留外層目錄，內(nei) 層文件都刪了。

然後在pages中添加一個(ge) movie目錄作為(wei) 首頁，分別在創建，js  \  wxml  \  wxss. ,並在app.json中注冊(ce)

好了，現在我們(men) 開始編寫(xie) wxml與(yu) js文件，首先我們(men) 確定頭部顯示要用什麽(me) 組件，先看官方文檔中的swiper-view控件（滑塊視圖組件）

就用它了 在文檔中找到這段並代碼複製到 wxml中去 （複製後別忘了 Ctrl+s 保存）

然後複製這段代碼到 js 文件去 

好了我們(men) 可以去調試頁麵看看變化，用鼠標可以滑動，但它的顯示有瑕疵有留白，我們(men) 去wxml中做一點改動。

在wxml中把width和height 兩(liang) 個(ge) 屬性去掉 ，改為(wei) ： style = "width:100%"  。  {{}}中的內(nei) 容是什麽(me) ，看後麵注解。

現在我們(men) 在去js中，把視圖改為(wei) 自動跳轉的。 仔細看注釋！ 豁然開朗了吧，文檔也理解了吧!

完成以上步驟後，一個(ge) 滑動視圖算是初步的做好了，以後要做深入也隻是把視圖改為(wei) 動態獲取圖片，而不是像現在這樣指定了靜態的鏈接，是不正確的， 當然你也可以做一些稀奇古怪的滑動視圖沒人攔你。

從(cong) 這裏我們(men) 可以發現微信小程序開發，給我們(men) 帶來的方便與(yu) 高效，隻要摸清楚文檔，一個(ge) 程序還是挺容易搭建的。 

2、底部導航欄：

打開官方開發文檔文檔配置篇

把這段複雜過來，要注意我們(men) 要把路徑改為(wei) 剛剛創建的movie文件目錄，然後去網上找一下log資源放到image文件中去.

在文檔配置篇中找一下iconPath和selectedIconPath看看他們(men) 是幹嘛的！底部導航欄就完成了，看下麵的代碼也能不難。

完成後的效果：

現在開始進入下一個(ge) 階段，先看效果圖

簡單的分析下，一個(ge) 圖片控件image，在加一個(ge) 文字控件text，接下來的排版就需要交給wxss和<view>進行配合搭建，

而不是單純的隻使用image和text，使用<view包裹，在利用wxss進行編排

在剛剛的，image目錄中，放一張圖片進去先，我放了 “我老婆的照片”

MD美死了！！！

然後在wxss中做一些準備 ，其實這步驟是不對的，但如果聯係wxml邊寫(xie) 邊做wxss的樣式，要截的圖就多的離譜了，所以我想，直接給wxml和wxss寫(xie) 好的布局，讓你自己去琢磨分析也有相同的效果，畢竟我已經給出很詳細的注解了，不至於(yu) 看暈。

/** 占滿全屏**/

.content{

height: 100%;

}

/** 將圖片與(yu) 文字左右分開 **/

.movie{

display: flex;

flex-direction: row;

}

/** 設置圖片大小 **/

.pic image{

width: 100px;

height: 150px;

}

/** 設置與(yu) 左邊圖片的間距**/

.movie-info{

padding-left: 20px ;

}

/** 文字大小與(yu) 行高 **/

.base-info{

font-size: 12px;

padding-top: 20px;

line-height: 20px;

}

/** 分割線 **/

.hr{

height: 2px;

width: 100%;

border-top: wheat solid 1px;

border-bottom: wheat solid 1px;

opacity: 0.2;

}

wxml中的布局，就讓您自己去打吧，不然學習就失去效果了，要注意的是我的<view> 是上下呼應的為了能讓你看清楚，它的結束語句在哪裏，占滿全屏的view它的結束語句必須包裹所有內容。

我把要講的內(nei) 容放在注解裏了，寫(xie) 完保存直接去調試頁麵看效果。

粗略的布局總算是搭建好了，後麵就是聯係API獲取數據，在js中做一些邏輯操作了。

以上歸納概述：<view> 用來做排版， 組件負責接收數據並顯示。

現在要開始編寫(xie) JS文件了，這裏就有點麻煩，畢竟代碼量還挺多的，你可以先休息一會(hui) 兒(er) ，把wxml和wxss先消化一下