前幾節(jié)的內(nèi)容讓我們的小程序有了文字，但小程序的內(nèi)容形式還不夠豐富，比如沒(méi)有鏈接，沒(méi)有圖片等元素，而這些元素在小程序里也都是通過(guò)組件來(lái)實(shí)現(xiàn)的。

navigator組件

在小程序里，我們是通過(guò)navigator組件來(lái)給頁(yè)面添加鏈接的。有些頁(yè)面在我們打開(kāi)小程序的時(shí)候就可以看得到，還有些則需要我們通過(guò)點(diǎn)擊鏈接進(jìn)行頁(yè)面切換才可以看得到，這些我們可以稱(chēng)之為二級(jí)頁(yè)面。

技術(shù)文檔：[navigator組件技術(shù)文檔]( http://www.yjpub.cn/weixinapp/weixinapp-navigator.html )

二級(jí)頁(yè)面

為了讓二級(jí)頁(yè)面與tabBar的頁(yè)面有更加清晰的結(jié)構(gòu)關(guān)系，我們可以在tabBar對(duì)應(yīng)的頁(yè)面文件夾下面新建要跳轉(zhuǎn)的頁(yè)面。比如我們的第一個(gè)tabBar是home，凡是home會(huì)跳轉(zhuǎn)的二級(jí)頁(yè)面，我們都建在home文件夾里。

我們同樣在pages配置項(xiàng)里新建一個(gè)頁(yè)面imgshow，名稱(chēng)大家可以自定義~這樣pages配置項(xiàng)的內(nèi)容如下：

"pages/home/home",


    "pages/home/imgshow/imgshow",


    "pages/list/list",


    "pages/partner/partner",


    "pages/more/more"

然后我們?cè)賮?lái)在home頁(yè)面的home.wxml加入以下代碼

<view class="index-link">


  <navigator url="./../home/imgshow/imgshow" class="item-link">讓小程序顯示圖片</navigator>


</view>

在上面的代碼中，我們把navigator組件嵌套在view組件里，當(dāng)然不嵌套也是可以的。要寫(xiě)一個(gè)非常復(fù)雜的頁(yè)面，就會(huì)經(jīng)常用到這種嵌套。

由于navigator組件沒(méi)有添加樣式，所以在視覺(jué)上看不出它是一個(gè)可以點(diǎn)擊的鏈接，我們?cè)趆ome.wxss里給它添加一個(gè)樣式：

.item-link{


  margin: 20px;


  padding:10px 15px;


  background-color: #4ea6ec;


  color: #fff;


  border-radius: 4px;


}

url是頁(yè)面跳轉(zhuǎn)鏈接，大家注意這個(gè)路徑的寫(xiě)法，我們也可以把上面的鏈接形式寫(xiě)成以下代碼：

/pages/home/imgshow/imgshow

這兩個(gè)路徑都是指向imgshow頁(yè)面。

小任務(wù)：為什么頁(yè)面的路徑有兩個(gè)imgshow？比如把路徑寫(xiě)成 /pages/home/imglist 對(duì)應(yīng)的是什么頁(yè)面？在pages配置項(xiàng)添加一下看看效果。

相對(duì)路徑與絕對(duì)路徑

相對(duì)路徑

大家注意我們之前使用的路徑基本都是相對(duì)路徑，相對(duì)路徑使用“/”字符作為目錄的分隔字符，

• "./" 代表當(dāng)前目錄 <img src="./img/icon.jpg" />等同于<img src="img/icon.jpg" />
• “../” 代表上一級(jí)目錄
• "/" 當(dāng)前根目錄，是相對(duì)目錄；<img src="/img/icon.jpg" />

小任務(wù)：你知道當(dāng)前根目錄是什么嗎？/pages/home/imgshow/imgshow和./../home/imgshow/imgshow這兩個(gè)的寫(xiě)法你明白它們?yōu)樯吨赶虻氖峭粋€(gè)路徑了嗎？

要管理好圖片資源、鏈接（頁(yè)面）資源、音頻資源、視頻資源、wxss樣式資源等等內(nèi)部與外部資源，就一定要掌握路徑方面的知識(shí)。我們之后也會(huì)經(jīng)常運(yùn)用這個(gè)知識(shí)。

