APP微信小程序开发教程:uniapp零基础入门教程

作者 : AI资源 本文共1518个字,预计阅读时间需要4分钟 发布时间: 2021-04-27 共3人阅读

什么是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创建一个新项目,如下图:

APP微信小程序开发教程:uniapp零基础入门教程

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

APP微信小程序开发教程:uniapp零基础入门教程

郑重声明:
1. 本站所有内容均由互联网收集整理、网友上传,仅供大家参考、学习,不存在任何商业目的与商业用途。
2. 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
3.AI资源提供网络空间。如发现该作品上传人有侵权行为请及时与我们联系。
4. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
5. AI资源不提供任何技术支持及安装服务,并且不保证所有资源都完整可用,下单前请确定自己是否有能力安装。
6. 如有链接无法下载、失效或广告,请联系管理员处理!
7. 源码属于可复制的产品,所有购买的源码无任何理由退款!

AI资源 » APP微信小程序开发教程:uniapp零基础入门教程

提供最优质的资源集合

立即查看 了解详情