Ionic開發Hybrid App問題總結

2022-07-14 09:30:16 字數 2771 閱讀 4355

出處:先說下專案的簡單的需求:

順便新增幾個主要的搜尋引擎對新增的**的收錄情況,便於及時的掌握最基本的 seo 情況。

簡單來說,ionic 就是使用 html5 建立類似於手機平台原生應用的乙個開發框架,裡面繫結了 angularjs 和 sass,核心的編譯平台是 phonegap,同時已經整合了現有的一些 ui 框架,不需要為介面設計花很多的心思。

來幾個截圖,順手做了乙個官網:

禁用快取只需要在 view 中禁用即可。

1 .state('tab.websites', 

9 }

10 })

全域性禁用快取的方法是:$ionicconfigprovider.views.maxcache(0);

在不同的使用者輸入場景下,需要顯示不同的鍵盤模式以方便使用者輸入,如在輸入郵件時鍵盤則顯示郵件模式等。

在 ionic 中需要安裝鍵盤外掛程式控制鍵盤模式的顯示。

安裝後在$ionicplatform.ready中呼叫即可。

1 if (window.cordova && window.cordova.plugins && window.cordova.plugins.keyboard) 

5 if (window.statusbar)

對應的 input 只要新增相應的 type 進行控制即可,支援的所有 type 見這裡。

使用效果如下。

ios 裝置和 android 裝置因為不同裝置的螢幕尺寸適配問題,需要提供很多不同尺寸的資源,包括 icon 和 splash 的不同尺寸。

如果每乙個尺寸都去使用 ps 匯出,工作量巨大,還好有自動生成的工具,只需要提供最大的尺寸供生成即可。

ios 的 icon 和 splash生成:

android 相關資源生成:

使用者下拉重新整理是乙個通用的操作規範,ionic 已經對此功能進行了整合,只需要在 view 中按照此方法使用即可,獲取的方法放在 on-refresh 中即可。

常需要在選單中新增上『意見及建議』選項,當使用者點選後,呼叫郵件客戶端,自動填寫上收件人和郵件標題,使用者只要書寫內容點選傳送即可。

跨平台的方案是安裝emailcomposer外掛程式,在按鈕的事件中呼叫即可。

$scope.feedback = function () ,

"給咕咕監控的建議", // subject

"", // body

["[email protected]"], // to

null, // cc

null, // bcc

false, // ishtml

null, // attachments

null); // attachment data}};

1 $scope.rateus = function ()  else if ($ionicplatform.isandroid) 

7 };

國內有很成熟的第三方推送平台:極光推送。

註冊後進行外掛程式的新增,也就是jpush-phonegap-plugin。

在使用者登入的時候對使用者按照別名或分組進行標識。

var arrayobj = new array("tags" + loginresult.userid);

window.plugins.jpushplugin.settags(arrayobj);

個人推薦按照分組也就是 tags 進行標識,因為乙個使用者可能會使用不同的裝置,那麼推送的時候不同的裝置就可以全部都收到通知,不至於漏掉推送訊息。

api 端在監控 server 端進行操作即可,也就是在檢測到宕機後,進行極光 api 呼叫,傳送宕機的提醒即可。

只要通過 ionic 的 build 命令或者開啟編譯環境進行對應的平台打包即可,當然打包之前最好使用模擬器進行測試。

有幾個問題是需要注意的:

此專案我也開源在了 github 上,相關優化還要抽閒暇時間去做,相關資源如下,歡迎提意見和需求,我盡量保持改進。

官網:github開源:

ionic 開發WebApp入門

在這個技術日新月異的情況下,學習是提高個人技術能錄的唯一路徑,下面就ionic 的入門做以下小結。私以為還是官網的資料最為準確。部門學習資料如下 菜鳥教程 ionic1 官方文件 中文翻譯部落格篇 感謝作者!大家在開發中會遇到諸多的坑,而填坑也是一件很有意思的事情,下面就本人在填坑過程中找到的好的資...

Ionic開發筆記

1.1新建專案資料夾 1.2複製angular base下的所有檔案到專案資料夾下 1.3複製angular official tabs資料夾下所有檔案到專案資料夾,同名直接覆蓋。1.4把integration cordova資料夾下所有檔案複製到專案資料夾中 1 編輯專案資料夾下config.xm...

ionic開發移動應用總結

本文不是ionic的教程,相關教程網上已經很多,本文主要是自己在採用ionic開發移動應用過程中的一些總結。某些應用資訊需要儲存在本地以便後面使用,最簡單的本地儲存是window.localstorage,我們可以將資料以鍵值對的形式進行儲存,如下 example localstorage.seti...