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

簡單說下 HTML5Plus，與 Cordova（含 ionic）類似，是 js 寫了中間層協議，使得打包在 APP 中的 webview 組件可以通過暴露出來的 api 接口調用原生的能力，比如頁面棧控制，拍照等等。

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

優點：超級簡單，是個前端就能做 APP，這一條就夠了！

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

對了，附帶一個小 tip：iOS 上架的 APP 必須有調用 iOS 系統接口的操作（哪怕僅僅是陀螺儀），否則被拒。Android 同樣建議如此。

牽扯功能

1. BitMap 對象截屏
2. 在 BitMap 對象截屏回調中保存到相冊（需要同意授權）

Show Me Code

// 默認截屏全屏
const obj = {
 top: '0px',
 left: '0px',
 width: '100%',
 height: '100%'
}
// 動態獲取時間作為文明標識
function getDateStr() {
 return String(Date.parse(new Date()));
}
/**
 * @params {function} successCB 必填的成功回調
 * @params {function} errorCB 失敗回調
 * @params {string} fileName 文件名
 * @params {string} imgID 圖片 id
 * @params {boolean} overwrite 是否覆蓋已有文件
 * @params {string} format 格式
 * @params {number} quality 成圖質量
 * @params {object} clip 截屏區域
 */
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) {
 //保存到系統相冊
 plus.gallery.save(i.target, function(details) {
 //銷毀Bitmap圖片
 bitmap.clear();
 successCB({
 success: 'success',
 details,
 });
 }, function(e) {
 //銷毀Bitmap圖片
 bitmap.clear();
 errorCB({
 error: '圖片保存至相冊失敗',
 details: e
 });
 });
 }, function(e) {
 bitmap.clear();
 errorCB({
 error: '圖片保存失敗',
 details: e
 });
 });
 }, function(e) {
 errorCB({
 error: '截屏繪制失敗',
 details: e
 });
 });
}
// 調用保存
function clickSave() {
 save(function() {
 alert('保存成功，請前往相冊分享');
 })
}

都已經在注釋里面，拿來即用。

建議接觸 HTML5Plus 的同學保存一份，以備不時之需。

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

者：日照工校/徐鵬

手機瀏覽器能用來干什么？看資訊、看圖片、看小說、看視頻等等。作為上網必備工具，手機瀏覽器對于網絡體驗的影響不可忽視。隨著網絡的快速發展，大家對于瀏覽器的要求也越來越高，比如支持HTML5頁面版。由于手機瀏覽器的內核和性能存在差異，造成不同的HTML5頁面瀏覽有不同的體驗。

近日無意中看到一個款800手機瀏覽器，在體驗過程中，發現不論是在游戲體驗還是軟件特效上，都完全體現HTML5效果，為了讓大家有更直觀的感受，就先試用了一番。

小知識：

HTML5名詞解釋：原生支持多媒體功能，不再依賴瀏覽器插件（例如 Adobe Flash player， Windows Media Player），便可實現跨平臺在線影音播放。同時 HTML5 還可以讓網頁調用手機的應用數據從而實現很酷的功能。另外，HTML5 新增了離線存儲，一次聯網加載資源，長久離線訪問。廣義的 HTML5 技術還包括 CSS3，JavaScript 以及支持 SVG 等。

在試用過程中，首先引起筆者注意的，還是800手機瀏覽器的界面化，所謂細節決定產品的成敗，先來看看它的到底是什么樣子。

800手機瀏覽器啟動后，從整體上看到的，就是集成了常用的搜索引擎和常用網站，而且還可以添加新的常用頁面。

跑分測試

800手機瀏覽器主要是面向智能手機的安卓瀏覽器，全面支持 HTML5。但是如果要成為一款真正的支持HTML5的手機瀏覽器，僅有支持還是不夠的，更多的需要完全與HTML5的融合，還是先看看它的跑分結果吧：

注：測試網站Html5test.com，它是一個非常具有權威性的測試HTML5性能的網站，無論是PC端還是手機端的瀏覽器，都能夠快速檢測出當前瀏覽器對HTML5頁面各項元素對于HMTL5的支持情況。

在HTML5 測試中，800手機瀏覽器得分高達驚人466分，800手機瀏覽器的得分完全可以媲美PC端瀏覽器的表現，這也大大提升了它對HTML5特效效果以及游戲的支持。

跑分測試結果已經可以說明一個很重要的方面，當然除這些數據外，本身具有HTML5的特性也是非常重要的，800手機瀏覽器還給我們很多HTML5體驗，展現了一種對于HMTL5的一種融合以及更深的理解。

視頻播放

提起HTML5，很多人都會想到視頻播放。因為它完全不需要任何的插件支持，只要是瀏覽器支持即可，目前主流的視頻網站都早已經實現，他們完全支持HTML5的視頻直接播放。目前雖然還支持Flash插件，但是它會大大的增加電量消耗和性能的損耗，同時Adobe公司也宣布會停止Flash在手機端的更新。

現在，來看看800手機瀏覽器對于視頻的表現：

HTML5視頻體驗網站截圖

逼真的靈動效果，完全沒有卡頓的現象

800手機瀏覽器在播放過程中沒有出現視頻失真或者不流暢的情況。

CCS3特性

除此之外，800手機瀏覽器還展示了幾種HTML5獨有特性，比較代表性的有CSS特性等。

CCS3是CSS語言的新版，也是一個全新時代的技術，它可以給你的圖片添加圓角，可以讓你的圖片具有陰影特效，還可以打造一個矢量圖的效果。

游戲體驗

800手機瀏覽器不僅僅帶來了一些軟件上的體驗，還給我們的帶來了很多游戲上的體驗，來看看800手機瀏覽器的游戲效果如何吧。

這款游戲屬于一個網絡游戲，支持觸摸反饋，在試玩過程中，游戲的流暢度和直接下載游戲沒有太大的差別。

總結：

800手機瀏覽器在HMTL5上表現無懈可擊，給我留下很深刻的印象。它不僅僅表現在跑分測試數據上，更多的是表現在對于HTML5的融合上，是一款真正的HTML5瀏覽器。

瓜播放器對于手機的適配上做的不錯。 西瓜播放器是 字節跳動出品的 html5 播放器，被應用在了很多場景如：抖音、西瓜視頻、火山視頻等頭條系產品中。

視頻支持 MP4、HLS、FLV、MPEG-DASH。支持畫中畫、倍速播放、截圖等功能具體可以自己看官方文檔

官網

https://h5player.bytedance.com/generate/