uni-app-01

1.從今天開始學習uni-app,一次開發,多端可用

2.uni-app基於vue,同時也有自身的一些特點(類似於vue和小程序)

3.開發工具:HBuilder X,可以多端進行調試,真機調試,詳情請看官方文檔

4.這個項目的最終效果是做一個類小米商城,達到多端兼容的效果

5.第一天,引入uni.css-官方UI庫 animate.css-第三方CSS動畫庫 icon.css-圖標庫 common.css-公共樣式

6.tabbar的初步製作

//pages.json
{
	"pages": [ //pages數組中第一項表示應用啓動頁]
	   {
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "小米商城"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "小米商城",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	//底部導航
	"tabBar":{
		"color":"#B1B1B1",
		"selectedColor":"#FD6801",
		"borderStyle":"black",
		"backgroundColor":"#FFFFFF",
		"list":[
			{
				"pagePath":"pages/index/index",
				"iconPath":"static/tabbar/index.png",
				"selectedIconPath":"static/tabbar/indexSelected.png",
				"text":"首頁"
				
			},
			{
				"pagePath":"pages/class/class",
				"iconPath":"static/tabbar/class.png",
				"selectedIconPath":"static/tabbar/classSelected.png",
				"text":"分類"
				
			},
			{
				"pagePath":"pages/cart/cart",
				"iconPath":"static/tabbar/cart.png",
				"selectedIconPath":"static/tabbar/cartSelected.png",
				"text":"購物車"
				
			},
			{
				"pagePath":"pages/my/my",
				"iconPath":"static/tabbar/my.png",
				"selectedIconPath":"static/tabbar/mySelected.png",
				"text":"我的"
				
			}
		]
	}
}