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