關於混合開發中的那點破事
跟大家分享一個小故事,前些年H5還不是盛行的年代,客戶要求我們使用H5來寫一款婚慶類的app,怎麼辦呢?
涼拌!開干。(^_?)☆
相信你也看過或者聽過這種的開發模式叫做----混合開發。我們現在的主流開發主要有webapp、nativeapp、hybridapp。ヾ(??)ノ
先將應用寫成了一個手機網站,將項目放在了伺服器上,跑起來沒問題,剩下最難的一步,將項目使用android和ios進行打包。ヾ(°?°)??
看遍千萬API,謀得一webview,這下高興了。開啟了自己的「hello world」之旅。Webview作為android或者ios的原生組件,對內使一個組件,對外,特別是對我們的js而言就是一個瀏覽器。
好傢夥,嗖嗖的,hello world就跑起來了,然後直接將自己的項目與android和ios整合。整合也是一點問題沒有。(雖說沒有消息的消息是最好的消息,但是也是最大的壞消息的根源,從此我埋下了一個大大的坑ヾ(=?ω?=)o)
我們如何將網頁顯示在webview中呢?可以通過loadUrl的方式進行載入。
它可以載入本地的地址,也可以載入遠程的網址,哈哈,自己的一個應用可以集成所有的應用啦。就像當年的https://www.hao123.com/一樣,
媽媽再也不用擔心我找不到應用啦,有木有。Σ┗(@ロ@;)┛
Demo畢竟是demo,到實際應用的時候就會出問題,當時候我們打包之後拿蘋果平板電腦測試OK,完全沒問題,手機上測試也OK,但是往往我們最容易疏忽的地方就是問題最大的地方。
此處插播一個小插曲,我們讓客戶測試安卓版本,畢竟蘋果上線時需要一定的時間的嗎。
客戶的一句話驚呆我了,「兄弟啊,我們實在是找不出一個安卓手機啊,我們打掃的阿姨都拿的iphone」,太打擊認了,有木有。最後他們老闆買了一個安卓手機進行測試,測試到那個手機上傳頭像的時候,怎麼點,怎麼不出效果。最後來問我們,尷尬啊,我們測試的時候是通過ios系統測試OK,但是安卓這裡沒有測試。怎麼辦呢,親自測試一把,還真有問題(大家還記得上面的那個大坑吧(╯﹏╰)b)
經過多方查證資料,我們發現安卓手機在使用的時候,是不可以選擇手機文件的(此處太坑了,嗚嗚嗚~~~~),最後我們只能使用webapp這邊實現按鈕的點擊事件,
將事件的執行交給android來做
那麼剩下的工作就可以交由android來做了,最終只需要給我們返回結果就好了,
當然圖片也是需要上傳到伺服器的了(此處就不做具體說明了,後續的話會給大家帶來一篇完整的文檔,結合js與android教程)。
最後給大家列出一些我們的思路和需要注意的細節吧。
思路:
1.Android調用HTML中的java腳本
2.HTML中的Java的腳本調用Android的本地代碼
3.Android調用HTML中的java腳本並傳遞參數
4.HTML中的Java的腳本調用Android的本地代碼並傳遞參數
5.各自實現各自的功能
注意細節:
Android調用JS腳本
jS調用Android方法
前端代碼
切記我們必須添加許可權,位置在AndroidManifest.xml的
最重要的一點是
由於安全原因 targetSdkVersion>=17需要加 @JavaInterface
最後非常感謝大家可以看我的本次分享,么么噠!
來源:千鋒HTML5
※web前端開發教程都學習哪些內容?
※2018最新HTML5前端學習路線
TAG:千鋒HTML5開發學院 |