在多彩的圖片呈現下的程式必不可缺的便是文字的搭配，圖片勾起興趣，文字輔助表達，多數情況下我們上傳的圖片都需要在它周圍添上合適的標題，以便美觀和表述清晰。下面是簡單的圖片文字連結的截圖：

說到圖片和文字的連結就不得不理下思路：首先我想要在小程式內顯示圖片文字資訊，且在點選目標圖片或文字時，可以轉到我希望到達的另一個目標頁面，這就表示我們需要在圖片和文字外圍用navigator將它們包裹住，其次如上述圖片一樣，希望文字位於圖片下方，那麼就要將包裹圖片的image先寫出來，再寫入包裹文字的text或view，
wxml程式碼如下：

<navigator  url='/pages/xqzjz/xqzjz' hover-class="changestyle" class='lianjie' >
     <image src='https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=0e1e43e6888ba61edfeecf29790ff037/b3fb43166d224f4a9f8f363f03f790529822d18c.jpg' class='tp'></image>
     <view class='ziti'>相親終結者</view>
</navigator>
 

上述是一張圖片和文字的連結，如需要在一行內填入多張圖片，則只需將上述的圖片和連結的地址和文字改改，複製在上述程式碼的下行就可以了，規定在同行顯示用wxss來控制，
如下wxss程式碼：

.lianjie{
  width: 32.8%;      //給你的連結加入限定的寬，這裡用%是因為希望它能等比例適應大小
  height: 185px;     //給連結加入高，這個高是圖片的高加文字的高
  display: inline-block;    //這個很重要，沒了這個你的圖片就會排隊，排一溜下去~
  background-color: #d8f1ca;   //給你的連結寬設定背景顏色，使它美觀點
  margin-left: 0.2%;      //希望連結螢幕的左邊有點間隙
}

.tp{
   width:100%;              //在被連結包圍下，需要100%的寬度顯示你的圖片
   height: 150px;          //不要超過連結框的高度
   margin-top:2px;        //讓圖片和連結框有點距離
   border: 1px solid rgb(250, 250, 250);   //圖片外圍加上邊框，使圖片們之間有點間隔
 }

.ziti{
font-size: 12px;          //字型大小設定
height: 20px;               //設定字型所在位置高度
text-align: center;         //字型水平居中
line-height: 20px;         //字型垂直居中
}

 

具體wxml程式碼如下：

<view class='kuang '>
<navigator  url='/pages/xqzjz/xqzjz' hover-class="changestyle" class='lianjie' >
     <image src='https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=0e1e43e6888ba61edfeecf29790ff037/b3fb43166d224f4a9f8f363f03f790529822d18c.jpg' class='tp'></image>
     <view class='ziti'>相親終結者</view>
</navigator>

<navigator url='/pages/shixiong/shixiong' hover-class='changestyle' class='lianjie'>
<image src='http://www.gugu5.com/upload2/16791/2017/10-09/20171009171642_765642wboqPi16_small.jpg' class='tp'></image>
<view class='ziti'>師兄，請按劇本來!</view>
</navigator>

<navigator url='/pages/xjc/xjc' hover-class='changestyle' class='lianjie'>
<image src='http://fm.234us.com/mh/2017/01/31/32f936d54f.jpg' class='tp'></image>
<view class='ziti'>邪君寵-貂蟬</view>
</navigator>
</view>
 

注：上述圖片地址都是網路圖片。而上述程式碼中的kuang是用來總體規劃佈局的，它的wxss如下：

.kuang{
  background-color: #d8f1ca;
  width: 100%;
  height: 185px;
}

程式碼和解釋有寫的不對的地方請見諒，可以的話請留下你寶貴的修改建議和問題提出，感謝~
下面是我初次做的小程式，歡迎來看看。。。