uni app h5开发

Uni-app是由DCloud推出的一种开发工具，主要用来解决跨平台应用开发，包括H5应用开发、小程序开发等。其中，H5应用开发是Uni-app比较重要的一部分，下面详细介绍Uni-app H5开发的原理及相关知识。

一、Uni-app是什么？

Uni-app是一套使用 Vue.js 构建跨平台应用的前端框架，可以将同一套代码打包成 H5、小程序（微信/支付宝）、App 等多个平台的应用。

二、Uni-app的特点及优势

1、开发效率高：使用vue语法编写组件，使得前端开发效率大大提升。

2、多终端发布：同一代码可以打包成多种终端形态，包括：H5、小程序（微信和支付宝）、App。

3、跨端框架兼容：Uni-app兼容各种框架，如：SUI Mobile、Amaze UI等。

4、技术栈纯净：开发者无需掌握各个端的技术栈，只需要掌握Vue.js即可。

5、组件库完善：DCloud提供了一套组件库，涵盖了各种UI组件，包括各种表单、图表等等。

三、H5应用的打包与发布

1、打包

在H5开发完成后，点击发行-> H5，进入到打包配置页面，进行应用配置，如应用名称、应用图标、启动画面等。

2、发布

将生成的dist文件夹下的所有文件上传到服务器即可，由于Uni-app使用的是h5技术，因此只要支持h5技术的浏览器均可访问。

四、Uni-app H5开发中需要掌握的技术点

1、Vue.js语法：H5主要使用Vue.js语法编写页面、组件和逻辑等。

2、生命周期：掌握vue组件生命周期，包括created、mounted等。

3、Router：Uni-app使用vue-router进行路由管理。

4、Vuex：可以对全局状态进行管理。

5、异步请求技术：可以使用axios、fetch等，在Uni-app中会默认使用‘uni.request()’。

6、CSS样式：Uni-app的css在大部分情况下和简单的h5页面样式一致。

五、Uni-app H5开发实战

下面以一个简单的页面为例来介绍Uni-app H5开发的步骤：

1、创建页面

在Uni-app中，可以通过新建vue文件来创建页面，如创建news.vue页面。

2、配置路由

在路由文件router.js中新增路由配置，例如：

```

{

path: '/news',

name: 'news',

component: () => import('@/pages/news.vue')

}

```

3、编写样式

在news.vue中，通过编写样式代码设置页面样式，如：

```