謝 DCloud 社區(qū)原作者（1091656813@qq.com：http://ask.dcloud.net.cn/article/13494），本人做了一點(diǎn)代碼精簡(jiǎn)。

簡(jiǎn)單說(shuō)下 HTML5Plus，與 Cordova（含 ionic）類似，是 js 寫(xiě)了中間層協(xié)議，使得打包在 APP 中的 webview 組件可以通過(guò)暴露出來(lái)的 api 接口調(diào)用原生的能力，比如頁(yè)面棧控制，拍照等等。

適用于快速原型開(kāi)發(fā) APP，性能要求不是那么高的 APP 開(kāi)發(fā)（90% 的 APP 性能要求都是夠的）。

優(yōu)點(diǎn)：超級(jí)簡(jiǎn)單，是個(gè)前端就能做 APP，這一條就夠了！

缺點(diǎn)：1. 依賴自家 IDE，之前是 HBuilder，現(xiàn)在推新版 HBuilderX（Vue 官網(wǎng)也投放了廣告）；2. 社區(qū)環(huán)境差，非大廠不開(kāi)源基本都這樣（好在自家迭代還算迅速）；3. 自家 UI 框架用的還是 iOS 樣式，萬(wàn)年更新一次……

對(duì)了，附帶一個(gè)小 tip：iOS 上架的 APP 必須有調(diào)用 iOS 系統(tǒng)接口的操作（哪怕僅僅是陀螺儀），否則被拒。Android 同樣建議如此。

牽扯功能

1. BitMap 對(duì)象截屏
2. 在 BitMap 對(duì)象截屏回調(diào)中保存到相冊(cè)（需要同意授權(quán)）

Show Me Code

// 默認(rèn)截屏全屏
const obj = {
 top: '0px',
 left: '0px',
 width: '100%',
 height: '100%'
}
// 動(dòng)態(tài)獲取時(shí)間作為文明標(biāo)識(shí)
function getDateStr() {
 return String(Date.parse(new Date()));
}
/**
 * @params {function} successCB 必填的成功回調(diào)
 * @params {function} errorCB 失敗回調(diào)
 * @params {string} fileName 文件名
 * @params {string} imgID 圖片 id
 * @params {boolean} overwrite 是否覆蓋已有文件
 * @params {string} format 格式
 * @params {number} quality 成圖質(zhì)量
 * @params {object} clip 截屏區(qū)域
 */
function save(successCB, errorCB = () => {}, fileName = getDateStr(), imgID = getDateStr(),
 overwrite = true, format = 'png', quality = 50, clip = obj) {
 const cw = plus.webview.currentWebview();
 const bitmap = new plus.nativeObj.Bitmap(imgID);
 //繪制截圖
 cw.draw(bitmap, function() {
 // 保存Bitmap圖片
 bitmap.save('_doc/' + fileName + '.' + format, {
 overwrite,
 format,
 quality,
 clip
 }, function(i) {
 //保存到系統(tǒng)相冊(cè)
 plus.gallery.save(i.target, function(details) {
 //銷毀Bitmap圖片
 bitmap.clear();
 successCB({
 success: 'success',
 details,
 });
 }, function(e) {
 //銷毀Bitmap圖片
 bitmap.clear();
 errorCB({
 error: '圖片保存至相冊(cè)失敗',
 details: e
 });
 });
 }, function(e) {
 bitmap.clear();
 errorCB({
 error: '圖片保存失敗',
 details: e
 });
 });
 }, function(e) {
 errorCB({
 error: '截屏繪制失敗',
 details: e
 });
 });
}
// 調(diào)用保存
function clickSave() {
 save(function() {
 alert('保存成功，請(qǐng)前往相冊(cè)分享');
 })
}

都已經(jīng)在注釋里面，拿來(lái)即用。

建議接觸 HTML5Plus 的同學(xué)保存一份，以備不時(shí)之需。

這個(gè)是這兩天遇到的小 tip，希望幫到你。謝謝。

