微信小程序 | 全局配置和頁面配置

歡迎點擊「算法與編程之美」↑關注我們！

本文首發於微信公衆號："算法與編程之美"，歡迎關注，及時瞭解更多此係列文章。

問題描述

如何在全局配置中在底部插入各種圖標及文字？

如何在頁面配置中插入圖片並將圖文居中？

如何設置全局及頁面的背景顏色？

在我們製作一個微信小程序時，首先進行全局配置，設置底部索引，我們可能面臨不知道如何插入圖標或是圖標尺寸過大的情況。其次，在頁面配置過程，需要插入圖片且要讓圖文居中的情況。除此之外，我們會想讓頁面並不只是單調的白色而想設置不同顏色。

解決方案

（1）全局配置

全局配置的圖標我們可以直接在網上搜索並下載PNG的格式，將其保存在你所新建的一個在你的小程序pages文件夾下的一個img文件夾裏。

圖1 圖標文件夾

在全局配置中，增加一個tabBar標籤，並在這個標籤裏面寫關於底部的圖標和文字等內容。同時需要鏈接一個“”pages”:[ ]”，在全局配置的代碼最頂部，在[ ]中寫入pagePath的內容。

      "pagePath":  "pages/index/index",

<span style="font-family:"&color:#3E3E3E;letter-spacing:&#10">      "text": "首頁<span style="font-family:"&color:#3E3E3E;letter-spacing:.4px">",

      "selectedIconPath":  "pages/img/shouye.png"

    {

      "text": "分類<span style="font-family:"&color:#3E3E3E;letter-spacing:.4px">",

      "selectedIconPath":  "pages/img/fenlei.png"

    {

      "text": "收藏<span style="font-family:"&color:#3E3E3E;letter-spacing:.4px">",

      "selectedIconPath":  "pages/img/shoucang.png"

<span style="font-family:"&color:#3E3E3E;letter-spacing:&#10">    }

 

表1 插入圖標

圖2 全局顯示效果

（2）頁面配置

頁面插入圖片需要一個image標籤，而要讓圖片下的文字和圖片都居中，可以讓圖片和文字都在同一個view標籤裏面，然後通過wxss來設置樣式。

     <image  src="/pages/img/shisheng.jpg"  mode="aspectFill"></image>

——東野圭吾     <text>\n</text>

.shisheng{

  flex-direction: column;

}

 

表2 插入圖片

圖3 圖文居中效果圖

結語

在添加圖標或圖片時，直接將其拖動到小程序開發工具裏的img文件夾下是不可以的，需要在複製到電腦裏的存放小程序文件的文件夾裏的img文件夾。全局配置時尤其注意對“[ ]”和“{ }”的使用及每個未完結的 ] 和 } 後面的英文狀態下的逗號。

END

主       編   |   王楠嵐

責       編   |   吳怡辰

 where2go 團隊

---

   

微信號：算法與編程之美          

長按識別二維碼關注我們!

溫馨提示：點擊頁面右下角“寫留言”發表評論，期待您的參與！期待您的轉發！