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

所谓“零基础”指的是：你已经会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、下载并安装微信小程序开发工具

相关影片资源迅雷下载推荐

最新|微信小程序开发教程

如您所见，w3cschool已经补充了最新的《微信小程序开发教程》，这本教程主要内容来自微信官方的「小程序」开发指南。本教程将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。教程内容包 ...

小程序开发,最新|微信小程序开发教程

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

相关影片资源迅雷下载推荐

小程序开发制作的那些事

在2017年1月9日，微信小程序正式上线后，开启了新的技术革命，小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。微信小程序爆火之后，各大巨头APP都已 ...

小程序开发,小程序开发制作的那些事

企业网站建设与开发最低只要299元起，包含域名服务器，需要的联系QQ345424724，电话15516990022,18530226930

标签： 小程序开发 APP微信小程序开发教程：uniapp零基础入门教程