uni-app零基础学习笔记(一)

作者:南国老符 日期:2020-04-23 分类:知识技术 浏览:404 来源:建站管家


从今天开始学习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创建一个新项目,如下图:

uni-app入门教程

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、完成后的界面如下:

uni-app零基础入门


期待您打赏鼓励
支付宝打赏二维码
支付宝扫码
微信打赏二维码
微信扫码

上一篇:《建站管家》二次开发文档

下一篇:如何修复阿里云Linux软件漏洞?

发表评论
您需要登录后才可以评论 登 录 | 注册
评论 (0)
QQ客服
客服微信
加QQ群