程序與 App 的區別

技術

微信小程序就是微信支持的一種第三方插件，微信向這種第三方插件開放了更多的功能接口，從豐富的界面控制到多種框架，特別合適提供了更多的對移動設備的訪問能力。　

運行環境

原生 App 直接運行在操作系統的單獨進程中（在 Android 中還可以開啟多進程），而小程序只能運行在微信的進程中。

開發成本

原生 App 的開發涉及到 Android/iOS 多個平臺、開發工具、開發語言、不同設備的適配等問題；而小程序只需要開發一個就可以在 Android/iOS 等不同平臺不同設備上運行。

原生 App 需要在商店上架（Android 需要上架各種商店）；小程序只能在微信平臺發布。

系統權限

原生 App 調用的是系統資源，也就是說系統提供給開發的的 API 都可以使用；而小程序是基于微信的，小程序所有的功能都受限于微信，也就是說微信給開發者提供 API 才可以使用，不能繞過微信直接使用系統提供的 API。

原生 App 可以給用戶推送消息；小程序不允許主動給用戶發送消息，只能回復模版消息 。

原生 App 有獨立的數據庫，可以做離線存儲；小程序只能存儲到 LocalStorage，無法做離線存儲。

原生 App 需要下載，安裝包比較大；小程序無需下載，可以通過小程序碼等方式通過微信直接打開。

運行流暢度

原生 App 運行在操作系統中，所有的原生組件可以直接調用 GPU 進行渲染；而小程序運行在微信的進程中，只能通過 WebView 進行渲染。

小程序與 H5 的區別

規范

H5是由W3C做的一個開放標準規范，小程序是騰訊自己的封閉規范。

運行環境

簡單來說，小程序是一種應用，運行的環境是微信（App）；H5 是一種技術，依附的外殼是是瀏覽器。

H5 的運行環境是瀏覽器，包括 WebView，而微信小程序的運行環境并非完整的瀏覽器，因為小程序的開發過程中只用到一部分H5 技術。

小程序的運行環境是微信開發團隊基于瀏覽器內核完全重構的一個內置解析器，針對性做了優化，配合自己定義的開發語言標準，提升了小程序的性能。

小程序中無法使用瀏覽器中常用的 window 對象和 document 對象，H5 可以隨意使用。

開發成本

H5 的開發，涉及開發工具（vscode、Atom等）、前端框架（Angular、react等）、模塊管理工具（Webpack 、Browserify 等）、任務管理工具（Grunt、Gulp等），還有 UI 庫選擇、接口調用工具（ajax、Fetch Api等）、瀏覽器兼容性等等。

盡管這些工具可定制化非常高，大部分開發者也有自己的配置模板，但對于項目中各種外部庫的版本迭代、版本升級，這些成本加在一起那就是個不小數目了。

而開發一個微信小程序，由于微信團隊提供了開發者工具，并且規范了開發標準，則簡單得多。前端常見的 HTML、CSS 變成了微信自定義的 WXML、WXSS，官方文檔中都有明確的使用介紹，開發者按照說明專注寫程序就可以了。

需要調用后端接口時，調用發起請求API；需要上傳下載時，調用上傳下載API；需要數據緩存時，調用本地存儲API；引入地圖、使用羅盤、調用支付、調用掃碼等等功能都可以直接使用；UI 庫方面，框架帶有自家 weui 庫加成。

并且在使用這些 API 時，不用考慮瀏覽器兼容性，不用擔心出現 BUG，顯而易見微信小程序的開發成本相對低很多。

系統權限

獲取到的權限不一樣，H5作為一個網頁，被封閉在瀏覽器這個沙箱內。但是微信可以賦予微信小程序更多特殊權限，比如錄音，視頻，羅盤，掃一掃，模板消息，客服消息，分享等，這些都是和微信無縫銜接的。在微信里，微信小程序毫無疑問要比H5的體驗好很多，除了不能支持長按識別二維碼外。

而這一點恰巧是 H5 被詬病的地方，這也是 H5 的大多應用場景被定位在業務邏輯簡單、功能單一的原因。