TML5像是互聯(lián)網(wǎng)行業(yè)扔下的一顆炸彈，有些人還未反應(yīng)過(guò)來(lái)，原先專注的領(lǐng)域也許就將面臨徹底的革新。比如像前幾年瘋狂甚至有點(diǎn)野蠻成長(zhǎng)的App。雖然HTML5從出現(xiàn)到去年標(biāo)準(zhǔn)塵埃落定，一直在爭(zhēng)議中曲折發(fā)展，但是各種H5頁(yè)面的推廣以及H5小游戲在不斷的涌現(xiàn)，以HTML5應(yīng)用為重心的領(lǐng)域也在吸引包括互聯(lián)網(wǎng)巨頭的不斷靠攏，甚至有風(fēng)投也在此領(lǐng)域頻頻出手，看懂HTML5的未來(lái)，會(huì)發(fā)現(xiàn)一個(gè)新的移動(dòng)互聯(lián)網(wǎng)黃金時(shí)代就要到來(lái)。

巨頭，兩手都抓，兩手都硬

對(duì)于中國(guó)的互聯(lián)網(wǎng)巨頭來(lái)說(shuō)，現(xiàn)在在做的兩件事，一是爭(zhēng)搶移動(dòng)入口的同時(shí)既布局原生應(yīng)用，一是開(kāi)放Html5，并且兩手都在抓且兩手都硬，

1、騰訊

騰訊，作為掌控著國(guó)內(nèi)最大的移動(dòng)入口平臺(tái)公司，正在通過(guò)微信公眾平臺(tái)開(kāi)始構(gòu)建一個(gè)強(qiáng)大的輕應(yīng)用平臺(tái)。騰訊一直都在努力為那些欠缺開(kāi)發(fā)能力的公眾賬號(hào)，提供一個(gè)簡(jiǎn)單、標(biāo)準(zhǔn)化的解決方案——人人都能開(kāi)發(fā)“微信應(yīng)用”，這吸引了無(wú)數(shù)的企業(yè)和用戶進(jìn)來(lái)。

日前，對(duì)于很多的企業(yè)以及移動(dòng)開(kāi)發(fā)者們來(lái)說(shuō)，最激動(dòng)人心的一件事情莫過(guò)于微信JS SDK的發(fā)布。

微信JS-SDK包提供的11類接口集，開(kāi)發(fā)者不僅能夠在網(wǎng)頁(yè)上使用微信本身的拍照、選圖、語(yǔ)音、位置等基本能力，還可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，這也意味著微信公眾平臺(tái)將更加開(kāi)放，微信公眾號(hào)的可定制性更加靈活。

對(duì)用戶來(lái)說(shuō)，在微信中看到的html5不再局限于簡(jiǎn)單的頁(yè)面展示，而是一個(gè)功能較全面的App，它包含更多的互動(dòng)功能。對(duì)于第三方開(kāi)發(fā)者來(lái)說(shuō)，舍棄原生應(yīng)用，專注做好基于微信的html5應(yīng)用，比以往時(shí)候都更容易。而對(duì)企業(yè)來(lái)說(shuō)，微信營(yíng)銷將變得更加輕松，企業(yè)與用戶之間的對(duì)接將更加容易。

此外，QQ瀏覽器作為國(guó)內(nèi)第二大瀏覽器，網(wǎng)頁(yè)應(yīng)用的開(kāi)放也在如火如荼地進(jìn)行當(dāng)中。

不過(guò)與此同時(shí)，騰訊也在努力打造一個(gè)強(qiáng)大應(yīng)用分發(fā)平臺(tái)——應(yīng)用寶，并通過(guò)綁定微信、手機(jī)QQ、瀏覽器、騰訊手機(jī)衛(wèi)士等全平臺(tái)來(lái)實(shí)現(xiàn)應(yīng)用分發(fā)。今年騰訊在應(yīng)用寶上的發(fā)力讓騰訊在移動(dòng)應(yīng)用分發(fā)的市場(chǎng)份額已經(jīng)上升到了22%，跟360幾乎不相上下。

