无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

我們創(chuàng)建起了小程序項目，并粗淺的了解了小程序的外部項目結(jié)構(gòu)，了解了 js，wxml，wxss都最基本運用，現(xiàn)在我們在進行循序漸進的深入探究，如何制作真實項目。

先看效果圖：

分析步驟：

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

2、講底部的導(dǎo)航欄，簡單

3、講中間的內(nèi)容顯示，中等

4、講JS邏輯實現(xiàn)。復(fù)雜

難度等級的劃分只局限于本文，不聯(lián)系實際開發(fā)。

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

準(zhǔn)備工作先做好，創(chuàng)建一個項目，把系統(tǒng)自帶的都刪了 只留外層目錄，內(nèi)層文件都刪了。

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

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

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

然后復(fù)制這段代碼到 js 文件去 

好了我們可以去調(diào)試頁面看看變化，用鼠標(biāo)可以滑動，但它的顯示有瑕疵有留白，我們?nèi)?strong>wxml中做一點改動。

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

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

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

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

2、底部導(dǎo)航欄：

打開官方開發(fā)文檔文檔配置篇

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

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

完成后的效果：

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

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

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

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

MD美死了！??！

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

/** 占滿全屏**/

.content{

height: 100%;

}

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

.movie{

display: flex;

flex-direction: row;

}

/** 設(shè)置圖片大小 **/

.pic image{

width: 100px;

height: 150px;

}

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

.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中的布局，就讓您自己去打吧，不然學(xué)習(xí)就失去效果了，要注意的是我的<view> 是上下呼應(yīng)的為了能讓你看清楚，它的結(jié)束語句在哪里，占滿全屏的view它的結(jié)束語句必須包裹所有內(nèi)容。

我把要講的內(nèi)容放在注解里了，寫完保存直接去調(diào)試頁面看效果。

粗略的布局總算是搭建好了，后面就是聯(lián)系A(chǔ)PI獲取數(shù)據(jù)，在js中做一些邏輯操作了。

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

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