Ionic實現混合開發--探索之旅

混合開發是什麼？

我的理解混合開發指的是編寫一個項目將涉及原生APP的API封裝成JS模塊，以插件的形式能夠引入或刪除，從而能夠實現利用HTML調用原生API，本質上是HTML調用封裝API的JS模塊，而這個負責編寫JS模塊的項目被稱做框架，即如今市場上存在的PhoneGap，DCloud，以及React Native。其目的是爲了減小項目成本，即便用一套代碼就能夠完成WEB，Android和IOS的開發。

與原生APP效果比較

原生APP
(1)使用過程當中運行速度快，流暢度高，頁面間的響應快。
(2)組件調用速度快，適配性高，更符合手機的尺寸。
(3)手機自帶的渲染效果清晰，好比下拉的渲染，原生自帶的動畫溫馨感更高。

混合開發APP
(1) 複雜組件的加載在部分手機，尤爲是低配版手機，加載緩慢。
(2) 沒有手機自帶的渲染效果。
(3)件適配性比原生低。
(4) 可用JS編寫更加豐富的動畫效果。
(5)UI設計能夠更加複雜多樣化，相比而言，html的語言風格比原生APP要更簡易方便。
(6)採用組件化開發，多用性和複用性略有優點，一套代碼適用多平臺。

爲何使用Cordova？

PhoneGap，DCloud和React Native

