整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          為什么選擇HTML5Plus這《土土》的技術(shù)

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

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

          背景說明

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

          請注意,“先有 H5 版本”,然后想要轉(zhuǎn)成APP,不是從零開始哦。

          選型與說明

          其實參考的技術(shù)方案有很多,比如 React Native(Taro),Vue(UniAPP),甚至是 ionic、NativeScript 都簡單試過,當(dāng)然還有類似的 Cordova。

          其實像 React Native(Taro)、Vue(UniAPP)以及 NativeScript 被砍掉其實很簡單,背景就決定除非完全重構(gòu),否則這幾個方案就是浪費(fèi)生命,幾乎等于重寫一遍。這么說的原因有二:

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

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

          然后就是 ionic 與 Cordova 的排除原因,很簡單:文檔與環(huán)境。

          1、ionic 與 Cordova 的文檔在國內(nèi)網(wǎng)絡(luò)環(huán)境下不好找,出問題很難搞,尤其大概率我這個玩意兒要寫插件……我都寫插件了,那干脆上 OC 和 Java 算了。

          2、再就是環(huán)境,沒錯,這倆都需要 XCode 與 Android Studio 在你的設(shè)備上。雖說我是都有,但是我的目的很單純,就是把 H5 套殼啊,費(fèi)那么大勁干嘛?一點都不環(huán)保。

          剩下我還知道且用過的就是 html5plus 與 apicloud 了,后者已經(jīng)賣身就算了,只剩下 html5plus。

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

          關(guān)于過程中的坑分享

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

          下載——創(chuàng)建5+項目——把 H5 代碼整進(jìn)去——運(yùn)行即可。

          這里著重說說遇到的坑。

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

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

          H5 端的技術(shù)就是 three.js + video + 攝像頭,比較簡單,安卓瀏覽器兼容性良好,蘋果腎8沒問題,其他劉海設(shè)備沒測(后面打包成 APP 發(fā)現(xiàn)有點問題)。

          好了,可以說問題了:

          1、瀏覽器可以直接從 a 標(biāo)簽下載圖片,APP 不行,需要解決授權(quán)問題。

          2、蘋果設(shè)備默認(rèn)的 video 層級問題。

          3、iOS 設(shè)備在 APP 內(nèi) video 自動播放權(quán)限問題。

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

          上面幾個是比較坑的,就是那種想不到卻發(fā)生的……

          問題1,這個需要把原本 a 標(biāo)簽下載的 base64 內(nèi)容,通過原生的 bitmap 進(jìn)行轉(zhuǎn)換,最終再將 bitmap 存到相冊。

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

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

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

          還有就是一些具體的代碼怎么寫,比如如何獲取 Android 與 iOS 的權(quán)限狀態(tài)與申請權(quán)限,這種百度搜下就有了。

          請注意,還真得用百度……“土土”的,國內(nèi)還得是百度。

          總結(jié)

          其實現(xiàn)在用 H5 開發(fā)一些東西還是很簡單,畢竟很多功能 H5 基本都能實現(xiàn)了(不考慮兼容性的話),可以看下這個網(wǎng)站,我比較喜歡去,可以定期學(xué)習(xí)新東西,強(qiáng)烈推薦收藏:What Web Can Do Today

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

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

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

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

          優(yōu)點:超級簡單,是個前端就能做 APP,這一條就夠了!

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

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


          牽扯功能

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

          Show Me Code

          // 默認(rèn)截屏全屏
          const obj = {
           top: '0px',
           left: '0px',
           width: '100%',
           height: '100%'
          }
          // 動態(tài)獲取時間作為文明標(biāo)識
          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)相冊
           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
           });
           });
          }
          // 調(diào)用保存
          function clickSave() {
           save(function() {
           alert('保存成功,請前往相冊分享');
           })
          }
          

          都已經(jīng)在注釋里面,拿來即用。


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

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

          者 | Derek Yeung

          編輯 | Nodejs技術(shù)棧

          轉(zhuǎn)發(fā)鏈接:https://mp.weixin.qq.com/s/C3PUMDlQxbndar9oHXixWg


          主站蜘蛛池模板: 亚洲一区二区三区在线网站| 国产萌白酱在线一区二区| 亚洲一区二区精品视频| 内射女校花一区二区三区| 国产福利一区二区| 国产精品揄拍一区二区久久| 国偷自产一区二区免费视频| 高清无码一区二区在线观看吞精| 亚洲AV福利天堂一区二区三| 国产精品一区二区av不卡| 在线精品视频一区二区| 一区二区三区观看免费中文视频在线播放 | 亚洲一区二区三区高清不卡| 亚洲狠狠久久综合一区77777| 日韩人妻无码一区二区三区久久99| 一区二区手机视频| 一区二区国产在线播放| 一区二区三区在线视频播放| 高清一区二区三区| 精品国产一区二区三区AV性色| 国产一区在线播放| 国产伦精品一区二区三区四区| 国产人妖视频一区二区破除| 麻豆视频一区二区三区| 国产精品女同一区二区久久 | 久久久久人妻精品一区二区三区| 国产精品美女一区二区视频| 亚洲日韩激情无码一区| 久久精品一区二区三区不卡| 无码人妻精品一区二区三区在线| 肉色超薄丝袜脚交一区二区| 精品福利视频一区二区三区| 无码国产精品一区二区免费I6| 一本一道波多野结衣一区| 国内精品一区二区三区东京| 国产成人一区二区三中文| 麻豆一区二区三区精品视频| 亚洲欧美国产国产一区二区三区| 亚洲国产精品自在线一区二区| 蜜臀Av午夜一区二区三区| 波多野结衣在线观看一区|