運行流暢度

這條無論對于用戶還是開發者來說，都是最直觀的感受。長久以來，當HTML5應用面對復雜的業務邏輯或者豐富的頁面交互時，它的體驗總是不盡人意，需要不斷的對項目優化來提升用戶體驗。但是由于微信小程序運行環境獨立，盡管同樣用 HTML +CSS + JS 去開發，但配合微信的解析器最終渲染出來的是原生組件的效果，自然體驗上將會更進一步。

H5／App／小程序之間的優劣勢對比

相較APP：用戶現場掃碼下載APP太慢，并且國內流量費用昂貴。而在家里提前預想到所有的線下場景不是很符合人類的習慣。

相較公眾號;掃描公眾號后，要點擊一下”關注“，再等待公眾號推送對應的消息，或找到對應的菜單項，再點擊一次。 也就是說，小程序至少減少了2個需要用戶動手的步驟，無疑是好的多的服務體驗。;

相較H5：除了加載速度慢、體驗較差之外，用戶很難再次找到H5的入口、再次進入后需要重新加載是最大的問題。H5頁面，往往還需要一個公眾號或者APP配合，用戶只想買個票，還要關注一個公眾號，非常不方便。

H5頁面由于無法被單獨沉淀用戶（無法直接關注），一般都是配合公眾號或者APP（html5打包APP）的產品形態

某些平臺制作生成的APP（有叮當、小云、opencom等），功能體驗、開發速度等介于原生、Html5和小程序之間，取得了一個較好的平衡。并且免除了服務器以及運維人員的成本，非常適合非技術人員的產品首選。

在留存和喚醒上，APP可以常駐內存、通過其他方式喚醒（網頁/其他APP）、全屏帶圖片的通知提醒、彈窗等等多種手段，故更容易提高留存，也更容易喚醒用戶。

過多款大型裸跑H5游戲磨合，以及超百家H5研發商的測試與反饋，Layabox的第二代H5引擎LayaAir已趨于穩定。將于4月15日向全行業開發者開放下載。在此之前，Layabox官方網站于3月31日提前公開LayaAir引擎API、LayaAir引擎開發示例源碼、LayaAir引擎性能展示DEMO。

H5引擎是游戲的天花板

由于H5瀏覽器大多數存在性能缺陷，開發者稍加不注意，H5游戲就會出現卡頓等現象，這里有開發者自身的原因，也有引擎的原因。尤其是面對大型游戲，引擎更是游戲的天花板，決定著能不能將游戲設計的更重度一些？能不能把畫質搞的更精美一些？

盡管H5行業中引擎眾多，但性能存在明顯差異，有的引擎甚至不支持高清模式，為了能讓游戲跑起來，不惜犧牲掉游戲的畫質表現。因此，選擇一個性能優秀的引擎，對H5游戲起到非常關鍵的作用。

即將推出第二代引擎LayaAir

在H5行業中，Layabox是迄今為止唯一擁有重度H5線上游戲的商業級引擎。基于Layabox第一代引擎LayaFlash的重度動作游戲《獵刃2》和MMORPG游戲《醉西游》是真正能媲美APP品質的大型H5游戲。然而Layabox并不止步于此，將于4月15日推出裸跑性能媲美APP的第二代H5引擎LayaAir。

LayaAir引擎的性能展示

本文將為大家展示官網中公布的兩個DEMO，更多性能DEMO以及源碼，請大家直接登錄Layabox官網的開發者中心進行體驗與查看。（網址：http://ldc.layabox.com/）

以下測試的硬件環境為市場價499元的紅米2A手機，系統為Android4.4.4，瀏覽器為Chrome 46.0.2490.76。

Tips：

1、FPS是每秒傳輸幀數(Frames Per Second)，60幀是滿幀；

2、FPS后的(3D)表示為WebGL模式渲染，(2D)表示Canvas模式渲染，LayaAir引擎產品在不支持WebGL的瀏覽器中，會自動切換為Canvas模式。

LayaAir引擎的學習資料