2、百度

而百度呢，通過(guò)收購(gòu)了91手機(jī)助手、安卓市場(chǎng)以及自家推出的百度手機(jī)衛(wèi)士、百度搜索等，百度在移動(dòng)應(yīng)用分發(fā)上已經(jīng)確立了老大的位置。

但是從百度的戰(zhàn)略發(fā)展來(lái)看，百度更重視html5平臺(tái)的搭建。而且百度在很早之前就已經(jīng)推出了“輕應(yīng)用”這個(gè)概念，百度的這個(gè)輕應(yīng)用本質(zhì)就是html5，并向開(kāi)發(fā)者和企業(yè)推出了各種技術(shù)開(kāi)放接口。

與此同時(shí)，百度通過(guò)百度瀏覽器、百度搜索等為這些企業(yè)和用戶提供導(dǎo)流，促使讓用戶保持原有的搜索習(xí)慣，并推出了為企業(yè)服務(wù)的直達(dá)號(hào)。

3、360

360，同樣一方面通過(guò)360手機(jī)助手和360手機(jī)衛(wèi)士在推動(dòng)原生應(yīng)用的發(fā)展，另一方面通過(guò)360搜索和360瀏覽器在加速html5的布局。尤其是在2014年，UC宣布進(jìn)軍移動(dòng)搜索之時(shí)，似乎刺激到了360，360也開(kāi)始意識(shí)到了未來(lái)移動(dòng)搜索和瀏覽器入口的重要性，并在去年開(kāi)始大力推360手機(jī)搜索和360手機(jī)瀏覽器。

4、搜狐

1月15日，在手機(jī)搜狐網(wǎng)3.0發(fā)布以及html5技術(shù)研討會(huì)上，搜狐透露，手機(jī)搜狐網(wǎng)3.0就是基于html5技術(shù)。張朝陽(yáng)曾在個(gè)人微博里大力推薦QQ瀏覽器和騰訊X5瀏覽器，其實(shí)張朝陽(yáng)此舉無(wú)非就是想讓用戶更多的使用瀏覽器，而通過(guò)html5技術(shù)搭建的手機(jī)搜狐網(wǎng)內(nèi)容則能夠更好地在瀏覽器上面展示。

大家要知道，搜狐新聞客戶端可是搜狐舉全公司之力打造的一款新聞客戶端，如今張朝陽(yáng)卻在推動(dòng)html5生態(tài)圈的形成，足見(jiàn)張朝陽(yáng)已深知html5大勢(shì)的來(lái)臨。

5、阿里巴巴

全球最大的在線支付平臺(tái)，支付寶也正在通過(guò)服務(wù)窗為企業(yè)和用戶之間提供一個(gè)橋梁，而這個(gè)橋梁的應(yīng)用也正是基于支付寶內(nèi)部的html5。

作為國(guó)內(nèi)最大的移動(dòng)瀏覽器，UC瀏覽器同樣也把html5的開(kāi)放放在了重心。目前，UC網(wǎng)頁(yè)應(yīng)用中心的月活躍用戶已經(jīng)超過(guò)了6000萬(wàn)，收錄了20大類超過(guò)數(shù)萬(wàn)款的輕應(yīng)用，并且國(guó)內(nèi)超過(guò)90%的應(yīng)用開(kāi)發(fā)者都會(huì)通過(guò)UC網(wǎng)頁(yè)應(yīng)用中心來(lái)推廣他們的輕應(yīng)用。

不僅如此，UC神馬搜索也正在開(kāi)始努力打通和輕應(yīng)用的無(wú)縫連接，實(shí)現(xiàn)為輕應(yīng)用與用戶對(duì)接和開(kāi)放更多的流量入口。