絕對(duì)路徑

那什么是絕對(duì)路徑呢？網(wǎng)絡(luò)鏈接比如 ：

7n.w3cschool.cn/attachments/knowledge/202006/77455.png

這個(gè)就是絕對(duì)路徑，還有C:*Windows*\System32，這種從盤(pán)符開(kāi)始的路徑也是絕對(duì)路徑。通常相對(duì)路徑用的會(huì)比較多一些。

image組件

一個(gè)好看的網(wǎng)頁(yè)怎么可能少得了圖片呢？小程序添加圖片是通過(guò)image組件的方式。

技術(shù)文檔：image組件技術(shù)文檔

我們首先把要顯示的圖片放到小程序的image文件夾里，然后再在imgshow頁(yè)面下的imgshow.wxml添加以下代碼：

<view id="imgsection">


  <view class="title">小程序顯示圖片</view>


  <view class="imglist">


    <image class="imgicon" src="/image/icon-tab1.png"></image>


  </view>


</view>

注意圖片的鏈接是我們之前的tab圖標(biāo)鏈接，也就是這個(gè)鏈接來(lái)源于小程序的本地文件夾?？赡苣愕膱D片命名會(huì)有所不同，主要根據(jù)情況修改。

這樣我們的圖片就在小程序里顯示出來(lái)啦~~

如果我們不對(duì)圖片的樣式比如高度和寬度進(jìn)行處理，圖片顯示就會(huì)變形。這是因?yàn)樾〕绦驎?huì)給圖片增加一個(gè)默認(rèn)的寬度和高度，寬度為300px，高度為225px。

圖片光顯示出來(lái)還是不夠的，很多時(shí)候我們會(huì)對(duì)圖片顯示出來(lái)的大小有要求，或者對(duì)它的外邊距有要求；利用之前學(xué)到的知識(shí)，我們也可以給image組件加一些 css樣式。比如我們?cè)趇mgshow.wxss里面添加

.imglist{


  text-align: center;


}


.imglist .imgicon{


  width: 200px;


  height: 200px;


  margin: 20px;


}

云存儲(chǔ)

我們可以把圖片放在小程序的本地文件夾里，也可以把圖片放在網(wǎng)上。那如何把一張圖片以鏈接的方式讓其他人看到呢？這個(gè)時(shí)候就需要一個(gè)專(zhuān)門(mén)的存儲(chǔ)圖片的服務(wù)器（圖床）了。

免費(fèi)的圖床：騰訊云對(duì)象存儲(chǔ)COS

由于我們之前注冊(cè)過(guò)小程序，可以選擇其他登錄方式里的微信公眾號(hào)登錄，登錄后點(diǎn)擊右上角控制臺(tái)，即可進(jìn)入后臺(tái)，在工具欄里下拉云產(chǎn)品，找到存儲(chǔ)下面的對(duì)象存儲(chǔ)，在左側(cè)菜單存儲(chǔ)桶列表創(chuàng)建存儲(chǔ)桶，只需注意將訪(fǎng)問(wèn)權(quán)限改為公有讀私有寫(xiě)，其他按說(shuō)明自行操作。

創(chuàng)建好存儲(chǔ)桶bucket，然后大家可以把圖片上傳到對(duì)象存儲(chǔ)服務(wù)器里面，并分享鏈接并在imgshow.wmxl測(cè)試一下：

<view class="imglist">


    <image class="imgitem" src="7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>


</view>

尺寸單位rpx

上面的網(wǎng)絡(luò)圖片是變形的，為了讓圖片不變形，那我們需要給圖片添加一個(gè)wxss樣式，這里就有一個(gè)問(wèn)題，這張圖片的寬度為1684px，高度為998px，而手機(jī)的寬度卻沒(méi)有這么高的像素。我們想讓圖片在手機(jī)里完整顯示而不變形該怎么處理呢？方法之一是我們可以使用尺寸單位rpx。

技術(shù)文檔：尺寸單位rpx

在小程序里，所有的手機(jī)屏幕的寬度都為750rpx，我們可以把圖片等比縮小。比如給圖片添加樣式:

 .imglist .imgitem{


  width: 700rpx;


  height: 415rpx;


  margin: 20rpx;


}

