亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

html5打包成app應用的原理是什么?

html5打包成app應用的原理是什么?

翻閱古今 2019-05-09 08:13:17
在用cordova把vue打包安卓APP,挺好奇這中間的原理的,不知道有哪些文檔資料可以查閱,現在有好多這種工具,原理都是一樣的嗎?比如React-Native,NativeScript,weex這些
查看完整描述

2 回答

?
搖曳的薔薇

TA貢獻1793條經驗 獲得超6個贊

界面呈現大體分兩種:
用html+css繪制頁面,運行原理是打包工具創建一個只有一個或多個Activity的安卓應用,這個Activity上就只有一個WebView來顯示頁面。就相當于那個app實質上只是個瀏覽器,只能看你寫的頁面的瀏覽器;
類似RN這種用jsx+類css描述界面,運行原理是打包工具創建一個安卓應用,界面上的控件元素是通過你前面的描述來要求原生層創建對應樣式的原生控件。
一個很容易區分的方法是,打開手機的設置-開發人員設置-顯示布局邊界,然后打開你想查看的app,如果整個界面上只有一個大框框,里面的編輯框啦、按鈕啦這些元素都沒有框,那么就是第一種;如果幾乎每個元素都有五顏六色的框框住,且你知道它并不是直接原生開發的,那么就屬于第二種。
這兩種都是用js來編寫邏輯,都用到了Bridge這種概念來打通原生(native)和js層的通訊,包括下面這些用途:
告訴native要畫一個怎樣的控件(RN這種的)
native告訴js有什么東西被點擊了之類的(同樣是RN這種的)
告訴native需要調用什么native方法(兩種都會)
                            
查看完整回答
反對 回復 2019-05-09
?
FFIVE

TA貢獻1797條經驗 獲得超6個贊

NativeScript我用過,其他聽過但是沒用過,但我覺的原理應該差不多,簡單給你說說ns的原理。
如果你使用過ns的話,你會發現其實和開發Angularwebapp基本沒什么區別,無非是很多空間組件變成了ns提供的那些。在Angular中有一個叫做platform的概念,大體的架構思想是這樣的,就是你在寫Component的時候,這實際是一個高度抽象的概念,它已與組件所具體渲染的環境(platform)解耦,同一個Component在不同的platform下的渲染邏輯和編譯邏輯不相同,但表現形式相同,舉例來說:
通常開發web程序,使用的都是platform-browser,它會將組件編譯為瀏覽器識別的css、js、html等文件
github上有一些項目提供了platform-canvas,它會將組件編譯為在某個canvas元素上渲染的腳本
之前我看過一篇文章,文章中實現了platform-momery,大體的功能就是將Angular組件編譯為了只在內存中渲染并運行的platform
因此,對于ns來說,它就是要實現這么一個platform,算是一座橋,入口端是Angular組件,出口端是不同類型的移動端代碼,要了解中間這種轉換和編譯的過程,需要學習一些編譯原理的知識,最起碼要明白AST這個概念,這個概念其實在各種js的編譯工具中,經常被提起,比如babel、webpack等等。同理的,對于react-native、weex等,肯定內部原理都是這樣的,就是要實現這么一座橋,將react或者vue與移動端的代碼連接起來。
當然,這只是其中的一種實現方案,還有類似使用webview來實現的,這個我接觸的不多,就不說了,好像ionic就是這種套路??傊罱K的結果就是,只通過js寫邏輯,對于渲染邏輯的話,交給庫來實現。
我覺的要想查閱相關資料,直接學習其中的某個庫就好了,或者看看編譯原理。如有錯誤,還望指正。
                            
查看完整回答
反對 回復 2019-05-09
  • 2 回答
  • 0 關注
  • 615 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號