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":"我的"
				
			}
		]
	}
}