有了rpx這個(gè)尺寸單位，我們可以確定一個(gè)元素在小程序里的精準(zhǔn)位置和精準(zhǔn)大小，不過(guò)這個(gè)尺寸單位處理圖片起來(lái)經(jīng)常需要換算挺麻煩的，我們來(lái)看下面的處理方法。

圖片的裁剪

由于我們的圖片可能尺寸大小不一，或者由于iPhone、安卓手機(jī)的尺寸大小不一以及我們對(duì)圖片顯示的要求不一，為了讓我們的圖片顯示正常，小程序需要對(duì)圖片進(jìn)行一些裁剪。

小程序是通過(guò)mode的方式來(lái)對(duì)圖片進(jìn)行裁剪的，大家可以去閱讀一下image組件關(guān)于13種mode模式的說(shuō)明。

技術(shù)文檔：image組件技術(shù)文檔

如果我們想處理好上面的圖片，我們?cè)撛趺刺幚砟兀堪凑占夹g(shù)文檔，我們可以給image組件添加一個(gè)widthFix模式：寬度不變，高度自動(dòng)變化，保持原圖寬高比不變。

<view class="imglist">


    <image class="imgitem" mode="widthFix" src="7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>


</view>

然后給圖片添加wxss樣式：

.imglist .imgitem{


  width: 100%;


}

也就是說(shuō)設(shè)置圖片的寬度為百分比樣式，而高度則自動(dòng)變化，保持原圖寬高比不變。

百分比是網(wǎng)頁(yè)、移動(dòng)端等用來(lái)布局以及定義大小的一個(gè)非常重要的單位，大家要多學(xué)多練多分析哦~

當(dāng)然還會(huì)有這樣的一個(gè)要求，我們希望圖片全屏顯示，但是設(shè)計(jì)師卻只給圖片預(yù)留了一個(gè)很小的高度，這樣我們就必須對(duì)圖片進(jìn)行一定的裁剪了，我們可以在imgshow.wxml這樣寫(xiě)。

<view class="imglist">


     <image class="imgfull" mode="center" src="7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>


  </view>

而在imgshow.wxss里面添加一些樣式

.imglist .imgfull{


  width: 100%;


  height: 100px;


}

大家可以在開(kāi)發(fā)者工具以及通過(guò)掃描開(kāi)發(fā)者工具預(yù)覽生成的二維碼在手機(jī)上體驗(yàn)一下，并把這里的mode=”center”，換成其他12個(gè)模式來(lái)了解一下，不同的模式對(duì)圖片裁剪的影響。

圖片的處理是一個(gè)非常重要的知識(shí)點(diǎn)，需要大家多多實(shí)踐，但是原理和核心知識(shí)點(diǎn)都在wxss的樣式處理和小程序image組件里，大家可以根據(jù)實(shí)際需求來(lái)應(yīng)用。

背景屬性

背景屬性也是屬于CSS方面的知識(shí)，所謂背景屬性就是給組件添加一些顏色背景或者圖片背景。由于css的背景屬性尤其是當(dāng)我們想用一張圖片作為組件的背景時(shí)，也會(huì)涉及到背景圖片的位置與裁剪，這個(gè)和小程序image組件的裁剪多少有一些相通之處，所以我們就把CSS的背景屬性放到這里來(lái)講一下~

以下是我們經(jīng)常會(huì)使用到的css背景屬性以及相對(duì)應(yīng)的技術(shù)文檔，和之前我們強(qiáng)調(diào)的一樣，技術(shù)文檔是來(lái)翻閱和深入學(xué)習(xí)的，大家可以先用背景屬性做出一些效果再說(shuō)~

比如我們可以給我們之前寫(xiě)好的home頁(yè)面，id為wxmlinfo的view組件加一個(gè)背景顏色以及id為studyweapp的view組件添加一個(gè)背景圖片：

#wxmlinfo{


  background-color: #dae7d9;


}


#studyweapp{


  background-image: url(https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/bg.png);


  background-size: cover;


  background-repeat: no-repeat;


}

大家注意，寫(xiě)在wxss里的圖片只能來(lái)自服務(wù)器或者圖床，不能放在小程序的文件結(jié)構(gòu)里，這是小程序的一個(gè)規(guī)定。

