微信小程式|基本頁面設置

• 2020 年 2 月 21 日
• 筆記

問題描述

1 最近幾年微信小程式特別的火，快捷容易不需要下載所以不佔記憶體，給我們帶來方便。支付，小遊戲，應用等很多地方都需要小程式。其實小程式的開發和網頁製作基本一樣，都是需要用標籤來定義。那麼如何來設計簡單的小程式頁面？需要哪些元素呢？

解決方案

2 微信小程式顧名思義就是在微信中使用的一種小應用程式，不管是應用型還是遊戲型它們都需要介面都需要在首頁給使用者清晰的感受。頁面的基本內容文字，圖片，頁面下方的任務欄分為不同的頁面，一個任務鍵就是一個頁面。結構性比較強要求比較高，跟網頁一樣需要很多的標籤來定義。

3 首先需要登錄微信開發者工具，在裡面選擇你想要製作的小程式的類型。

左邊是小程式在手機上的介面，右邊是寫程式碼的區域。

圖3.1.1

在app.json中進行小程式的總體框架設置。

A． app.json是小程式的全局配置，一些介面，導航欄圖標，背景的設置等

我們在導航欄插入的不同的介面需要進行定義配置。

圖3.2.1

圖3.2.2

B．App.json中的tabBar中可以設置一些小程式中邊框中的圖片，文字的屬性，顏色，背景，路徑等。

圖3.2.3

圖3.2.4

C．window中是定義小程式中頁面頂部的顏色，字體，字體顏色的。

圖3.2.5

圖3.2.6

D．「iconPath」是框框中原圖標形式，」selectedIconPath」是你點擊該圖標時改變的另一種形式。

圖3.2.7

圖3.2.8

頁面內容是在index.wxml裡面寫，index.wxss是定義一些盒子的屬性。

圖3.3.1

圖3.3.2

結語

4 小程式很有結構性，不同的屬性設置會在不同的文件中書寫，環環相扣，分工明確。跟網頁一樣需要用很多的標籤來定義。一個小程式介面的基本要素就是導航欄，內容，邊框功能鍵。小程式的開發會用到很多的網頁的基本知識和css的定義。

END

實習編輯 | 王文星

責 編 | 江汪霖