1 | uniapp实战之项目介绍与搭建

项目介绍

• 做的是黑马程序员的“懂你找图”微信小程序
• 可以浏览和下载精美图片和视频
  

项目搭建

（1）新建项目

脚手架方式

创建项目 vue create -p dcloudio/uni-preset-vue 项目名
安装 sass依赖 npm install sass-loader node-sass

HBuilderX方式
新建一个uniapp项目，默认模板就好了 （本次实战我使用这种方式）

（2）新增一个tabbar页面

pages.json

"tabBar": {
		"color": "#8a8a8a",
		"selectedColor": "#d4237a",
		"backgroundColor": "#fff",
		"position": "bottom",
		"borderStyle": "black",
		"list": [{
				"pagePath": "pages/home/index",
				"iconPath": "./static/icon/_home.png",
				"selectedIconPath": "./static/icon/home.png",
				"text": "首页"
			}, {
				"pagePath": "pages/horizontal/index",
				"iconPath": "./static/icon/_img.png",
				"selectedIconPath": "./static/icon/img.png",
				"text": "横屏"
			},
			{
				"pagePath": "pages/video/index",
				"text": "精美视频",
				"iconPath": "./static/icon/_videocamera.png",
				"selectedIconPath": "./static/icon/videocamera.png"
			},
			{
				"pagePath": "pages/search/index",
				"text": "搜索",
				"iconPath": "./static/icon/_search.png",
				"selectedIconPath": "./static/icon/search.png"
			},
			{
				"pagePath": "pages/mine/index",
				"text": "我的",
				"iconPath": "./static/icon/_my.png",
				"selectedIconPath": "./static/icon/my.png"
			}
		]
	}

（3）引入字体图标

• 字体图标使用的是 iconfont
• 在 App.vue中 全局引入

<style>
	/*每个页面公共css */
	@import "./styles/base.wxss";
	@import "./styles/iconfont.wxss";
</style>