對於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的大多應用場景被定位在業務邏輯簡單、功能單一的原因。