整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
程序與 App 的區(qū)別
技術(shù)
微信小程序就是微信支持的一種第三方插件，微信向這種第三方插件開放了更多的功能接口，從豐富的界面控制到多種框架，特別合適提供了更多的對(duì)移動(dòng)設(shè)備的訪問能力?！?/span>
運(yùn)行環(huán)境
原生 App 直接運(yùn)行在操作系統(tǒng)的單獨(dú)進(jìn)程中（在 Android 中還可以開啟多進(jìn)程），而小程序只能運(yùn)行在微信的進(jìn)程中。
開發(fā)成本
原生 App 的開發(fā)涉及到 Android/iOS 多個(gè)平臺(tái)、開發(fā)工具、開發(fā)語言、不同設(shè)備的適配等問題；而小程序只需要開發(fā)一個(gè)就可以在 Android/iOS 等不同平臺(tái)不同設(shè)備上運(yùn)行。
原生 App 需要在商店上架（Android 需要上架各種商店）；小程序只能在微信平臺(tái)發(fā)布。
系統(tǒng)權(quán)限
原生 App 調(diào)用的是系統(tǒng)資源，也就是說系統(tǒng)提供給開發(fā)的的 API 都可以使用；而小程序是基于微信的，小程序所有的功能都受限于微信，也就是說微信給開發(fā)者提供 API 才可以使用，不能繞過微信直接使用系統(tǒng)提供的 API。
原生 App 可以給用戶推送消息；小程序不允許主動(dòng)給用戶發(fā)送消息，只能回復(fù)模版消息 。
原生 App 有獨(dú)立的數(shù)據(jù)庫，可以做離線存儲(chǔ)；小程序只能存儲(chǔ)到 LocalStorage，無法做離線存儲(chǔ)。
原生 App 需要下載，安裝包比較大；小程序無需下載，可以通過小程序碼等方式通過微信直接打開。
運(yùn)行流暢度
原生 App 運(yùn)行在操作系統(tǒng)中，所有的原生組件可以直接調(diào)用 GPU 進(jìn)行渲染；而小程序運(yùn)行在微信的進(jìn)程中，只能通過 WebView 進(jìn)行渲染。
小程序與 H5 的區(qū)別
規(guī)范
H5是由W3C做的一個(gè)開放標(biāo)準(zhǔn)規(guī)范，小程序是騰訊自己的封閉規(guī)范。
運(yùn)行環(huán)境
簡(jiǎn)單來說，小程序是一種應(yīng)用，運(yùn)行的環(huán)境是微信（App）；H5 是一種技術(shù)，依附的外殼是是瀏覽器。
H5 的運(yùn)行環(huán)境是瀏覽器，包括 WebView，而微信小程序的運(yùn)行環(huán)境并非完整的瀏覽器，因?yàn)樾〕绦虻拈_發(fā)過程中只用到一部分H5 技術(shù)。
小程序的運(yùn)行環(huán)境是微信開發(fā)團(tuán)隊(duì)基于瀏覽器內(nèi)核完全重構(gòu)的一個(gè)內(nèi)置解析器，針對(duì)性做了優(yōu)化，配合自己定義的開發(fā)語言標(biāo)準(zhǔn)，提升了小程序的性能。
小程序中無法使用瀏覽器中常用的 window 對(duì)象和 document 對(duì)象，H5 可以隨意使用。
開發(fā)成本
H5 的開發(fā)，涉及開發(fā)工具（vscode、Atom等）、前端框架（Angular、react等）、模塊管理工具（Webpack 、Browserify 等）、任務(wù)管理工具（Grunt、Gulp等），還有 UI 庫選擇、接口調(diào)用工具（ajax、Fetch Api等）、瀏覽器兼容性等等。
盡管這些工具可定制化非常高，大部分開發(fā)者也有自己的配置模板，但對(duì)于項(xiàng)目中各種外部庫的版本迭代、版本升級(jí)，這些成本加在一起那就是個(gè)不小數(shù)目了。
而開發(fā)一個(gè)微信小程序，由于微信團(tuán)隊(duì)提供了開發(fā)者工具，并且規(guī)范了開發(fā)標(biāo)準(zhǔn)，則簡(jiǎn)單得多。前端常見的 HTML、CSS 變成了微信自定義的 WXML、WXSS，官方文檔中都有明確的使用介紹，開發(fā)者按照說明專注寫程序就可以了。
需要調(diào)用后端接口時(shí)，調(diào)用發(fā)起請(qǐng)求API；需要上傳下載時(shí)，調(diào)用上傳下載API；需要數(shù)據(jù)緩存時(shí)，調(diào)用本地存儲(chǔ)API；引入地圖、使用羅盤、調(diào)用支付、調(diào)用掃碼等等功能都可以直接使用；UI 庫方面，框架帶有自家 weui 庫加成。
并且在使用這些 API 時(shí)，不用考慮瀏覽器兼容性，不用擔(dān)心出現(xiàn) BUG，顯而易見微信小程序的開發(fā)成本相對(duì)低很多。
系統(tǒng)權(quán)限
獲取到的權(quán)限不一樣，H5作為一個(gè)網(wǎng)頁，被封閉在瀏覽器這個(gè)沙箱內(nèi)。但是微信可以賦予微信小程序更多特殊權(quán)限，比如錄音，視頻，羅盤，掃一掃，模板消息，客服消息，分享等，這些都是和微信無縫銜接的。在微信里，微信小程序毫無疑問要比H5的體驗(yàn)好很多，除了不能支持長(zhǎng)按識(shí)別二維碼外。
而這一點(diǎn)恰巧是 H5 被詬病的地方，這也是 H5 的大多應(yīng)用場(chǎng)景被定位在業(yè)務(wù)邏輯簡(jiǎn)單、功能單一的原因。
運(yùn)行流暢度
這條無論對(duì)于用戶還是開發(fā)者來說，都是最直觀的感受。長(zhǎng)久以來，當(dāng)HTML5應(yīng)用面對(duì)復(fù)雜的業(yè)務(wù)邏輯或者豐富的頁面交互時(shí)，它的體驗(yàn)總是不盡人意，需要不斷的對(duì)項(xiàng)目?jī)?yōu)化來提升用戶體驗(yàn)。但是由于微信小程序運(yùn)行環(huán)境獨(dú)立，盡管同樣用 HTML +CSS + JS 去開發(fā)，但配合微信的解析器最終渲染出來的是原生組件的效果，自然體驗(yàn)上將會(huì)更進(jìn)一步。
H5／App／小程序之間的優(yōu)劣勢(shì)對(duì)比
相較APP：用戶現(xiàn)場(chǎng)掃碼下載APP太慢，并且國內(nèi)流量費(fèi)用昂貴。而在家里提前預(yù)想到所有的線下場(chǎng)景不是很符合人類的習(xí)慣。
相較公眾號(hào);掃描公眾號(hào)后，要點(diǎn)擊一下”關(guān)注“，再等待公眾號(hào)推送對(duì)應(yīng)的消息，或找到對(duì)應(yīng)的菜單項(xiàng)，再點(diǎn)擊一次。 也就是說，小程序至少減少了2個(gè)需要用戶動(dòng)手的步驟，無疑是好的多的服務(wù)體驗(yàn)。;
相較H5：除了加載速度慢、體驗(yàn)較差之外，用戶很難再次找到H5的入口、再次進(jìn)入后需要重新加載是最大的問題。H5頁面，往往還需要一個(gè)公眾號(hào)或者APP配合，用戶只想買個(gè)票，還要關(guān)注一個(gè)公眾號(hào)，非常不方便。
H5頁面由于無法被單獨(dú)沉淀用戶（無法直接關(guān)注），一般都是配合公眾號(hào)或者APP（html5打包APP）的產(chǎn)品形態(tài)
某些平臺(tái)制作生成的APP（有叮當(dāng)、小云、opencom等），功能體驗(yàn)、開發(fā)速度等介于原生、Html5和小程序之間，取得了一個(gè)較好的平衡。并且免除了服務(wù)器以及運(yùn)維人員的成本，非常適合非技術(shù)人員的產(chǎn)品首選。
在留存和喚醒上，APP可以常駐內(nèi)存、通過其他方式喚醒（網(wǎng)頁/其他APP）、全屏帶圖片的通知提醒、彈窗等等多種手段，故更容易提高留存，也更容易喚醒用戶。
過多款大型裸跑H5游戲磨合，以及超百家H5研發(fā)商的測(cè)試與反饋，Layabox的第二代H5引擎LayaAir已趨于穩(wěn)定。將于4月15日向全行業(yè)開發(fā)者開放下載。在此之前，Layabox官方網(wǎng)站于3月31日提前公開LayaAir引擎API、LayaAir引擎開發(fā)示例源碼、LayaAir引擎性能展示DEMO。
H5引擎是游戲的天花板
由于H5瀏覽器大多數(shù)存在性能缺陷，開發(fā)者稍加不注意，H5游戲就會(huì)出現(xiàn)卡頓等現(xiàn)象，這里有開發(fā)者自身的原因，也有引擎的原因。尤其是面對(duì)大型游戲，引擎更是游戲的天花板，決定著能不能將游戲設(shè)計(jì)的更重度一些？能不能把畫質(zhì)搞的更精美一些？
盡管H5行業(yè)中引擎眾多，但性能存在明顯差異，有的引擎甚至不支持高清模式，為了能讓游戲跑起來，不惜犧牲掉游戲的畫質(zhì)表現(xiàn)。因此，選擇一個(gè)性能優(yōu)秀的引擎，對(duì)H5游戲起到非常關(guān)鍵的作用。
即將推出第二代引擎LayaAir
在H5行業(yè)中，Layabox是迄今為止唯一擁有重度H5線上游戲的商業(yè)級(jí)引擎?；贚ayabox第一代引擎LayaFlash的重度動(dòng)作游戲《獵刃2》和MMORPG游戲《醉西游》是真正能媲美APP品質(zhì)的大型H5游戲。然而Layabox并不止步于此，將于4月15日推出裸跑性能媲美APP的第二代H5引擎LayaAir。
LayaAir引擎的性能展示
本文將為大家展示官網(wǎng)中公布的兩個(gè)DEMO，更多性能DEMO以及源碼，請(qǐng)大家直接登錄Layabox官網(wǎng)的開發(fā)者中心進(jìn)行體驗(yàn)與查看。（網(wǎng)址：http://ldc.layabox.com/）
以下測(cè)試的硬件環(huán)境為市場(chǎng)價(jià)499元的紅米2A手機(jī)，系統(tǒng)為Android4.4.4，瀏覽器為Chrome 46.0.2490.76。
Tips：
1、FPS是每秒傳輸幀數(shù)(Frames Per Second)，60幀是滿幀；
2、FPS后的(3D)表示為WebGL模式渲染，(2D)表示Canvas模式渲染，LayaAir引擎產(chǎn)品在不支持WebGL的瀏覽器中，會(huì)自動(dòng)切換為Canvas模式。
LayaAir引擎的學(xué)習(xí)資料
LayaAir支持ActionScript3、JavaScript、TypeScript三種語言開發(fā)，方便于各種H5開發(fā)者快速上手。正式發(fā)布時(shí)，LayaAir全面開放學(xué)習(xí)資源，包括了學(xué)習(xí)文檔、視頻教程、在線API、在線示例源碼、性能測(cè)試展示、問答社區(qū)、LayaAir引擎開發(fā)者QQ群等，更快捷高效的提供開發(fā)者的學(xué)習(xí)支撐。
在今日，官網(wǎng)提前開放LayaAir引擎的API和示例。豐富的在線示例DEMO還可直接線上編輯與執(zhí)行，并可生成示例二維碼在手機(jī)瀏覽器中快速體驗(yàn)。
Layabox的核心業(yè)務(wù)
LayaAir引擎
裸跑性能媲美APP的新一代HTML5引擎；
支持Canvas\WebGL模式自動(dòng)切換；
支持2DD\VR產(chǎn)品開發(fā)；
支持使用ActionScript3\TypeScript\JavaScript三種語言開發(fā)；
一次開發(fā)可同時(shí)發(fā)布：手游APP、HTML5、Flash頁游多端版本。
LayaFlash引擎
兼容Flash原生API，支持將Flash頁游\手游快速轉(zhuǎn)換為HTML5游戲。
LayaPlayer運(yùn)行器
支持各種HTML5項(xiàng)目（含第三方引擎）加速，性能超越APP，運(yùn)行器已嵌入主流渠道，提供HTML5打包成原生APP工具；
LayaOpen開放平臺(tái)
一次對(duì)接，全渠道發(fā)行，超5億移動(dòng)設(shè)備安裝量幫助CP發(fā)行，開發(fā)者享受80%的發(fā)行分成扶持政策
一句話介紹
Layabox解決了HTML5的性能問題和產(chǎn)品來源問題，擁有巨大的HTML5聯(lián)合發(fā)行流量，歡迎各方合作！
嘍大家好，我是作者“未來”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個(gè)階段，堅(jiān)持學(xué)習(xí)3個(gè)月蛻變?yōu)閃eb前端高手哦！
志同道合的小伙伴跟我一起學(xué)習(xí)交流哦！
1 html5文檔類型和字符集
Html的發(fā)展歷程：
文檔類型設(shè)定
Document
HTML: sublime輸入html:4s
XHTML: sublime輸入html:xt
HTML5：sublime輸入html：5或者！顯示
2 查看手冊(cè)及其新增標(biāo)簽
常用新標(biāo)簽（需掌握）
W3c手冊(cè)中文官網(wǎng)：w3school
header：定義文檔的頁眉 頭部
nav：定義導(dǎo)航鏈接的部分
footer：定義文檔或節(jié)的頁腳 底部
article：定義文章。
section：定義文檔中的節(jié)（ section區(qū)段）
aside：定義其所處內(nèi)容之外的內(nèi)容 側(cè)邊
datalist：定義選項(xiàng)列表。與 input元素配合使用該元素
Fieldset：可將表單內(nèi)的相關(guān)元素分組，打包
3 datalist標(biāo)簽
有提示的下拉菜單
4 fieldset元素
fieldset元素可將表單內(nèi)的相關(guān)元素分組、打包， 和legend搭配使用
5 HTML5新增 iInput表單（一）
6 HTML5新增 input表單（二）
7 新增占位符焦點(diǎn)多選屬性
8 autocomplete屬性
輸入內(nèi)容自動(dòng)記錄，方便下次快速輸入
autocomplete必須滿足兩個(gè)條件才會(huì)起作用，一是必須有提交按鈕，二是必須給給他名字，名字是什么無所謂，例如上面“123”
9 內(nèi)容不能為空和獲得焦點(diǎn)屬性
required是提示輸入內(nèi)容不能為空
accesskey是一個(gè)快捷鍵屬性，如上字母“s”,意思是在頁面中按“ctrl+s”可以將光標(biāo)移至此文本框
10 表單綜合案例學(xué)生檔案
顯示效果如下（馬賽克不算）：
11 embed引入網(wǎng)上視頻
多媒體標(biāo)簽 embed：定義嵌入的內(nèi)容，embed可以用來插入各種多媒體，格式可以是Mid、Wav、AFF、AU、MP3等等。Url為音頻或視頻文件及其路徑，可以是相對(duì)路徑或絕對(duì)路徑
因?yàn)榧嫒菪詥栴}，我們這里只講解插入網(wǎng)絡(luò)視頻，后面H5會(huì)講解audio和video視頻多媒體。
12 播放音頻 audio
autoplay是自動(dòng)播放，controls是顯示播放器，Loop是循環(huán)次數(shù)
每個(gè)瀏覽器的顯示樣式有所不同，每個(gè)瀏覽器支持的音頻格式有所不同
Source可以提供多個(gè)音頻格式，以便兼容各種瀏覽器。
13 播放視頻 video
跟音頻播放用法一樣
看不懂的小伙伴不要?dú)怵H，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學(xué)習(xí)，每篇文章看三遍，一個(gè)月后，回過頭來看之前的文章就會(huì)感覺簡(jiǎn)單極了。
第一階段HTML5的所有章節(jié)都已結(jié)束，下篇文章將分享《第二階段 CSS3》小伙伴們不要錯(cuò)過喲！
?
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
