对于H5和小程序，知多少？

• 2019 年 10 月 8 日
• 笔记

近段时间，很多小伙伴在讨论小程序与H5的相关知识点，为此，做下总结

一、什么是小程序

1、阐述

微信小程序和微信的原生功能应用在本质上是一样的——它们都是Web App。Web App就是一种通过H5页面技术实现的，和Native App的功能和界面几乎一样的手机App形态。很多商家和企业为了节省技术人员和资金的投入，都会选择使用Web App制作工具，免费快速制作自己的Web App。

2、小程序提供的功能：

　　a.提供小程序页概念：支持分享当前信息，例如分享某股票页面，好友打开时看到的是该股票的实时信息，而无需再次启动小程序。

　　b.对话分享：可以分享到对话，支持分享给单个好友及微信群。

　　c.搜索查找：小程序可以被搜索，但微信会极力限制搜索能力，目前提供的搜索功能是用户可直接根据名称或品牌搜索小程序。。

　　d. 公众号关联：在小程序与公众号为同一开发主体的前提下，提供小程序与微信公众号之间的关联。

　　e.线下扫码：提供线下提示用户附近有哪些小程序存在的功能。用户可以通过线下扫码使用，这也是微信提倡的接入方式。

　　f.小程序切换：小程序支持挂起状态，即多窗口概念，用户可以把小程序先挂起，然后做别的事情，在需要这个小程序的时候可以快速调用，回到最开始的状态。

　　g.消息通知：商户可以发送模板消息给接受过服务的用户，用户可以在小程序内联系客服，支持文字和图片，解决用户与小程序的沟通问题。

3、小程序的优势

a.推广功能

b.用完即走

c.可直接搜索关键字

d.提供小程序二维码

e.和APP相比，开发成本低

f.更流畅的体验

g.更多的曝光率

h.使用就是用户

i.在微信中打开频率高

j.高效的流量

二、什么是H5

1、什么是H5

a.广义上，H5 指的是 HTML5，即网页使用的 HTML 代码 —— 第五代超文本标记语言。

b.狭义上的解释，H5 就是——互动形式的多媒体广告页面

2、H5的优势

a.操作简单

b.PC移动端已经遍地开花

c.内容定制：5小时5万真实粉丝成就微信引流利器

d.互动优势

三 、小程序与H5的区别在哪

1、运行环境

传统H5 运行环境是浏览器，包括webview等；

微信小程序运行环境是非完整的浏览器，是基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，大幅提升了小程序的流畅度和性能。

所以，本质上说，HML是浏览器页面，而小程序是计算机程序。

2、开发成本

当我们开发一个HTML5 的web需求时，我们需要从开发工具，（vscode、Atom等），到前端框架（Angular、react等）、模块管理工具（Webpack 、Browserify 等）、任务管理工具（Grunt、Gulp等），还有UI库选择、接口调用工具（ajax、Fetch Api等）、浏览器兼容性等等，都需要考虑周到。

尽管大多数开发者面对这些工具时，都有了自己的配置模板，但成本依然不低吧？

而当我们想要开发一款小程序时，我们需要考虑什么？

微信提供了统一的开发工具，并且规范了开发标准，所以，作为一个开发者，你只需要专注写代码就好了。

而且，你可以随意调用微信开发里的API，不用担心浏览器的兼容性，不用担心莫名其妙的bug……

所以，小程序的开发成本比以往的HTML5 开发的web 成本低很多。

3、用户体验

我们在打开一个HTML5页面的时候，实际上就是打开一个web网页，而网页在浏览的时候，需要在浏览器中进行渲染，这个过程叫做加载，无论加载的时间的长短，都会给用户一种「卡」或者「不灵敏」的感觉。

小程序是微信内的云端应用，通过WebSocket 双向通信（保证无需刷新即时通信）、本地缓存（图片与UI 本地缓存降低与服务器交互延时）以及微信底层技术优化实现了小程序接近原生APP的体验。

小程序不能跳转外部链接，H5没有限制。

4、系统权限获取

微信小程序相对于HTML5 web应用能获得更多的系统权限，比如网络通信状态、数据缓存能力等，这些系统级权限都可以和微信小程序无缝衔接，也就是官方宣称的拥有Native App的流畅性能，而这一点恰巧是HTML5 web应用经常被诟病的地方，这也是HTML5的大多应用场景被定位在业务逻辑简单、功能单一的原因。