【uni-app从入门到实战】项目创建、基本配置、轮播图展示

头部

从今天起我们来完成一个商城的项目，首先创建 uni-app 项目 uni_shop，把 pages/index/index.vue 中多余的代码删去，然后修改 pages.json，修改头部文字、头部文字颜色、头部背景色、页面背景色：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index"
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni商城",
		"navigationBarBackgroundColor": "#F23030",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
} 

这样头部就改好了：

底部

新建 cart.vue、member.vue、news.vue 三个文件，记得勾选在 pages.json 中注册，这样就会自动在 pages.json 中注册，我们不用再手动添加了：

然后在 pages.json 中增加 tabBar 选项，设置底部 tab 的列表，并通过 color 和 selectedColor 设置 tab 上的文字默认颜色和选中颜色

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index"
		}
		,{"path" : "pages/news/news","style" : {}}
	,{"path" : "pages/cart/cart","style" : {}},{"path" : "pages/member/member","style" : {}}
		],
	"globalStyle": {
		"navigationBarTextStyle": &#