hbuildx打包成apk_基于HBuilder将H5站点打包成app
整理說(shuō)明
本文介紹了基于HBuilderX,將自主開(kāi)發(fā)的H5網(wǎng)站，使用云打包app的方法，以及打包app過(guò)程中，遇到的問(wèn)題和解決方法。
在HBuilderX中開(kāi)發(fā)的應(yīng)用，或者第三方的h5應(yīng)用，可以創(chuàng)建項(xiàng)目，提交到云端打包生成apk(Android平臺(tái))和ipa(iOS平臺(tái))。如果本地配置好對(duì)應(yīng)的原生開(kāi)發(fā)環(huán)境，也可以使用本地打包。
HBuilder介紹
HBuilder是DCloud(數(shù)字天堂)推出的一款支持HTML5的Web開(kāi)發(fā)IDE。 HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。它基于Eclipse，所以順其自然地兼容了Eclipse的插件。
官方網(wǎng)站:
http://www.dcloud.io/
很多用戶關(guān)心HBuilderX和HBuilder的對(duì)比，如下：
HX的優(yōu)勢(shì)：
HX性能更強(qiáng)，啟動(dòng)速度、大文檔打開(kāi)速度、代碼提示速度均極為流暢。
HX的VUE語(yǔ)法提示、ES6語(yǔ)法提示支持更強(qiáng)大，應(yīng)該是最強(qiáng)悍的vue提示工具。
HX有內(nèi)置終端，對(duì)于現(xiàn)代編譯型語(yǔ)言的開(kāi)發(fā)提供更強(qiáng)的支持。
HX支持uni-app、小程序開(kāi)發(fā)、快應(yīng)用開(kāi)發(fā)
HX的markdown、json方面秒殺其他開(kāi)發(fā)工具。
HX新增了智能雙擊、更完善的多光標(biāo)處理，可為極客提供更高效的操作。
HBuilder也有HBuilder的優(yōu)勢(shì)，如果開(kāi)發(fā)者使用jquery、php等技術(shù)棧，目前還是建議使用HBuilder。HBuilderX對(duì)這2塊技術(shù)的支持不如HBuilder。
當(dāng)然開(kāi)發(fā)者也可以多工具并用，在使用HBuilder有優(yōu)勢(shì)的場(chǎng)景時(shí)切回HBuilder。
本文介紹的打包app，使用的是HBuilderX。
打包方法
創(chuàng)建項(xiàng)目
配置項(xiàng)目
將做好的項(xiàng)目往里面扔
或者在Index.html里面添加自動(dòng)跳轉(zhuǎn)，這樣一打開(kāi)App就會(huì)直接跳到你的項(xiàng)目。
根據(jù)應(yīng)用，對(duì)app進(jìn)行基礎(chǔ)配置，包括：基礎(chǔ)配置、圖標(biāo)配置、啟動(dòng)圖配置等，對(duì)于sdk和模塊權(quán)限配置等，沒(méi)有用到可以不進(jìn)行配置。
至此就差打包啦~
打包方法
至此，已經(jīng)完成h5，加殼打包app的工作。
證書配置說(shuō)明
ios：
首先要成為蘋果開(kāi)發(fā)者(需要收費(fèi)，免費(fèi)的開(kāi)發(fā)者使用受限)，申請(qǐng)?zhí)O果開(kāi)發(fā)者證書和發(fā)布證書。開(kāi)發(fā)者證書的證書描述文件要配置授權(quán)的設(shè)備的UDID，發(fā)布證書用于發(fā)布到apple store使用。
參考:ios證書申請(qǐng)指南
android:
可以直接使用，dcloud的公有證書即可。
問(wèn)題解決
網(wǎng)絡(luò)不好出錯(cuò)誤頁(yè)
可以通過(guò)以下方法自定義Webview的404等錯(cuò)誤頁(yè)面。
設(shè)置應(yīng)用全局默認(rèn)錯(cuò)誤頁(yè)面
5+App和wap2app
在應(yīng)用的manifest.json文件的”plus”->”error”節(jié)點(diǎn)的url屬性可配置自定義錯(cuò)誤頁(yè)面替換默認(rèn)的錯(cuò)誤頁(yè)面。
打開(kāi)manifest.json文件，切換到代碼視圖，添加以下數(shù)據(jù)：
"plus": {
"error": {
"url": "error.html"
},
//..
},
//..
// 獲取錯(cuò)誤信息
document.addEventListener("error",function(e){
var url = e.url; // 錯(cuò)誤頁(yè)面的url地址
var href = e.href; // 錯(cuò)誤頁(yè)面的完整路徑(包括完整的協(xié)議頭)
},false);
參考:
https://ask.dcloud.net.cn/article/73
https://blog.csdn.net/qq_34400736/article/details/90267920
QQ第三方登錄，回不了app。
5+ APP中處理urlscheme啟動(dòng)傳遞的參數(shù):
在其它應(yīng)用中通過(guò)href調(diào)用Url Scheme傳遞過(guò)來(lái)的值，可以通過(guò)plus.runtime.arguments獲取
其值為完整的urlscheme字符串，如上面href的值啟動(dòng)應(yīng)用后獲取的plus.runtime.arguments值為“test://abc”
代碼示例如下：
document.addEventListener('plusready',function(){
checkArguments();
},false);
// 判斷啟動(dòng)方式
function checkArguments(){
console.log("plus.runtime.launcher: "+plus.runtime.launcher);
var args= plus.runtime.arguments;
if(args){
// 處理args參數(shù)，如直達(dá)到某新頁(yè)面等
}
}
// 處理從后臺(tái)恢復(fù)
document.addEventListener('newintent',function(){
console.log("addEventListener: newintent");
checkArguments();
},false);
參考:
https://www.jianshu.com/p/475b398a117d
https://ask.dcloud.net.cn/article/409
狀態(tài)欄問(wèn)題
由于沉浸式延伸的問(wèn)題，不使用狀態(tài)蘭透明，參考:
https://www.cnblogs.com/green-jcx/p/8945872.html
返回鍵退出應(yīng)用的問(wèn)題
解決打包成App后，單擊 手機(jī)返回鍵退出應(yīng)用的bug。
document.addEventListener('plusready', function() {
var webview = plus.webview.currentWebview();
var first = null;
plus.key.addEventListener('backbutton', function() {
webview.canBack(function(e) {
if (e.canBack) {
webview.back();
} else {
//webview.close(); //hide,quit
//plus.runtime.quit();
//首頁(yè)返回鍵處理
//處理邏輯：1秒內(nèi)，連續(xù)兩次按返回鍵，則退出應(yīng)用；
//首次按鍵，提示‘再按一次退出應(yīng)用’
if (!first) {
first = new Date().getTime();
// toast('雙擊返回鍵退出應(yīng)用'); //調(diào)用自己寫的吐絲提示 函數(shù)
console.log('再按一次退出應(yīng)用');
plus.nativeUI.toast("雙擊退出", {
duration: 'short'
}); //通過(guò)H5+ API調(diào)用Android 上的toast 提示框
setTimeout(function() {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1400) {
plus.runtime.quit();
}
}
}
})
}, false);
/*沉浸式延伸的問(wèn)題:狀態(tài)欄的高度被忽略*/
// plus.webview.currentWebview().setStyle({
// statusbar:{background:'#ff0000'},top:0,bottom: 0
// });
});
注意：需要在項(xiàng)目的h5頁(yè)面都添加這個(gè)方法，可以考慮添加到公共模塊里面。
上面這段代碼：我參考的文章和文檔鏈接：
https://blog.csdn.net/qq_25252769/article/details/76913083
這個(gè)是 H5+ API 的(通過(guò)js調(diào)取Android等平臺(tái)的原生方法)學(xué)習(xí)鏈接：http://ask.dcloud.net.cn/docs/
其它
參考
http://www.dcloud.io/
https://blog.csdn.net/hrf368246980/article/details/81202345
https://www.cnblogs.com/taohuaya/p/10263519.html
https://www.jianshu.com/p/c1973aacc774
總結(jié)
以上是生活随笔為你收集整理的hbuildx打包成apk_基于HBuilder将H5站点打包成app的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Taro+react开发（86):资源文
- 下一篇： 3- 快速上手Linux玩转典型应用-