移动端开发选择小程序和选择H5有啥不同？两者有何区别？

Posted 2023-03-23

参考技术A 现在但凡只要是有微信的人都对微信的小程序不陌生，而且微信小程序的数量早已达到数百万个，其实现在不但只有微信小程序，包括支付宝、百度甚至头条等等都开始了自己小程序之路。这样企业在 开发移动端 的时候就会面临一个问题是选择 开发小程序 还是H5好呢？所以 济南文汇传媒 的我就来总结一下小程序和H5的区别，来看一下两者有何不同？让您能更好地选择。

首先先来看一下二者在概念上的区别：

小程序：就是依赖于微信或其他APP上的一个应用形式，无法脱离其所在的APP。

H5：可以单纯地认为是网页，用在移动端或者PC端的网页开发技术。

再来看一下二者其他方面的区别：

一、开发的成本不同

小程序因为是在特定的环境中去开发，所以它的组件、UI都是确定好了的，也不用去考虑兼容问题，修改的次数就会减少，这样成本会低一些。

H5在开发时会有开发工具的选择、框架的选择、UI的选择等问题，还要兼顾到浏览器是否兼容的问题，可能会面临多次修改，这样会增加成本。

二、加载速度的不同

在速度上，小程序依然基于APP端去实现，这样在使用时就感到很流畅。

因为H5是网页的原因，所以如果有很多功能或者图片需要加载的话，可能会比较慢一些。

三、运行环境的不同

前面我们说到了小程序只能在特定的APP端内运行，所以没有APP端也就无法使用小程序。

H5是网页，只要有浏览器就可以使用，手机自身的浏览器就可以使用。

四、用户体验的不同

H5网页是在浏览器内使用，如果网速不佳或者网页上需要加载的东西过多就会出现“很卡”的现象。

小程序在首次使用的时候是需要查找的，可能不会很精准，但是一旦使用之后页面加载等就会很流畅了。

好了，上面的这些内容就是关于小程序与H5之前的区别，其实两者各有优缺点，还是根本自身的成本问题或者需求进行选择吧。

为移动应用程序的 UI 小部件选择库

【中文标题】为移动应用程序的 UI 小部件选择库

【英文标题】：Choosing library for UI widgets for mobile app

【发布时间】：2013-12-29 18:50:45

【问题描述】：

我一直在用 AngularJS 和 zeptoJS 开发一个移动应用程序，但是这两者的结合没有提供任何 UI 小部件

我看过这个话题：Is there a UI library for angularjs for use in a phonegap app?

但我正在寻找更多答案（真的，LungoJS 是唯一的答案？而且我不会使用 jQueryMobile。）。还有其他轻量级库吗？

【参考方案1】：

IonicFramework 正是为此目的而设计的框架。虽然它相当现代。因此，它没有太多的向后兼容性。

Angular Material（目前仅适用于 1.x） Material Design components for Angular 2 OnsenUI - “PhoneGap UI 开发的答案” React Native NativeScript Angular

【讨论】：

aaand 你能告诉我 ionic 和 bootstrap twitter 有什么区别吗？

@Mati 主要区别在于 ionic 针对 AngularJS 进行了优化，并假定您将使用它作为您的应用程序框架。

如果有人对如何开始使用 Phonegap + AngularJS + Ionic 的教程感兴趣：frontendmatters.com/…

【参考方案2】：

我也喜欢 TopCoat，它是一个与 Angular 配合良好的 CSS 移动/桌面框架。在此处查看 Angular 的实际操作：http://coenraets.org/blog/2013/11/sample-mobile-application-with-angularjs/ 和 http://www.topcoat.io 的库

【参考方案3】：

在此处查看我的答案，在那里我恢复了 UI 框架的其他选项以及优缺点。 包括剑道 UI、phone.js、巧克力片、类固醇。

Custom CSS for Mobile development using Phonegap/Cordova

如前所述，上衣和靴子也不错。

【参考方案4】：

Mobile Angular UI 让您可以使用 Bootstrap 3 css 剥离桌面相关媒体查询和 Angular.js 来快速开发移动应用程序。

其目的是实现与 Jquery Mobile 相同的功能，但使用 Bootstrap 3 作为 UI 和 AngularJs 代替 Jquery。

它还提供了 Bootstrap 3 中未包含的其他基本移动组件，例如侧边栏、可滚动区域、绝对定位的顶部和底部导航栏，在滚动时不会反弹等等。

【参考方案5】：

也许重新考虑 jQueryMobile。

几个月前，我们开始了一个新项目，并考虑了上面列出的所有客户端框架选项。我们正在寻找大量针对移动设备优化的 UI 小部件。对我们来说，小部件目录比框架是否提供 MV* 架构更重要，因此 AngularJS、MeteorJS 和 EmberJS 等工具是次要的。我们发现 jQueryMobile 是我们的最佳选择。 Bootstrap、Ionic、Kendo、Sensa 等似乎没有专门用于移动设备的那么多和多样的开箱即用小部件。移动工具领域正在转型，但到目前为止，我认为我们为我们的用例做出了最佳决策。