Python學習筆記：7.6.2 Django快速建站 - Web開發實戰 微信小程式2

前言：本文是學習網易微專業的《python全棧工程師 - Django快速建站》課程的筆記，歡迎學習交流。同時感謝老師們的精彩傳授！

一、課程目标

• 使用

  weUI

  元件
• 建立

  tabBar

• 更多常見應用開發

二、詳情解讀

2.1.

weUI

元件

2.1.1.介紹

• weUI

  元件是一套基于樣式庫

  weui-wxss

  開發的小程式擴充

  UI

  元件庫

  – 同微信原生視覺體驗一緻的元件庫

  – 由微信官方設計團隊和小程式團隊為微信小程式量身設計

  – 使用者的使用感覺更加統一

2.1.2.安裝元件庫

• 安裝

  – 進入到小程式項目要目錄

  – 安裝

  cnpm

  ，解決

  npm

  安裝源問題：

npm install -g cnpm -registry=https://registry.npm.taobao.org
           

• 安裝

  weUI

  元件

cnpm install weui-miniprogram -S
           

-S

：表示生成

package.json

檔案

2.1.3.使用元件庫

• 在

  app.wxss

  中引入安裝的元件庫

2.2.建立

tabBar

2.2.1.建立流程

• 在

  app.json

  中添加：

  "tabBar": {...}

"tabBar": {
	"color": "black",
	"position": "bottom",
	"list": [
		{
			"pagePath": "pages/index/index",
			"text": "首頁",
			"iconPath": "images/index.png",
			"selectedIconPath": "images/indexed.png"
		},
		{
			"pagePath": "pages/books/books",
			"text": "書籍",
			"iconPath": "images/book.png",
			"selectedIconPath": "images/booked.png"
		},
		{
			"pagePath": "pages/location/location",
			"text": "位置",
			"iconPath": "images/location.png",
			"selectedIconPath": "images/locationed.png"
		},
	]
}
           

更多圖示，請參考官網：https://www.iconfont.cn

本節微信小程式源碼，請參考分享資源裡的專題一

連結:https://pan.baidu.com/s/1FfgbrIw0VwtUDJ-ZVUiALA

提取碼:d7ke

三、課程小結

• 01 使用元件庫
• 02 建立

  tabBar

• -03 開發其他功能