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

navigator組件

在小程序里，我們是通過navigator組件來給頁面添加鏈接的。有些頁面在我們打開小程序的時候就可以看得到，還有些則需要我們通過點擊鏈接進行頁面切換才可以看得到，這些我們可以稱之為二級頁面。

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

二級頁面

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

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

"pages/home/home",


    "pages/home/imgshow/imgshow",


    "pages/list/list",


    "pages/partner/partner",


    "pages/more/more"

然后我們再來在home頁面的home.wxml加入以下代碼

<view class="index-link">


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


</view>

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

由于navigator組件沒有添加樣式，所以在視覺上看不出它是一個可以點擊的鏈接，我們在home.wxss里給它添加一個樣式：

.item-link{


  margin: 20px;


  padding:10px 15px;


  background-color: #4ea6ec;


  color: #fff;


  border-radius: 4px;


}

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

/pages/home/imgshow/imgshow

這兩個路徑都是指向imgshow頁面。

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

相對路徑與絕對路徑

相對路徑

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

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

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

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

絕對路徑

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

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

這個就是絕對路徑，還有C:*Windows*\System32，這種從盤符開始的路徑也是絕對路徑。通常相對路徑用的會比較多一些。

image組件

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

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

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

<view id="imgsection">


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


  <view class="imglist">


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


  </view>


</view>

注意圖片的鏈接是我們之前的tab圖標鏈接，也就是這個鏈接來源于小程序的本地文件夾。可能你的圖片命名會有所不同，主要根據(jù)情況修改。

這樣我們的圖片就在小程序里顯示出來啦~~

如果我們不對圖片的樣式比如高度和寬度進行處理，圖片顯示就會變形。這是因為小程序會給圖片增加一個默認的寬度和高度，寬度為300px，高度為225px。

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

.imglist{


  text-align: center;


}


.imglist .imgicon{


  width: 200px;


  height: 200px;


  margin: 20px;


}

云存儲

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

免費的圖床：騰訊云對象存儲COS

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

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

<view class="imglist">


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


</view>

尺寸單位rpx

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

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

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

 .imglist .imgitem{


  width: 700rpx;


  height: 415rpx;


  margin: 20rpx;


}

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

圖片的裁剪

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

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

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

如果我們想處理好上面的圖片，我們該怎么處理呢？按照技術(shù)文檔，我們可以給image組件添加一個widthFix模式：寬度不變，高度自動變化，保持原圖寬高比不變。

<view class="imglist">


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


</view>

然后給圖片添加wxss樣式：

.imglist .imgitem{


  width: 100%;


}

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

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

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

<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;


}

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

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

背景屬性

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

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

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

#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;


}

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

圖片的邊框美化

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

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

 .imglist .img{


  border-radius: 8px;


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


}

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

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

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

除了圓角，我們經(jīng)常會有把圖片做成圓形的需求，我們來看具體的例子。首先在wxml文件里輸入以下代碼，添加一個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>

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

.imglist .circle{


  width: 200px;


  height: 200px;


  border-radius: 100%;


}

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

view、navigator、image組件嵌套

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

比如我們在home.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é)會小程序開發(fā)</view>


            <view class="event-desc">通過兩天集中的學(xué)習(xí)，你會循序漸進的開發(fā)出一些具有實際應(yī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;


  }