心得

 ionic生成的android app開啟速度確實很慢，html5的視訊播放在android上就是坑，很多機型不相容html5的video

簡單的頁面不如用原生的Webview然後載入html實現即可，用騰訊的tbs服務來增強Webview的功能，也可以內嵌crosswalk瀏覽器

騰訊tbs網站上整理了很多移動開發的文章值得學習，如 Service Worker最佳實踐等

複雜的app建議還是用原生android編寫然後Webview載入一些html內容

已經有html專案了，直接用crosswalk-pkg命令打包生成APP也不錯，雖然apk包有點大，但是相容性比較好

ionic就是在cordova基礎上加了一層，很多命令就是在cordova命令前面加上一個ionic，有時候沒有加ionic也沒問題，如cordova run android，我們執行ionic cordova run android

文件資料

http://cordova.apache.org/

http://cordova.axuer.com/docs/zh-cn/latest/

https://github.com/cfjedimaster/Cordova-Examples 一系列cordova的demo 

http://ionicframework.com/docs/

https://github.com/ionic-team/ionic-native  

安裝

詳細的安裝、環境配置、使用說明請參考cordova和ionic的官方文件

npm install -g cordova ionic

android環境配置 安裝jdk,android sdk，配置好環境變數JAVA_HOME,ANDROID_HOME,然後把jdk的bin，android sdk的tools,tools/bin,platform-tools目錄全部新增到PATH環境變數中

利用模板快速生成專案

下面命令列最後的tutorial是官方最完善的APP模板，可以自行測試其餘簡單的模板

• tabs : a simple 3 tab layout
• sidemenu: a layout with a swipable menu on the side
• blank: a bare starter with a single page
• super: starter project with over 14 ready to use page designs
• tutorial: a guided starter project

給我的專案加上android平臺，生成的android平臺目錄“專案/platforms/android”是可以直接用android studio開啟當做android專案開啟執行的

ionic cordova platform add android

給我的專案加上ios平臺

ionic cordova platform add ios

除錯執行釋出

ionic serve     在本地啟動一個http服務，支援熱更新

ionic serve -lc  感覺ionic serve已經支援熱更新了，好像沒有必要加上-lc這個除錯引數，谷歌瀏覽器本身就有APP模式，加上這個引數以後可以在地址後面加上平臺引數來模擬平臺如http://localhost:8100?ionicplatform=android

ionic cordova run android 在android模擬器或者真機上執行

ionic cordova run android -lc 可以在真機上遠端除錯

ionic cordova run android --device

ionic cordova run android --prod --release

ionic cordova build android --prod --release 生成釋出的apk

釋出生成的apk是沒有簽名的所以還需要自己去簽名

生成簽名
keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.jks android-release-unsigned.apk my-alias
優化apk
zipalign -v 4 android-release-unsigned.apk HelloWorld.apk

常用需求

開機啟動，使用ionic-native外掛cordova-plugin-autostart，使用手冊請參照http://ionicframework.com/docs/native/autostart/

瀏覽線上網站  1）使用iframe ，簡單的就這樣用無所謂了，但是很多人說不安全什麼的，模板生成的專案是加上了cordova-plugin-whitelist的需要設定白名單

2）用InAppBrower， 使用請參照http://ionicframework.com/docs/native/in-app-browser/，ios請使用SafariViewController

ThemeableBrower，使用請參照 http://ionicframework.com/docs/native/themeable-browser/

SafariViewController,使用請參照http://ionicframework.com/docs/native/safari-view-controller/

增量更新，只更新www中的靜態資源 https://github.com/nordnet/cordova-hot-code-push
全量更新升級 https://github.com/markmarijnissen/cordova-app-loader，如果新增了native外掛肯定需要全量升級的

視訊播放，高版本android相容video效能越來越好，我現在的需求是定製化的平板APP暫時就使用html5的video了，在android上不支援播放本地視訊檔案，但是用crosswalk後就支援了，但只支援mp4格式的視訊，ogg的視訊播放不出來

查閱了很多視訊專案記錄一下

https://github.com/jaeger25/Html5Video
https://github.com/macdonst/VideoPlayer
https://github.com/moust/cordova-plugin-videoplayer
http://blog.csdn.net/lucy_100/article/details/51086749