從移動(dòng)互聯(lián)網(wǎng)以及巨頭們的戰(zhàn)略發(fā)展變化來(lái)看，不管是360手機(jī)衛(wèi)士、百度手機(jī)衛(wèi)士、豌豆莢還是騰訊手機(jī)衛(wèi)士，移動(dòng)應(yīng)用分發(fā)更多的都只是在為手機(jī)游戲、手機(jī)日常必備工具提供入口和導(dǎo)流。

而對(duì)于巨頭們來(lái)說(shuō)，打造一個(gè)真正強(qiáng)大的移動(dòng)入口平臺(tái)，html5已經(jīng)變得越來(lái)越重要。同樣對(duì)于企業(yè)和很多開(kāi)發(fā)者們來(lái)說(shuō)，借助巨頭的平臺(tái)，開(kāi)發(fā)更適合該平臺(tái)的輕應(yīng)用能為自己帶來(lái)更多的流量和資源，實(shí)現(xiàn)對(duì)客戶更好的對(duì)接。

風(fēng)投涌入，HtmL5 下一個(gè)風(fēng)口

早在2010年，專注于HTML5的公司磊友科技獲得了創(chuàng)新工場(chǎng)的天使投資，但當(dāng)時(shí)HTML5本身有一些缺陷，網(wǎng)絡(luò)環(huán)境很差，整個(gè)智能機(jī)的環(huán)境也尚不成熟，做HTML5的公司也只能選擇轉(zhuǎn)型了。然而，去年11月，html5研發(fā)引擎Egret獲得了小米1000萬(wàn)美元的融資，今年 1月21日，創(chuàng)新工場(chǎng)再次投資千萬(wàn)級(jí)人民幣于HTML5 領(lǐng)域的火速輕應(yīng)用。來(lái)自劉曠的獨(dú)家消息，同樣一直在堅(jiān)守H5陣營(yíng)的云適配，也正被推升至投資人關(guān)注的焦點(diǎn)，目前將完成該領(lǐng)域內(nèi)一筆更大的融資。

HTML5 的發(fā)展路途雖然曲折，但是堅(jiān)持并且最后成功的人總會(huì)看到常人看不到視角。 “HTML5的未來(lái)是我一直堅(jiān)信的，他也絕對(duì)不是我們只看到的網(wǎng)頁(yè)那么簡(jiǎn)單，他帶來(lái)的改變可能是顛覆性的。” 原微軟瀏覽器核心研發(fā)成員陳本峰說(shuō)。“比如，瀏覽器這個(gè)概念將會(huì)變得完全不同了，未來(lái)我們需要講 WebView，而不是Browser，用戶未來(lái)只要找到一個(gè)H5網(wǎng)頁(yè)內(nèi)容聚合入口，無(wú)需下載便能輕松獲取各種應(yīng)用信息。那如何才能加速這個(gè)環(huán)境的到來(lái)， 這就是我們現(xiàn)在開(kāi)發(fā)的跨屏前端框架Amaze UI 在為大家做的。

此外，云適配所推出的Amaze UI框架，以移動(dòng)優(yōu)先，免費(fèi)提供豐富Web組件，來(lái)讓開(kāi)發(fā)者輕松進(jìn)入html5領(lǐng)域，上線幾個(gè)月就已經(jīng)沖上最火爆的國(guó)產(chǎn)開(kāi)源軟件前十，這也許也是他被風(fēng)投關(guān)注的重要原因之一。

不管是巨頭之間的爭(zhēng)奪，還是風(fēng)投的涌入，我們都可以看出html5給創(chuàng)業(yè)者們帶來(lái)了更多的機(jī)會(huì)，Html5時(shí)代的到來(lái)將會(huì)對(duì)整個(gè)移動(dòng)互聯(lián)網(wǎng)格局產(chǎn)生巨大的影響，也將引發(fā)一場(chǎng)新的變革。

作者：劉曠，購(gòu)團(tuán)邦資訊創(chuàng)始人，微信公眾號(hào)：bangkeji