所谓“零基础”就是你已经会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里导入，如：//底部导航 & # 34；tabBar & # 34:{ & # 34；color & # 34:"# bfbfbf & # 34， & # 34；选择颜色& # 34；:"#515151"， & # 34；borderStyle & # 34:"黑色& # 34；， & # 34；backgroundColor & # 34:"# FFFFFF & # 34， & # 34；列表& # 34；:[ { & # 34；pagePath & # 34:"页数/索引/索引& # 34；， & # 34；正文& # 34；:"主页& # 34；， & # 34；iconPath & # 34:"static/img/home . png & # 34；， & # 34；选择selectedIconPath & # 34:"static/img/home _ choose . png & # 34； }， { & # 34；pagePath & # 34:"页面/群组/我的& # 34；， & # 34；正文& # 34；:"圈& # 34；， & # 34；iconPath & # 34:"static/img/money . png & # 34；， & # 34；选择selectedIconPath & # 34:"static/img/money _ choose . png & # 34； }， { & # 34；pagePath & # 34:"pages/add/index & # 34；， & # 34；正文& # 34；:"发布& # 34；， & # 34；iconPath & # 34:"static/img/add . png & # 34；， & # 34；选择selectedIconPath & # 34:"static/img/add _ choose . png & # 34； }， { & # 34；pagePath & # 34:"页面/用户/朋友& # 34；， & # 34；正文& # 34；:"朋友& # 34；， & # 34；iconPath & # 34:"static/img/news . png & # 34；， & # 34；选择selectedIconPath & # 34:"static/img/news _ choose . png & # 34； }， { & # 34；pagePath & # 34:"页面/用户/我& # 34；， & # 34；正文& # 34；:"我的& # 34；， & # 34；iconPath & # 34:"static/img/user . png & # 34；， & # 34；选择selectedIconPath & # 34:"static/img/user _ choose . png & # 34； } } 6。导入awesome.css(针对图标):放在static/font/ folder(小程序提示错误，不会影响图标显示，要去除错误提示，请将woff/ttf等文件复制到本地静态文件夹)，在pages/index/index。
<style> @import '../../static/font/awesome.css'; </style>
7、第5步里的导航图片图标存于static/img里，底部导航的图标只能用图片，不能用awesome里的图标& ltstyle & gt @ import & # 39；../../static/font/awesome . CSS & # 39；； & lt；/style & gt；7.步骤5中的导航图片图标存储在static/img中，底部导航中的图标只能是图片，不能是awesome中的图标。
8.将page.json中的hello-uniapp导航标题navigationBarTitleText修改为:community circle。
9.测试牛逼图标是否可用，在pages/index/index.vue中添加代码:
& ltview class = & # 34fa fa-heart & # 34；& gt& lt/view & gt；10.分别创建这些页面:pages/group/my.vue、pages/add/index.vue、pages/user/friend.vue、pages/user/me.vue。
11.完成后的界面如下:
