前言

随着移动互联网的发展，多端应用的需求日益增长。无论是小程序、Web 应用还是原生 App，开发者都需要花费大量时间和精力来适配不同的平台。为了解决这一痛点，uniapp 应运而生，它不仅简化了开发流程，还极大地提高了开发效率。

正文

什么是 uni-app？

uniapp 是一个使用 Vue.js 语法开发多端应用的前端框架。它允许开发者编写一套代码，即可发布到 iOS、Android、Web（包括响应式网站）、以及多种小程序平台（如微信、支付宝、百度、头条等）和快应用等多个不同的前端平台上。

uniapp 的核心特点

1. 统一的开发语言:uniapp 采用了 Vue.js 的语法体系，这意味着开发者可以使用熟悉的 Vue.js 开发模式来构建应用。如果你已经掌握了Vue.js ，那么你几乎可以立即上手 uniapp，真的很好用。
1. 跨平台的能力:uniapp 最大的优势之一就是它的跨平台能力。只需要编写一套代码，就可以在多个平台上运行，这大大减少了开发成本和维护成本。
1. 丰富的组件和 API 支持:uniapp 提供了大量的组件和 API 接口，这些组件和接口不仅覆盖了 Web 开发的常见需求，还支持各种原生功能调用，比如地图、支付、摄像头等。
1. 强大的社区支持:uniapp 拥有一个活跃的开发者社区，包括 DCloud 公司的支持、大量的插件资源、文档和教程，以及活跃的交流群组，这些都是开发者在遇到问题时可以求助的重要资源。
1. 开发环境和工具:要开始使用 uniapp 开发应用，你需要安装 HBuilderX 编辑器，这是 uniapp 的官方推荐编辑器。HBuilderX 提供了完整的 uniapp 开发环境，包括代码提示、调试工具和一键预览等功能。

快速上手

准备工作

开始之前，开发者需先下载安装如下工具：

HBuilderX：官方IDE下载地址

打开后我们可以看到这样的界面：

然后点击新建项目：

我们最开始就选择默认模板就好了，建好之后我们把设置调好：

找到运行配置里面的浏览器运行配置 和微信小程序开发者工作路径 ，把自己的浏览器路径和微信开发者在电脑上的路径复制上去：

最后我们在把一些必备的插件安装好：

点击去往插件市场 必备的插件如下：

NPM
内置浏览器
内置终端
App真机运行
uni-app编译
Git插件
js-beautify
prettier
htmlhint
stylelint
eslint-plugin-vue
eslint-js
js压缩
css压缩
scss/sass编译
es6编译

小玩一下

首先我们来试试创建页面：

这时会弹出一个页面：我们取好名字，我这里选择勾选scss的页面，选择创建同名目录和在pages.json中注册，那么我们就创建好了一个页面，一样的我们把index 、hello 、home 页面都建好，我们来到并pages.json，可以看到自动帮我们把路由也配置好了（第一个路由是默认启动打开的页面）：

我们可以在"style": { "navigationBarTitleText": "uni-app" }这里设置页面导航栏的名字：

我们再设置一个tabBar:

bash 复制代码

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path" : "pages/hello/hello",
			"style" : 
			{
				"navigationBarTitleText" : ""
			}
		},
		{
			"path" : "pages/home/home",
			"style" : 
			{
				"navigationBarTitleText" : ""
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar":{
		"list":[
			{
				"pagePath": "pages/home/home",
				"text":"首页",
				"iconPath": "static/logo.png",
				"selectedIconPath":"static/logo.png"
			},
			{
				"pagePath":"pages/hello/hello",
				"text":"欢迎",
				"iconPath": "static/logo.png",
				"selectedIconPath":"static/logo.png"
			},
			{
				"pagePath": "pages/index/index",
				"text":"我的",
				"iconPath": "static/logo.png",
				"selectedIconPath":"static/logo.png"
			}
		]
	},
	"uniIdRouter": {}
}