PhoneGap在2011年10月被Adobe公司收購，隨後Adobe宣佈這個移動Web開發框架將會繼續開源，並把它提交到Apache Incubator，以便徹底接受ASF的管治。Cordova的全稱是Apache Cordova，等同於Apache PhoneGap。至於ordova的名字 來源，在Nitobi的CFO Brian LeRoux的採訪中說：「這個名字背後的故事是，溫哥華的科爾多瓦街(Cordova Steet)是建立 PhoneGap時Nitobi的所在地。而我也恰好住在那條街」。有了Adobe的支撐，相信Cordova的發展也會愈來愈好，同時，又有 谷歌公司旗下Angular的加盟，建立了基於Cordova的前端UI Ionic`框架。Cordova和Ionic的官網詳細而且比較完整，社區 積極。總結來講，使用Cordova開發，要實際掌握Cordova+Ionic+Angular，要理解三者的關係。

DCloud是國產的框架，採用的是H5+技術。和Cordova有所不一樣的是，DCloud指定了前端框架，等同於，使用DCloud封裝了原生APP的API,採用指定的框架即 MIU，能夠在js裏直接調用API，而Cordova則是採用插件的形式須要引入纔可使用。即DCloud依賴比較多，要根據框架內的規則編寫代碼，好處顯而易見的 更容易上手，並且純Html的寫法，減小了前端的學習成本。Cordova就是單純的封裝API，沒有限制UI框架，你須要調用的時候要先引入，雖然學習內容要多 些，代碼風格倒是比較清晰。

React Native暫不介紹，由於沒有過多瞭解。

怎麼用Cordova開發?

肯定好模式Ionic+Cordova，選用Ionic爲前端框架，是由於Ionic集成了MVVM + NODE於一體的 腳手架，而且Ionic引入了Cordova模板，能夠用命令輕鬆生成、運行、編譯APP。
Ionic網址: https://ionicframework.com/

Hello World

1.Install node、npm

官網： https://nodejs.org/en/

2.安裝全局變量ionic cordova

sudo npm install -g ionic cordova

3.Init project

ionic start helloWorld [blank,sidemenu,tabs]
blank: 空白頁
sidemenu: 帶側邊欄的模板
tabs: 帶選項卡的模板

4.Run and Test

PC端
cd helloWorld
ionic serve

Android
ionic cordova platform add android
ionic cordova run android

Ios
ionic cordova platform add ios
ionic cordova run ios

5.Android 打包

(1)編譯
    ionic cordova build android

(2)生成祕鑰文件
    keytool -genkey -alias heloworld.keystore 
    -keyalg RSA 
    -validity 20000 
    -keystore heloworld.keystore

    解釋：
    -genkey 生成文件
    -alias 別名
    -keyalg 加密算法
    -validity 有效期
    -keystore 文件名

(3)將祕鑰綁定apk
    jarsigner -verbose -keystore heloworld.keystore
    -signedjar heloworld.apk app-release-unsigned.apk heloworld.keystore

    解釋：
    -keystore 文件名
    -signedjar 簽名後的apk路徑 未簽名的apk路徑 別名

6.IOS 打包

(1)設置config.xml
    version: 1.0.0 
    id: com.landfun.helloworld 【id必須和Profiles的App ID一致】 
    name: helloworld
(2) ionic cordova build ios
(3)打開platform/ios/helloworld.xcworkspace
(4)在ITuanes Connect中使用公司購買的ID新建APP ID
輸入name和Bundle ID【config.xml中的id】
Name: helloworld
Bundle ID: com.landfun.helloworld
參考：https://developer.apple.com/account/ios/identifier/bundle

總結說明
IOS APP發佈須要證書+profile配置文件+APP ID，這三者缺一不可
將APP ID和證書版本寫在Profile裏，Xcode讀取config.xml文件中的id即com.landfun.helloworld，去匹配igning裏的Team，即證書版本，而後根據ID和Team去找是否存在這二者的配置文件Profile，若是存在，便可編譯運行或者打包，不然編譯或打包失敗，簡單的理解就是IOS的驗證方式，驗證當前APP是否已經在Itunes connect裏註冊。
配置完成後，選擇模擬器，點擊run，便可測試。選擇Generic ios Device模式，點擊Product/Archive，便可打包。
打包完成後，會顯示彈框，能夠選擇export導出ipa文件，打開Xcode --> Open Developer Tool --> Application Loader，登陸公司開發者帳號，選擇導出的ipa文件便可上傳到APP Store，此方法上傳比較快，而且有進度提示。也能夠選擇pload直接上傳到APP Store，此方法上傳比較慢，而且沒有進度提示。
上傳完成後，要填寫APP信息，包括文本簡介，帳號，密碼，公司聯繫人等，上傳截圖，尺寸要和規定的一致，選擇構建版本，信息都填完後要存儲以供審覈，而後點擊發布。至此，IOS版本APP發佈成功。

7.經常使用命令

ionic -h（查看幫助）
ionic -v（查看版本）
ionic start myApp blank（空項目）
ionic start myApp tabs（帶導航條）
ionic start myApp sidemenu（帶側滑菜單）
ionic cordova platform add android（添加android平臺）
ionic cordova platform remove android（移除android平臺）
ionic cordova build android（編譯項目apk）
ionic cordova emulate android（運行項目apk 手機鏈接在手機運行 模擬器鏈接在模擬器運行）
ionic cordova run android （至關於build + emulate）
ionic cordova platform add ios（添加ios平臺）
ionic cordova platform remove ios（移除ios平臺）
ionic cordova build ios（編譯項目ipa）
ionic cordova emulate ios（運行項目ipa 手機鏈接在手機運行 模擬器鏈接在模擬器運行）
ionic cordova run android （至關於build + emulate）
ionic cordova plugin add [插件絕對路徑地址] （引人插件）
ionic cordova plugin list （查看全部引入的插件）
ionic cordova plugin remove [插件的id] （刪除插件）
ionic generate page main （生成一個main頁面）
ionic serve （瀏覽器運行，通常用於調試）

8.新建頁面

ionic g page main
在src/pages/文件下生成文件夾main，文件夾裏有main.html,main.module.ts,main.scss,main.ts四個文件。
main.html: 使用html語言編寫頁面，用於展現頁面信息。
main.module.ts: 用於聲明組件，指令和模塊管理。
main.scss: 使用scss語法編寫樣式文件，可編譯成css。
main.ts：使用typeScript語言編寫腳本，包括網絡請求，點擊事件等。
配置新頁面

(1) app.component.ts 文件設置主頁，rootpage

(2) app.module.ts 文件引入須要頁面路徑，而且配置到declarations和entryComponents中。

(3) app.scss文件用於編寫組件樣式。

9.引入控件

Alerts Loading Modals Sliders Segment Toggle Lists Range Icons
控件參考網址

10.Pro版本
ionic pro版本，無需代碼也能夠獨自完成混合開發
https://creator.ionic.io/app/dashboard/projects

11.第三方插件引入
pluginman的使用

• 安裝 plugman 插件
  npm install -g plugman
• 新建組件

plugman create 
--name HikvisionPlugin //自定義插件名稱
--plugin_id com.hikvision.sdk //自定義插件的包名
--plugin_version 1.0.0 //自定義插件版本

• 生成平臺（android/ios）插件代碼
  進入插件的根目錄，而後執行建立android或者ios的平臺支持命令

cd HikvisionPlugin
plugman platform add --platform_name android
plugman platform add --platform_name ios

• 修改自定義插件
  自定義插件修改後必須先刪除插件，而後再安裝插件纔可生效。

1)ionic cordova plugin list // 列出全部已安裝的插件
2)ionic cordova plugin remove com.hikvision.sdk // 從ionic3項目中刪除插件
3)ionic cordova plugin add 自定義插件路徑 // 安裝插件到ionic3項目

實例海康插件的引入

• pluginman生成id爲com.hikvision.sdk插件
• 增長android權限

<config-file parent="/*" target="AndroidManifest.xml">
  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.READ_PHONE_STATE" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
</config-file>

• 在plugin.xml裏增長Activity

<config-file parent="/manifest/application" target="AndroidManifest.xml">
  <activity android:name="com.hikvision.sdk.ui.LoginActivity"></activity>
  <activity android:name="com.hikvision.sdk.ui.ResourceListActivity"></activity>
  <activity android:name="com.hikvision.sdk.ui.LiveActivity"></activity>
  <activity android:name="com.hikvision.sdk.ui.PlayBackActivity"></activity>
  <activity
    android:name="com.hikvision.sdk.ui.UrlActivity"
    android:keepScreenOn="true">
  </activity>
  <activity android:name="com.hikvision.sdk.ui.LocalVideoActivity"></activity>
</config-file>

• 引入全部海康sdk資源

<source-file src="src/android/HikvisionPlugin.java" target-dir="src/com/hikvision/sdk" />
<source-file src="src/android/java/ui/LoginActivity.java" target-dir="src/com/hikvision/sdk/ui" />
<source-file src="src/android/java/ui/ResourceListActivity.java" target-dir="src/com/hikvision/sdk/ui" />
...
<resource-file src="src/android/res/layout/ac_live.xml" target="res/layout/ac_live.xml" />
<resource-file src="src/android/res/layout/ac_main.xml" target="res/layout/ac_main.xml" />
<resource-file src="src/android/res/layout/ac_resource_list.xml" target="res/layout/ac_resource_list.xml" />
...
<lib-file src="src/android/libs/ivms_8700_sdk_library.jar" arch="simulator" />

注意：

1. jar文件須要使用lib-file標籤，simulator表明模擬器運行環境，device表明在真機運行環境。
2. so文件須要放在JniLibs文件下。
3. source-file表明src文件夾的動態資源，例如java文件，每一次運行都會從新編譯。
4. resource-file表明src下靜態資源，例如xml和圖片，若是使用命令刪除海康插件，會發現xml和圖片等靜態資源並無刪除，而java文件刪除了，因此再從新add插件的時候就會報靜態文件已存在錯誤，因此使用resource-file是能夠替換已存在文件，從而達到更新資源的效果。
5. cordova並不存在R文件，因此須要使用第三方工具MResource替換R文件要將全部java文件中存在R的語句都替換成MResource.getIdByName(this, "類型", "id名")

• 生成平臺

ionic cordova platform add android
ionic cordova platform add ios

• 引入插件

  1. 先查看插件列表，看是否存在插件
     ionic cordova plugin list
  2. 若是存在，先刪除該插件，確保安裝到的是最新的插件
     ionic cordova plugin remove com.hikvision.sdk
  3. 若是不存在，直接安裝插件
     ionic cordova plugin add 自定義插件路徑

• 查看安裝後的插件，以android爲例
  目錄
  
  AndroidManifest.xml
  
  package.json
  
• 編譯

ionic cordova build android
ionic cordova build ios

• 補充說明

  建立自定義插件:
  http://www.javashuo.com/article/p-gzazvfwq-ch.html
  plugin.xml詳解:
  https://www.jianshu.com/p/92dd69ae7d8f
  自定義插件調用Android原生Activity:
  http://www.javashuo.com/article/p-cealbwur-nr.html

問題
1.Android APP接入海康視頻插件，解決了找不到so文件問題

緣由：須要在buiild.gradle文件裏手動配置
android: {
  defaultConfig {
    abiFilters "armeabi", "armeabi-v7a","x86","mips"
  }
}
2.Activity的配置
將與Activity有關的java文件寫入config-file標籤

3.權限
將APP權限寫入config-file標籤

4.source-file和resource-file的區別

source-file表明src文件夾的動態資源，例如java文件，每一次運行都會從新編譯。

resource-file表明src下靜態資源，例如xml和圖片，若是使用命令刪除海康插件，會發現xml和圖片等靜態資源並無刪除，而java文件刪除了，因此再從新add插件的時候就會報靜態文件已存在錯誤，因此使用resource-file是能夠替換已存在文件，從而達到更新資源的效果。

5.jar文件要使用lib-file標籤引入

<lib-file src="src/android/libs/ivms_8700_sdk_library.jar" arch="simulator" />

6.so文件根據須要可使用resource-file引入，放在jniLibs文件夾下

<resource-file src="src/android/jniLibs/armeabi-v7a/libMCRSDK.so" target="jniLibs/armeabi-v7a/libMCRSDK.so" />
<resource-file src="src/android/jniLibs/armeabi-v7a/libPlayCtrl.so" target="jniLibs/armeabi-v7a/libPlayCtrl.so" />
<resource-file src="src/android/jniLibs/armeabi-v7a/libPlayCtrl_L.so" target="jniLibs/armeabi-v7a/libPlayCtrl_L.so" />

cordova打包後的Android文件，jniLibs指定到lib文件夾，因此若是將jniLibs放在lib文件夾下，須要在build.gradle裏手動配置

android {
  sourceSets {
    main {
      jniLibs.srcDirs = ['libs']
    }
  }
}

7.res資源要所有copy，部分文件例如string.xml,color.xml等須要和ionic框架下的配置合併。不然會出現變量找不到bug
8.ionic項目中沒有R文件，因此須要使用第三方工具MResource，替換R文件，java中的每一個有R的地方,例如：
R.string.login_failed 替換成 MResource.getIdByName(this, "string", "login_failed")
9.Ios和Android同時打包會報錯，而且須要從新生成平臺
緣由：是由於mac上沒有android的環境致使