導讀

前篇我們講到了小程式的安裝以及基本的程式碼的編寫，第一次學會了修改小程式的程式碼，能夠將頁面上顯示出“helloworld”的字樣，那麼，今天我們學什麼呢？學習程式碼，了解程式碼。

測試

打幾個字來測試一下，簡答點，打入程式碼：<div class="box"></div> 用過前端開發的小夥伴們應該知道這個程式碼的意思，這個程式碼的意思就是塊，也可以理解為區域塊，我們現在設定這個程式碼，將文字放在這個塊裡，然後我們進行下一步的操作。

ps：這個程式碼其實不是很正規，小程式給了更為規範的程式碼，但是怎麼說，我們是基礎，先用這個，以後再改也不遲。 這裡的.box是樣式命名，下面我們會用到這個設定的樣式。

參考程式碼：<div class="box"></div>

我們轉到index.wxss頁面裡面，在最後的一行輸入程式碼，就會形成左邊的樣子。 注意一下，這裡的height是指方框的高度，width是指方框的寬度，display是個方框，background是背景顏色。

參考程式碼：  .box{    width: 200px;    background: red;    height: 200px;    display: block;   }

正式講解1、塊元素

<view>

上述講了個樣子，現在我們開始步入正軌的講：

首先，<div></div>程式碼在小程式裡使用是嚴重錯誤的。

小程式裡的塊程式碼應該是<view></view>

我們將這裡的樣式命名為“item”。

類似，下面的這裡的樣式修改一下，這個時候，我們就不需要display的這個屬性了，因為它本身就是個塊元素。

2、行元素

在HTML程式碼裡面，<div>和<span>是一組好搭檔，一個是塊元素，一個是行元素，在小程式裡是肯定沒有這個<span>的，那麼，小程式裡的行元素是什麼呢？

<text>

由圖所示，這個標籤可以當成行標籤來用。

3、整體樣式

前面一章我們講到了app..wxss是全域性的邊框，那麼，我們如何使用這個整體樣式呢？

在這裡，我們輸入以下樣式程式碼：.box{border: 3px solid green} 這裡面解釋一下：border是框，3px是3畫素，這裡的px是畫素的意思，solid是指實線，green是綠色，指邊框的顏色。

參考程式碼： .box{ border: 3px solid green }

在index.wxml頁面輸入<view class="box">歡迎關注小編</view> 呼叫剛才的樣式。可以看到，頁面上出現了個綠色的框。

參考程式碼： <view class="box">歡迎關注小編</view>說明

這裡的要注意一點，就是app.wxss的優先順序沒有index.wxss裡面的優先順序高，換句話說，在index.wxss裡面輸入樣式規範要更重要。

4、插入圖片

<image>

在HTML裡插入圖片是<img>，這裡是<image>，但是要注意，這裡的標籤功能變多了，而且給你封裝好了。

<image>標籤可以呼叫網路的圖片，也可以呼叫本地的圖片。

呼叫網路的圖片是可以的，但是不太建議呼叫百度圖片。

呼叫網路圖片的方法，首先是找到一個網路的圖片，圖片的結尾應該是jpg、png、而不是html。參考程式碼： <image src="http://127.0.0.1/vhost/conf/img_echo.php?w=640&h=337&src=http://www.xx.com/xx/XXXXXX.jpg"></image>這是網路圖片的位置。

那麼，小程式裡本地的圖片怎麼匯入呢？

首先，你需要在目錄裡建立一個images的資料夾，然後將本地的圖片放進這個小程式的終端資料夾裡。

可以看到，小程式裡面現在的圖片已經完成匯入了。

參考程式碼：  <image src="/pages/images/圖片名"></image>

寫在最後

經過講解，大家會了嗎？

第二章我們講了塊標籤的使用方法、行標籤的使用方法，和樣式的使用方法，還了解了圖片的插入方法，那麼，我們下一節會講什麼呢？敬請期待把。