LayaAir支持ActionScript3、JavaScript、TypeScript三種語言開發，方便于各種H5開發者快速上手。正式發布時，LayaAir全面開放學習資源，包括了學習文檔、視頻教程、在線API、在線示例源碼、性能測試展示、問答社區、LayaAir引擎開發者QQ群等，更快捷高效的提供開發者的學習支撐。

在今日，官網提前開放LayaAir引擎的API和示例。豐富的在線示例DEMO還可直接線上編輯與執行，并可生成示例二維碼在手機瀏覽器中快速體驗。

Layabox的核心業務

LayaAir引擎

裸跑性能媲美APP的新一代HTML5引擎；

支持Canvas\WebGL模式自動切換；

支持2DD\VR產品開發；

支持使用ActionScript3\TypeScript\JavaScript三種語言開發；

一次開發可同時發布：手游APP、HTML5、Flash頁游多端版本。

LayaFlash引擎

兼容Flash原生API，支持將Flash頁游\手游快速轉換為HTML5游戲。

LayaPlayer運行器

支持各種HTML5項目（含第三方引擎）加速，性能超越APP，運行器已嵌入主流渠道，提供HTML5打包成原生APP工具；

LayaOpen開放平臺

一次對接，全渠道發行，超5億移動設備安裝量幫助CP發行，開發者享受80%的發行分成扶持政策

一句話介紹

Layabox解決了HTML5的性能問題和產品來源問題，擁有巨大的HTML5聯合發行流量，歡迎各方合作！

嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！

志同道合的小伙伴跟我一起學習交流哦！

第一階段 HTML5

09HTML5 新增標簽和屬性

1 html5文檔類型和字符集

Html的發展歷程：

文檔類型設定

Document

HTML: sublime輸入html:4s

XHTML: sublime輸入html:xt

HTML5：sublime輸入html：5或者！顯示

2 查看手冊及其新增標簽

常用新標簽（需掌握）

W3c手冊中文官網：w3school

header：定義文檔的頁眉 頭部

nav：定義導航鏈接的部分

footer：定義文檔或節的頁腳 底部

article：定義文章。

section：定義文檔中的節（ section區段）

aside：定義其所處內容之外的內容 側邊

datalist：定義選項列表。與 input元素配合使用該元素

Fieldset：可將表單內的相關元素分組，打包

3 datalist標簽

有提示的下拉菜單

4 fieldset元素

fieldset元素可將表單內的相關元素分組、打包， 和legend搭配使用

5 HTML5新增 iInput表單（一）

6 HTML5新增 input表單（二）

7 新增占位符焦點多選屬性

8 autocomplete屬性

輸入內容自動記錄，方便下次快速輸入

autocomplete必須滿足兩個條件才會起作用，一是必須有提交按鈕，二是必須給給他名字，名字是什么無所謂，例如上面“123”

9 內容不能為空和獲得焦點屬性

required是提示輸入內容不能為空

accesskey是一個快捷鍵屬性，如上字母“s”,意思是在頁面中按“ctrl+s”可以將光標移至此文本框

10 表單綜合案例學生檔案

顯示效果如下（馬賽克不算）：

11 embed引入網上視頻

多媒體標簽 embed：定義嵌入的內容，embed可以用來插入各種多媒體，格式可以是Mid、Wav、AFF、AU、MP3等等。Url為音頻或視頻文件及其路徑，可以是相對路徑或絕對路徑

因為兼容性問題，我們這里只講解插入網絡視頻，后面H5會講解audio和video視頻多媒體。

12 播放音頻 audio

autoplay是自動播放，controls是顯示播放器，Loop是循環次數

每個瀏覽器的顯示樣式有所不同，每個瀏覽器支持的音頻格式有所不同

Source可以提供多個音頻格式，以便兼容各種瀏覽器。

13 播放視頻 video

跟音頻播放用法一樣

看不懂的小伙伴不要氣餒，后續的分享中將持續解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。

第一階段HTML5的所有章節都已結束，下篇文章將分享《第二階段 CSS3》小伙伴們不要錯過喲！

?