uni-app入門：專案創建及原生tabbar配置

uni-app 是使用 Vue.js 開發跨平台應用的前端框架，開發者編寫一套程式碼，可編譯到iOS、Android、H5、小程式等多個平台。相較於原生小程式開發，APP兩端原生開發，學習開發成本更低，平台自備的元件豐富，運作體驗效果非常好，廣受開發者歡迎。

開始之前，開發者需先下載安裝以下工具：HBuilderX：官方IDE下載位址

1、建立第一個uni-app專案

在點選工具列裡的檔案->新建->項目：

選擇左邊uni-app項目，輸入項目名稱，如：test，選址檔案路徑，使用預設模板，點選建立，即可成功創建一個uni-app專案。

2、專案目錄介紹

新建uni-app專案成功後，專案目錄產生如下圖檔：

#3、調試預覽

新建uni-app專案成功後，即可透過點擊HBuilderX工具右邊預覽按鈕在工具內預覽，可以透過預覽工具列調試查看佈局結構、樣式、 console等

4、原生tabbar的創建和配置

打開pages.json文件，修改標題、增加頁面路由、增加tabBar, tabBar增加四個“首頁”，“分類”，“購物車”，“我的”。分別對應在pages目錄中建立四個頁面。程式碼如下：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "ShopWind多商户商城"
			}
		}, {
			"path": "pages/user/index",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}, {
			"path": "pages/cart/index",
			"style": {
				"navigationBarTitleText": "购物车"
			}
		}, {
			"path": "pages/category/index",
			"style": {
				"navigationBarTitleText": "商品分类"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#333333",
		"selectedColor": "#fc2b34",
		"borderStyle": "white",
		"backgroundColor": "#FFFFFF",
		"position": "bottom",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/images/home.png",
				"selectedIconPath": "static/images/home-hover.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/category/index",
				"iconPath": "static/images/gcategory.png",
				"selectedIconPath": "static/images/gcategory-hover.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/cart/index",
				"iconPath": "static/images/cart.png",
				"selectedIconPath": "static/images/cart-hover.png",
				"text": "购物车"
			},
			{
				"pagePath": "pages/user/index",
				"iconPath": "static/images/my.png",
				"selectedIconPath": "static/images/my-hover.png",
				"text": "我的"
			}
		]
	}
}

5、匯入靜態資源包（圖片）

上面程式碼區塊套用到靜態資源圖片，需要把圖片放到static目錄中

##6、測試項目建好，效果如下

資源包下載

以上是uni-app入門：專案創建及原生tabbar配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！