微信小程序是一種輕巧的應用程序,開發人員可以使用HTML、CSS和JavaScript等Web技術來構建小程序。導入CSS樣式是開發小程序時不可或缺的一個步驟,下面我們來介紹如何導入CSS樣式。
首先,需要在小程序項目的根目錄下創建一個名為“styles”的文件夾,該文件夾用于存放我們的CSS文件。
接下來,打開小程序項目的app.json文件,找到“pages”數組中的頁面路徑,修改為如下格式:
{ "pages": [ "pages/index/index" ], "window": { "backgroundColor": "#F7F7F7", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信小程序", "navigationBarBackgroundColor": "#F7F7F7" }, "tabBar": { "selectedColor": "#09BB07", "list": [ { "pagePath": "pages/index/index", "text": "首頁", "iconPath":"/images/home.png", "selectedIconPath":"/images/home_active.png" } ] }, "style": { "navigationBarTitleText": "微信小程序", "navigationBarBackgroundColor": "#F7F7F7" } }
在“style”屬性中,可以定義全局樣式,這樣每個頁面都會使用該樣式。例如,我們可以設置導航欄的背景色和標題文字顏色。
然后,在每個頁面的文件夾下創建一個名為“xxxx.wxss”的文件(xxxx為頁面名稱),并在文件中編寫樣式代碼。例如:
.title { font-size: 28rpx; font-weight: bold; color: #333333; margin-top: 50rpx; }
以上代碼定義了class名為“title”的元素樣式。
最后,在每個頁面的.wxml文件中的
標簽下添加如下代碼:
其中,lang="wxss"
表示使用CSS樣式,"/styles/common.wxss"
為我們剛才創建的CSS文件路徑。
這樣每個頁面就可以導入我們的CSS樣式了。