uni-app零基础学习笔记（一）

从今天开始学习uni-app，从零基础到做一个完整小项目的历程，分享给大家，留给自己日后温习。

所谓“零基础”指的是：你已经会javascript+css+html（div）

什么是uni-app？uni-app能做什么？

uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

学习目标：开发一个完整的小项目（微信小程序+安卓APP+H5，其他终端平台日后测试）

前提：你已经掌握了（js+css+html+php：uni-app做前端、PHP做后端）

我的学习步骤：

1、下载并安装HBuilderX

2、下载并安装微信小程序开发工具

3、安装谷歌浏览器

4、启动HBuilderX创建一个新项目，如下图：

5、创建底部导航菜单：在page.json里加入如下代码：

//底部导航
	"tabBar":{
		"color":"#bfbfbf",
		"selectedColor":"#515151",
		"borderStyle":"black",
		"backgroundColor":"#FFFFFF",
		"list":[
			{
				"pagePath":"pages/index/index",
				"text":"首页",
				"iconPath":"static/img/home.png",
				"selectedIconPath":"static/img/home_chose.png"
			},
			{
				"pagePath":"pages/group/my",
				"text":"圈子",
				"iconPath":"static/img/money.png",
				"selectedIconPath":"static/img/money_chose.png"
			},
			{
				"pagePath":"pages/add/index",
				"text":"发布",
				"iconPath":"static/img/add.png",
				"selectedIconPath":"static/img/add_chose.png"
			},
			{
				"pagePath":"pages/user/friend",
				"text":"好友",
				"iconPath":"static/img/news.png",
				"selectedIconPath":"static/img/news_chose.png"
			},
			{
				"pagePath":"pages/user/me",
				"text":"我的",
				"iconPath":"static/img/user.png",
				"selectedIconPath":"static/img/user_chose.png"
			}
		]
	}

6、导入awesome.css（图标用）：放到static/font/文件夹里（小程序提示错误，不影响图标显示，要去掉错误提示，请把woff/ttf等文件拷贝到本地static文件夹），在pages/index/index.vue里导入，如：

<style>
	@import '../../static/font/awesome.css';
</style>

7、第5步里的导航图片图标存于static/img里，底部导航的图标只能用图片，不能用awesome里的图标

8、修改page.json里的hello-uniapp导航标题navigationBarTitleText的内容为：社群圈

9、测试awesome图标是否可用，在pages/index/index.vue里加入代码：

<view class="fa fa-heart"></view>

10、分别创建这几个页面：pages/group/my.vue、pages/add/index.vue、pages/user/friend.vue、pages/user/me.vue

11、完成后的界面如下：