-（Ctrl+s）保存編輯的內容，不然調試不會出效果?。?！
前篇概述：
有了前面三篇的鋪墊，我們創建起了小程序項目，并粗淺的了解了小程序的外部項目結構，了解了 js，wxml，wxss都最基本運用，現在我們在進行循序漸進的深入探究，如何制作真實項目。
先看效果圖：
分析步驟：
1、講頭部的視圖滑動，簡單
2、講底部的導航欄，簡單
3、講中間的內容顯示，中等
4、講JS邏輯實現。復雜
難度等級的劃分只局限于本文與后續文章的發展，不聯系其他的實際應用開發。
1、頭部視圖滑動，實例圖：
準備工作先做好，創建一個項目， 只留外層目錄，內層文件都刪了。
然后在pages中添加一個movie目錄作為首頁，分別在創建，js ?\ ?wxml ?\ ?wxss. ,并在app.json中注冊
好了，現在我們開始編寫wxml與js文件，首先我們確定頭部顯示要用什么組件，先看官方文檔中的swiper-view控件（滑塊視圖組件）
就用它了 在文檔中找到這段并代碼復制到?wxml中去 （復制后別忘了 Ctrl+s 保存）
然后復制這段代碼到?js 文件去 （先把page方法寫出來）
好了我們可以去調試頁面看看變化，用鼠標可以滑動，但它的顯示有瑕疵有留白，我們去wxml中做一點改動。
在wxml中把width和height 兩個屬性去掉 ，改為： style = "width:100%" ?。 ?如果不清楚{{}}中的內容是什么，看后面注解或聯系js中的內容作對比。
現在我們在去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%;
background-color: darkslateblue;
border-top: wheat solid 1px;
border-bottom: wheat solid 1px;
opacity: 0.2;
}
wxml中的布局，就讓您自己去打吧，不然學習就失去效果了，要注意的是我的<view> 是上下呼應的為了能讓你看清楚，它的結束語句在哪里，占滿全屏的view它的結束語句必須包裹所有內容。
我把要講的內容放在注解里了，寫完保存直接去調試頁面看效果。
粗略的布局總算是搭建好了，后面就是聯系API獲取數據，在js中做一些邏輯操作了。
以上歸納概述：<view> 用來做排版， 組件負責接收數據并顯示。
現在要開始編寫JS文件了，這里就有點麻煩，畢竟代碼量還挺多的，你可以先休息一會兒，把wxml和wxss先消化一下
我呢！在寫一篇來重點拆析js中的代碼，這篇篇幅已經挺長的了。