https://github.com/videogular/videogular2 www.videogular.com  加強html5的video
https://github.com/nchutchind/cordova-plugin-streaming-media ，使用手冊參照http://ionicframework.com/docs/native/streaming-media/，開啟的是一個全屏的視訊，以後有時間看是否可以改寫為一個懸浮的Actvity，懸浮在webview瀏覽器上

全屏 cordova-plugin-fullscreen，使用手冊http://ionicframework.com/docs/native/android-full-screen/ 和 http://blog.csdn.net/robert_cysy/article/details/62422323兩種寫法

鎖定螢幕方向 cordova-plugin-screen-orientation，使用手冊http://ionicframework.com/docs/native/screen-orientation/

自定義生成native外掛

1）用plugman生成cordova外掛，釋出到github上面，這個外掛在typescript中還用不了

2）可以參照@ionic-native裡面的寫法自己寫typescript的用法，也可以參考native在github上的說明https://github.com/ionic-team/ionic-native/blob/master/DEVELOPER.md

下載git專案， npm install安裝外掛，然後用gulp plugin:create -n PluginName生成外掛指令碼，在 src/@ionic-native/plugins/plugin-name目錄中的index.ts中配置好cordova專案的相關資訊，最後執行npm run build就可以在dist目錄生成編譯後的native外掛

將步驟1中生成的cordova外掛拷貝到專案的node_modules中，步驟2中在dist目錄中生成的native外掛指令碼拷貝到node_modules/@ionic-native中，然後package.json和config.xml中都進行配置就可以開始使用了

優化

在android上有相容流暢的問題，可以用crosswalk外掛打包，ionic cordova plugin add cordova-plugin-crosswalk-webview，這個外掛有20幾M，有lite版本10M左右，會生成x86和arm兩個apk，arm的apk檔案大小比x86的要打，但是x86基本上沒有什麼應用市場，並且從介紹上說x86指令CPU也是可以用arm指令的，所以我的做法就是不釋出x86的apk，直接使用arm的apk

需要注意的是crosswalk打包生成的apk檔案在genymotion模擬器中執行是不正常的，在真機上正常

遇到的問題

1.ionic cordova plugin add cordova-plugin-screen-orientation 安裝失敗，總是報git拉取PromisePlugin失敗的錯誤，不曉得為什麼，暫時先直接刪掉命令列前面的ionic

2.ionic cordova resources命令需要登入才能使用，被坑了很長的時間，去官網註冊的域名由ionic.io重定向到了ionicjs.com，也就是說註冊的時候我們是在ionicjs.com上註冊的，用命令列使用後會提示你登入，輸入登入資訊，會提示往api.ionic.io上post登入資訊查詢不到使用者或郵箱，真心的操蛋，修改hosts把ionic.io的IP指向ionicjs.com但是沒有用。

最終解決：登入到https://dashboard.ionicjs.com/apps上面建立一個app專案，然後用“ionic link --pro-id 專案的編碼” 將本地專案和ionicjs上的專案進行關聯，關聯以後發現就可以使用ionic cordova resources命令了。需要安裝openssh，從http://download.csdn.net/download/liufang1991/9954161下載setupssh-7.5p1-1.exe進行安裝就好了，注意不要安裝舊版本的openssh，看評論說1）有可能會破壞系統環境變數中的PATH 2）還需要去cygin上面下載兩個dll檔案覆蓋才能使用，新版本就沒有這個問題了。

在windows上修改了系統環境變數以後不需要重新啟動電腦，只需要新開啟一個cmd視窗就可以使用了，但是在visual studio code中新開啟的終端無效，要用windows自帶的cmd視窗。

3.ionic native外掛應該要放到platform.ready()中使用

用了cordova-plugin-file，在--debug下安卓機上執行正常，但是用--prod模式以後，在安卓機上就提示“plugin_not_installed”的錯誤，在stack overflow上找到了一個評論說，你應該在platform.ready()中使用ionic native/cordova外掛

import { Platform } from 'ionic-angular';
// Do:
constructor(private platform:Platform){}
// And in when you call the plugin:
this.platform.ready().then(() =>{
  //....
 });