欧美综合影院在线影院,国产精品女人久久久久久,日韩精品无码去免费专区,樱花草在线社区WWW日本影院

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

先看效果圖：

分析步驟：

1、講頭部的視圖滑動(dòng)，簡(jiǎn)單

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

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

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

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

1、頭部視圖滑動(dòng)，實(shí)例圖：

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

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

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

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

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

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

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

現(xiàn)在我們?cè)谌?strong>js中，把視圖改為自動(dòng)跳轉(zhuǎn)的。 仔細(xì)看注釋！ 豁然開(kāi)朗了吧，文檔也理解了吧!

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

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

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

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

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

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

完成后的效果：

現(xiàn)在開(kāi)始進(jìn)入下一個(gè)階段，先看效果圖

簡(jiǎn)單的分析下，一個(gè)圖片控件image，在加一個(gè)文字控件text，接下來(lái)的排版就需要交給wxss和<view>進(jìn)行配合搭建，

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

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

MD美死了?。。?/font>

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

/** 占滿全屏**/

.content{

height: 100%;

}

/** 將圖片與文字左右分開(kāi) **/

.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é)束語(yǔ)句在哪里，占滿全屏的view它的結(jié)束語(yǔ)句必須包裹所有內(nèi)容。

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

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

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

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