為什么選擇HTML5Plus這《土土》的技術

改造一個項目上 Google Play 與 App Store 時候，選擇了 H5+，就是數字天堂、UniAPP、HBuilder 那家的技術方案。

這里總結下原因分享給大家做個參考，同時把相關的坑也跟大家說下，希望可以在某個時候幫到各位。

背景說明

選擇這個方案原因后來想想其實很簡單，就是這個應用是先有了 H5 版本，即移動端瀏覽器版本，然后想要復刻到 APP 端，在應用市場售賣。

請注意，“先有 H5 版本”，然后想要轉成APP，不是從零開始哦。

選型與說明

其實參考的技術方案有很多，比如 React Native（Taro），Vue（UniAPP），甚至是 ionic、NativeScript 都簡單試過，當然還有類似的 Cordova。

其實像 React Native（Taro）、Vue（UniAPP）以及 NativeScript 被砍掉其實很簡單，背景就決定除非完全重構，否則這幾個方案就是浪費生命，幾乎等于重寫一遍。這么說的原因有二：

1、H5 版本有的情況下，不論是 DOM 寫法，還是虛擬 DOM 的組件，都是不通用的，比如你無法把 div 直接當做 view 來用，同時也不能將 button 當做 button 用……

2、H5 的 API 與移動端不通用，比如 video 的 API，在 H5 與移動端根本就是兩個東西。

然后就是 ionic 與 Cordova 的排除原因，很簡單：文檔與環境。

1、ionic 與 Cordova 的文檔在國內網絡環境下不好找，出問題很難搞，尤其大概率我這個玩意兒要寫插件……我都寫插件了，那干脆上 OC 和 Java 算了。

2、再就是環境，沒錯，這倆都需要 XCode 與 Android Studio 在你的設備上。雖說我是都有，但是我的目的很單純，就是把 H5 套殼啊，費那么大勁干嘛？一點都不環保。

剩下我還知道且用過的就是 html5plus 與 apicloud 了，后者已經賣身就算了，只剩下 html5plus。

其實吧，這個“土土”的，還是意外的好用的。

關于過程中的坑分享

這玩意兒怎么用就不介紹了，基本有手就能用。

下載——創建5+項目——把 H5 代碼整進去——運行即可。

這里著重說說遇到的坑。

對了，先看下原來的 H5 效果，避免不知道是干嘛的。

簡單來說，就是通過瀏覽器（或 APP 內置瀏覽器）加載 3D 模型，同時調用攝像頭的圖像，將 3D 模型與攝像頭的拍攝一起繪制出一張圖片，用來演示用。比如做工程的工程模型，在現場比劃比劃就可以大概看出來效果，不需要把場景也建模了。嗯，大概就這么個東西。

H5 端的技術就是 three.js + video + 攝像頭，比較簡單，安卓瀏覽器兼容性良好，蘋果腎8沒問題，其他劉海設備沒測（后面打包成 APP 發現有點問題）。

好了，可以說問題了：

1、瀏覽器可以直接從 a 標簽下載圖片，APP 不行，需要解決授權問題。

2、蘋果設備默認的 video 層級問題。

3、iOS 設備在 APP 內 video 自動播放權限問題。

4、iOS 設備加載本地路徑文件問題。

上面幾個是比較坑的，就是那種想不到卻發生的……

問題1，這個需要把原本 a 標簽下載的 base64 內容，通過原生的 bitmap 進行轉換，最終再將 bitmap 存到相冊。

問題2，先說問題是啥樣的，就是 iOS 會把 video 全屏，且層級賊高，與上面圖完全不同，就只能看到一個帶有“直播”字樣的 video。解決方案很簡單，給 video 標簽添加“webkit-playsinline playsinline”屬性，即可要求同層渲染。

問題3，這個就是老生常談的問題了，屬于想不到，但是遇到有會“果然如此”的問題。沒啥好辦法，不用原生化處理，就只能產品層面變更，所以給加上了“播放”與“停止”的按鈕……

問題4，這個最粗暴，直接把本地地址全部換成遠程 URL 就好了，因為本來就是讓用戶自己傳遠程 URL 的，之前是想要本地演示加載快，所以用了本地地址。

還有就是一些具體的代碼怎么寫，比如如何獲取 Android 與 iOS 的權限狀態與申請權限，這種百度搜下就有了。

請注意，還真得用百度……“土土”的，國內還得是百度。

總結

其實現在用 H5 開發一些東西還是很簡單，畢竟很多功能 H5 基本都能實現了（不考慮兼容性的話），可以看下這個網站，我比較喜歡去，可以定期學習新東西，強烈推薦收藏：What Web Can Do Today

別的沒了，歡迎大家溝通方案，我是被坑的挺難受的，尤其是 iOS……

謝 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 同樣建議如此。

牽扯功能

BitMap 對象截屏
在 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，希望幫到你。謝謝。

者 | Derek Yeung

編輯 | Nodejs技術棧

轉發鏈接：https://mp.weixin.qq.com/s/C3PUMDlQxbndar9oHXixWg

在線咨詢

上一篇：記事本編寫的HTML亂碼，如何解決？
下一篇：HTML初學者入門學習教程筆記手冊第二部分