圖片的邊框美化

我們經(jīng)常在一些app里看到很多圖片它有圓角或者陰影，那這個(gè)是怎么實(shí)現(xiàn)的呢？這些效果是通過(guò)css的邊框?qū)傩詠?lái)實(shí)現(xiàn)的。

大家可以在小程序的image文件夾添加一張深色背景的圖片（如果小程序的背景是深色的，圖片背景是白色也是可以的）。我們給之前添加的image組件加一個(gè)圓角和陰影樣式，在imgshow.wxss添加以下代碼：

 .imglist .img{


  border-radius: 8px;


  box-shadow: 5px 8px 30px rgba(53,178,225,0.26);


}

圖片有了圓角，有了陰影就有了一些現(xiàn)代感啦。

這里用到了一個(gè)顏色就是rgba顏色值。RGB前面我們要求大家查過(guò)，RGBA(R,G,B,A)的R是紅色值，G是綠色值，B是藍(lán)色值，R,G,B的值取值范圍是0~255，A是Alpha透明度，取值0~1之間，越靠近0越透明。

我們來(lái)重新回顧一下邊框?qū)?a href="http://www.yjpub.cn/cssref/pr-border-radius.html">border-radius和box-shadow，大家可以點(diǎn)擊鏈接查看技術(shù)文檔的詳情。

除了圓角，我們經(jīng)常會(huì)有把圖片做成圓形的需求，我們來(lái)看具體的例子。首先在wxml文件里輸入以下代碼，添加一個(gè)logo圖片，

<view class="imglist">


    <image class="circle" mode="widthFix" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/logo.jpg" rel="external nofollow" ></image>


</view>

然后在與之對(duì)應(yīng)的wxss文件里添加相應(yīng)的css樣式，

.imglist .circle{


  width: 200px;


  height: 200px;


  border-radius: 100%;


}

也就是我們只需要定義了圖片長(zhǎng)寬之后，再來(lái)定義一下border-radius為100%即可把圖片做成圓形。

view、navigator、image組件嵌套

前面我們學(xué)習(xí)了Navigator組件里添加一段文字，實(shí)現(xiàn)點(diǎn)擊文字進(jìn)行鏈接的跳轉(zhuǎn)，Navigator組件還可以嵌套view組件，比如我們點(diǎn)擊某塊的內(nèi)容會(huì)進(jìn)行一個(gè)跳轉(zhuǎn)。和view組件一樣， Navigator組件也是可以嵌套的。

比如我們?cè)趆ome.wxml里輸入以下代碼：

<view class="event-list">


    <navigator url="/pages/home/imgshow/imgshow" class="event-link">        


        <view class="event-img">


            <image mode="widthFix" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg" rel="external nofollow" ></image>


        </view>


        <view class="event-content">


            <view class="event-title">零基礎(chǔ)學(xué)會(huì)小程序開(kāi)發(fā)</view>


            <view class="event-desc">通過(guò)兩天集中的學(xué)習(xí)，你會(huì)循序漸進(jìn)的開(kāi)發(fā)出一些具有實(shí)際應(yīng)用場(chǎng)景的小程序。 </view>


            <view class="event-box">


                <view class="event-address">深圳南山</view>


                <view class="event-time">2018年9月22日-23日</view>


            </view>


        </view>


    </navigator>


</view>

在home.wxss里輸入以下樣式：

.event-list{


  background-color: #fafbfc;


  padding: 20px 0;


  }


.event-link{


  margin: 10px;


  border-radius: 5px;


  background-color: #fff;


  box-shadow:5rpx 8rpx 10rpx rgba(53,178,225,0.26);


  overflow: hidden;


}


.event-img image{


  width: 100%;


  }


.event-content{


  padding: 25rpx;


  }


.event-title{


  line-height: 1.7em;


  }


.event-desc{


  font-size: 14px;


  color: #666;


  line-height: 1.5em;


  font-weight: 200;


  }


.event-box{


  margin-top: 15px;


  overflow: hidden;


  }


.event-address,.event-time{


  float: left;


  color: #cecece;


  font-size: 12px;


  padding-right: 15px;


  }