建站
咨詢
售后
建站咨詢
新聞中心
前幾節(jié)的內(nèi)容讓我們的小程序有了文字，但小程序的內(nèi)容形式還不夠豐富，比如沒有鏈接，沒有圖片等元素，而這些元素在小程序里也都是通過組件來實(shí)現(xiàn)的。
創(chuàng)新互聯(lián)2013年開創(chuàng)至今，先為扎賚特等服務(wù)建站，扎賚特等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為扎賚特企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
navigator組件
在小程序里，我們是通過navigator組件來給頁面添加鏈接的。有些頁面在我們打開小程序的時(shí)候就可以看得到，還有些則需要我們通過點(diǎn)擊鏈接進(jìn)行頁面切換才可以看得到，這些我們可以稱之為二級頁面。
技術(shù)文檔：[navigator組件技術(shù)文檔]( https://www.cdcxhl.com/weixinapp/weixinapp-navigator.html )
二級頁面
為了讓二級頁面與tabBar的頁面有更加清晰的結(jié)構(gòu)關(guān)系，我們可以在tabBar對應(yīng)的頁面文件夾下面新建要跳轉(zhuǎn)的頁面。比如我們的第一個(gè)tabBar是home，凡是home會(huì)跳轉(zhuǎn)的二級頁面，我們都建在home文件夾里。
我們同樣在pages配置項(xiàng)里新建一個(gè)頁面imgshow，名稱大家可以自定義~這樣pages配置項(xiàng)的內(nèi)容如下：
"pages/home/home",
"pages/home/imgshow/imgshow",
"pages/list/list",
"pages/partner/partner",
"pages/more/more"然后我們再來在home頁面的home.wxml加入以下代碼
讓小程序顯示圖片
在上面的代碼中，我們把navigator組件嵌套在view組件里，當(dāng)然不嵌套也是可以的。要寫一個(gè)非常復(fù)雜的頁面，就會(huì)經(jīng)常用到這種嵌套。
由于navigator組件沒有添加樣式，所以在視覺上看不出它是一個(gè)可以點(diǎn)擊的鏈接，我們在home.wxss里給它添加一個(gè)樣式：
.item-link{
margin: 20px;
padding:10px 15px;
background-color: #4ea6ec;
color: #fff;
border-radius: 4px;
}url是頁面跳轉(zhuǎn)鏈接，大家注意這個(gè)路徑的寫法，我們也可以把上面的鏈接形式寫成以下代碼：
/pages/home/imgshow/imgshow這兩個(gè)路徑都是指向imgshow頁面。
小任務(wù)：為什么頁面的路徑有兩個(gè)imgshow？比如把路徑寫成
/pages/home/imglist對應(yīng)的是什么頁面？在pages配置項(xiàng)添加一下看看效果。
相對路徑與絕對路徑
相對路徑
大家注意我們之前使用的路徑基本都是相對路徑，相對路徑使用“/”字符作為目錄的分隔字符，
- "./" 代表當(dāng)前目錄
等同于
- “../” 代表上一級目錄
- "/"當(dāng)前根目錄，是相對目錄；
小任務(wù)：你知道當(dāng)前根目錄是什么嗎？/pages/home/imgshow/imgshow和./../home/imgshow/imgshow這兩個(gè)的寫法你明白它們?yōu)樯吨赶虻氖峭粋€(gè)路徑了嗎？
要管理好圖片資源、鏈接（頁面）資源、音頻資源、視頻資源、wxss樣式資源等等內(nèi)部與外部資源，就一定要掌握路徑方面的知識。我們之后也會(huì)經(jīng)常運(yùn)用這個(gè)知識。
絕對路徑
那什么是絕對路徑呢？網(wǎng)絡(luò)鏈接比如 ：
7n.cdcxhl.com/attachments/knowledge/202006/77455.png這個(gè)就是絕對路徑，還有C:*Windows*\System32，這種從盤符開始的路徑也是絕對路徑。通常相對路徑用的會(huì)比較多一些。
image組件
一個(gè)好看的網(wǎng)頁怎么可能少得了圖片呢？小程序添加圖片是通過image組件的方式。
技術(shù)文檔：image組件技術(shù)文檔
我們首先把要顯示的圖片放到小程序的image文件夾里，然后再在imgshow頁面下的imgshow.wxml添加以下代碼：
小程序顯示圖片
注意圖片的鏈接是我們之前的tab圖標(biāo)鏈接，也就是這個(gè)鏈接來源于小程序的本地文件夾?？赡苣愕膱D片命名會(huì)有所不同，主要根據(jù)情況修改。
這樣我們的圖片就在小程序里顯示出來啦~~
如果我們不對圖片的樣式比如高度和寬度進(jìn)行處理，圖片顯示就會(huì)變形。這是因?yàn)樾〕绦驎?huì)給圖片增加一個(gè)默認(rèn)的寬度和高度，寬度為300px，高度為225px。
圖片光顯示出來還是不夠的，很多時(shí)候我們會(huì)對圖片顯示出來的大小有要求，或者對它的外邊距有要求；利用之前學(xué)到的知識，我們也可以給image組件加一些 css樣式。比如我們在imgshow.wxss里面添加
.imglist{
text-align: center;
}
.imglist .imgicon{
width: 200px;
height: 200px;
margin: 20px;
}云存儲
我們可以把圖片放在小程序的本地文件夾里，也可以把圖片放在網(wǎng)上。那如何把一張圖片以鏈接的方式讓其他人看到呢？這個(gè)時(shí)候就需要一個(gè)專門的存儲圖片的服務(wù)器（圖床）了。
免費(fèi)的圖床：騰訊云對象存儲COS
由于我們之前注冊過小程序，可以選擇其他登錄方式里的微信公眾號登錄，登錄后點(diǎn)擊右上角控制臺，即可進(jìn)入后臺，在工具欄里下拉云產(chǎn)品，找到存儲下面的對象存儲，在左側(cè)菜單存儲桶列表創(chuàng)建存儲桶，只需注意將訪問權(quán)限改為公有讀私有寫，其他按說明自行操作。
創(chuàng)建好存儲桶bucket，然后大家可以把圖片上傳到對象存儲服務(wù)器里面，并分享鏈接并在imgshow.wmxl測試一下：
尺寸單位rpx
上面的網(wǎng)絡(luò)圖片是變形的，為了讓圖片不變形，那我們需要給圖片添加一個(gè)wxss樣式，這里就有一個(gè)問題，這張圖片的寬度為1684px，高度為998px，而手機(jī)的寬度卻沒有這么高的像素。我們想讓圖片在手機(jī)里完整顯示而不變形該怎么處理呢？方法之一是我們可以使用尺寸單位rpx。
技術(shù)文檔：尺寸單位rpx
在小程序里，所有的手機(jī)屏幕的寬度都為750rpx，我們可以把圖片等比縮小。比如給圖片添加樣式:
.imglist .imgitem{
width: 700rpx;
height: 415rpx;
margin: 20rpx;
}有了rpx這個(gè)尺寸單位，我們可以確定一個(gè)元素在小程序里的精準(zhǔn)位置和精準(zhǔn)大小，不過這個(gè)尺寸單位處理圖片起來經(jīng)常需要換算挺麻煩的，我們來看下面的處理方法。
圖片的裁剪
由于我們的圖片可能尺寸大小不一，或者由于iPhone、安卓手機(jī)的尺寸大小不一以及我們對圖片顯示的要求不一，為了讓我們的圖片顯示正常，小程序需要對圖片進(jìn)行一些裁剪。
小程序是通過mode的方式來對圖片進(jìn)行裁剪的，大家可以去閱讀一下image組件關(guān)于13種mode模式的說明。
技術(shù)文檔：image組件技術(shù)文檔
如果我們想處理好上面的圖片，我們該怎么處理呢？按照技術(shù)文檔，我們可以給image組件添加一個(gè)widthFix模式：寬度不變，高度自動(dòng)變化，保持原圖寬高比不變。
然后給圖片添加wxss樣式：
.imglist .imgitem{
width: 100%;
}也就是說設(shè)置圖片的寬度為百分比樣式，而高度則自動(dòng)變化，保持原圖寬高比不變。
百分比是網(wǎng)頁、移動(dòng)端等用來布局以及定義大小的一個(gè)非常重要的單位，大家要多學(xué)多練多分析哦~
當(dāng)然還會(huì)有這樣的一個(gè)要求，我們希望圖片全屏顯示，但是設(shè)計(jì)師卻只給圖片預(yù)留了一個(gè)很小的高度，這樣我們就必須對圖片進(jìn)行一定的裁剪了，我們可以在imgshow.wxml這樣寫。
而在imgshow.wxss里面添加一些樣式
.imglist .imgfull{
width: 100%;
height: 100px;
}大家可以在開發(fā)者工具以及通過掃描開發(fā)者工具預(yù)覽生成的二維碼在手機(jī)上體驗(yàn)一下，并把這里的mode=”center”，換成其他12個(gè)模式來了解一下，不同的模式對圖片裁剪的影響。
圖片的處理是一個(gè)非常重要的知識點(diǎn)，需要大家多多實(shí)踐，但是原理和核心知識點(diǎn)都在wxss的樣式處理和小程序image組件里，大家可以根據(jù)實(shí)際需求來應(yīng)用。
背景屬性
背景屬性也是屬于CSS方面的知識，所謂背景屬性就是給組件添加一些顏色背景或者圖片背景。由于css的背景屬性尤其是當(dāng)我們想用一張圖片作為組件的背景時(shí)，也會(huì)涉及到背景圖片的位置與裁剪，這個(gè)和小程序image組件的裁剪多少有一些相通之處，所以我們就把CSS的背景屬性放到這里來講一下~
以下是我們經(jīng)常會(huì)使用到的css背景屬性以及相對應(yīng)的技術(shù)文檔，和之前我們強(qiáng)調(diào)的一樣，技術(shù)文檔是來翻閱和深入學(xué)習(xí)的，大家可以先用背景屬性做出一些效果再說~
| 背景屬性 | 備注 |
|---|---|
| background | 在一個(gè)聲明中設(shè)置所有的背景屬性。 |
| background-color | 設(shè)置元素的背景顏色。 |
| background-image | 設(shè)置元素的背景圖像。 |
| background-size | 規(guī)定背景圖片的尺寸。 |
| background-repeat | 設(shè)置是否及如何重復(fù)背景圖像。 |
比如我們可以給我們之前寫好的home頁面，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;
}大家注意，寫在wxss里的圖片只能來自服務(wù)器或者圖床，不能放在小程序的文件結(jié)構(gòu)里，這是小程序的一個(gè)規(guī)定。
圖片的邊框美化
我們經(jīng)常在一些app里看到很多圖片它有圓角或者陰影，那這個(gè)是怎么實(shí)現(xiàn)的呢？這些效果是通過css的邊框?qū)傩詠韺?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前面我們要求大家查過，RGBA(R,G,B,A)的R是紅色值，G是綠色值，B是藍(lán)色值，R,G,B的值取值范圍是0~255，A是Alpha透明度，取值0~1之間，越靠近0越透明。
我們來重新回顧一下邊框?qū)賐order-radius和box-shadow，大家可以點(diǎn)擊鏈接查看技術(shù)文檔的詳情。
除了圓角，我們經(jīng)常會(huì)有把圖片做成圓形的需求，我們來看具體的例子。首先在wxml文件里輸入以下代碼，添加一個(gè)logo圖片，
然后在與之對應(yīng)的wxss文件里添加相應(yīng)的css樣式，
.imglist .circle{
width: 200px;
height: 200px;
border-radius: 100%;
}也就是我們只需要定義了圖片長寬之后，再來定義一下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組件也是可以嵌套的。
比如我們在home.wxml里輸入以下代碼：
零基礎(chǔ)學(xué)會(huì)小程序開發(fā)
通過兩天集中的學(xué)習(xí)，你會(huì)循序漸進(jìn)的開發(fā)出一些具有實(shí)際應(yīng)用場景的小程序。
深圳南山
2018年9月22日-23日
在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;
}本文名稱：創(chuàng)新互聯(lián)小程序云教程：云開發(fā)鏈接與圖片
URL鏈接：http://www.5511xx.com/article/cdeejhp.html
