什么是UniApp?

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情”

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uni-app是 DCloud 旗下产品之一， DCloud 即数字天堂（北京）网络技术有限公司是W3C成员及 HTML5中国产业联盟发起单位，在HTML5和大前端领域探索的道路上，DCloud做出了极具特色的创新和贡献。

为什么要使用UniApp?

生态：插件市场提供了非常多的插件，以及各种SDK。
学习成本低：基于通用的前端技术栈。
性能体验优秀：如在某些场景下性能超过了微信原生框架
一套代码，运行到多个平台
丰富的案例
. . . . . .

不吹太多，深度使用过的人应该会对它有些独特的见解！

使用UniApp

环境要求

node环境：推荐使用nvm安装、切换node版本更加灵活
vue-cli：vue脚手架

创建第一个UniApp程序

使用正式版（对应HBuilderX最新正式版），会弹出模板选择，推荐Hello UniApp或者默认模板即可！

vue create -p dcloudio/uni-preset-vue my-project

项目结构

项目结构与Vue类似，多了一些配置的如pages.json，开发更加方便。

引入UI组件

以Vant UI为例子，我们有两种引用方法，推荐大家使用第二种：

直接官方下载所有组件包，导入到项目下

通过npm安装，在Main.js引入样式

Vue 3 项目，安装最新版 Vant

npm i vant

Vue 2 项目，安装 Vant 2

npm i vant@latest-v2

在Main.js中按需引入组件

import { Button } from 'vant';

Vue.use(Button)

在App.vue中导入全局样式

@import 'vant/lib/index.css';

基础配置项

一些基础配置项都在我们的pages.json文件中

配置底部tabbar，在pages.json添加节点 tabbar

"tabBar": {
	"color": "#7A7E83",
	"selectedColor": "#3cc51f",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
		"pagePath": "pages/index/index",
		"iconPath": "static/image/icon_component.png",
		"selectedIconPath": "static/image/icon_component_HL.png",
		"text": "首页"
	}, {
		"pagePath": "pages/about/index",
		"iconPath": "static/image/icon_API.png",
		"selectedIconPath": "static/image/icon_API_HL.png",
		"text": "关于"
	}]
}

去掉顶部标题

在globalStyle配置添加节点即可，注意：非H5端，手机顶部状态栏区域会被页面内容覆盖

"navigationStyle": "custom",

运行UniApp

npm run serve

总结

搭建这样一个环境还是非常快的，提供了丰富的配置项，写起来还是非常快的，对后端开发上手也是非常友好！感兴趣的朋友可以学习一下，UniApp官网，推荐大家几个不错的UI组件地址：VantUI, ColorUI, uView。

前端学习之 - 搭建UniApp前端框架以及简单使用

什么是UniApp?

为什么要使用UniApp?

使用UniApp

环境要求

创建第一个UniApp程序

项目结构

引入UI组件

基础配置项

运行UniApp

总结