當前位置:
首頁 > 最新 > 關於混合開發中的那點破事

關於混合開發中的那點破事

跟大家分享一個小故事,前些年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


喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 千鋒HTML5開發學院 的精彩文章:

web前端開發教程都學習哪些內容?
2018最新HTML5前端學習路線

TAG:千鋒HTML5開發學院 |