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

---

先看效果圖：

分析步驟：

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

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

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

4、講JS邏輯實現。復雜

難度等級的劃分只局限于本文，不聯系實際開發。

 

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

 

準備工作先做好，創建一個項目，把系統自帶的都刪了 只留外層目錄，內層文件都刪了。

 

然后在pages中添加一個movie目錄作為首頁，分別在創建，js  \  wxml  \  wxss. ,并在app.json中注冊

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

就用它了 在文檔中找到這段并代碼復制到 wxml中去 （復制后別忘了 Ctrl+s 保存）

然后復制這段代碼到 js 文件去 

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

在wxml中把width和height 兩個屬性去掉 ，改為： style = "width:100%"  。  {{}}中的內容是什么，看后面注解。

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

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

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

 

2、底部導航欄：

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

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

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

完成后的效果：

 

---

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

 

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

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

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

MD美死了?。?！

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

/** 占滿全屏**/

 

.content{

 

height: 100%;

 

}

 

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

 

.movie{

 

display: flex;

 

flex-direction: row;

 

}

 

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

 

.pic image{

 

width: 100px;

 

height: 150px;

 

}

 

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

 

.movie-info{

 

padding-left: 20px ;

 

}

 

/** 文字大小與行高 **/

 

.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它的結束語句必須包裹所有內容。

我把要講的內容放在注解里了，寫完保存直接去調試頁面看效果。

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

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

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