uniapp和写h5有啥区别-猿码集

1. 简介

随着移动互联网的发展，越来越多的开发者开始注重移动端应用的开发。在这个时代，我们可以看到很多跨平台的开发框架相继出现。uniapp就是其中一个。

那么，uniapp和写h5有什么区别呢？在我们正式回答这个问题之前，先来了解一下uniapp的基本概念。

1.1 什么是uniapp

Uni-app是一个基于Vue.js开发的多端应用开发框架，可以使用Vue.js的开发方式来开发手机端应用程序，同时可以快速打包成安卓、iOS、H5等多种平台的应用。它可以一次编写，多端运行。对于移动端开发者来说，这让他们可以省去重复的工作，减少错误。

1.2 H5是什么

H5是指基于HTML5的网页开发技术，主要用于构建可在各种移动设备和PC上运行的网站或应用程序。H5网页一般运行在浏览器中，无需安装APP。

2. uniapp和写H5的区别

2.1 运行环境不同

uniapp可以将代码转为原生APP，运行在手机本地，可以直接访问手机的硬件资源，比如拍照、摄像、位置等。而H5页面只能在浏览器中运行，访问不到本地的硬件设备，需要通过浏览器提供的API进行访问，功能受到限制。

2.2 页面布局方式

uniapp采用的是小程序的开发方式，采用flex布局方式，对于开发者来说，这样可以更加方便地进行页面布局和适配。而H5页面则需要自己编写CSS进行布局，相对来说较为繁琐。

2.3 开发成本不同

uniapp对于一些基础组件进行了封装，比如自定义导航栏、下拉刷新等，开发者不需要重复造轮子，减少了开发成本，同时uniapp还提供了大量的组件和模板，开发者可以根据需要进行选择和使用。而在H5页面中，这些组件需要自己编写，不仅浪费时间，而且还需要考虑不同设备的适配问题。

2.4 集成第三方插件不同

uniapp内置了很多的插件，比如同城定位、支付功能等。对于一些比较常见的插件来说，只需要在代码中进行简单的配置就可以使用。而在H5页面中，需要自己引入第三方插件并进行配置，相对来说更加繁琐。

2.5 构建出的应用不同

uniapp可以将代码快速打包成安卓、iOS、H5等多种平台的应用，而H5只能作为网页在浏览器中运行。对于一些需要在手机本地运行的应用来说，使用uniapp会更加方便和可靠。

3. 总结

通过上述分析可以得出，uniapp和H5虽然看起来功能类似，但是背后的实现方式却有很大的不同。如果你需要开发一些需要访问本地硬件设备的应用程序，那么使用uniapp会是比较理想的选择。


// uniapp demo
// 使用uni.request获取数据
import uni from '@dcloudio/uni-app';
uni.request({
    url: 'http://www.example.com/api',
    success: (res) => {
        console.log(res.data);
    }
});
// h5 demo
// 使用axios获取数据
import axios from 'axios';
axios.get('http://www.example.com/api')
    .then((res) => {
        console.log(res.data);
    })
    .catch((err) => {
        console.log(err);
    });

uniapp和写h5有啥区别