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

阿新 • • 發佈：2019-04-08

ica tool 完成後成本 generic 包名 record 在那不可

混合開發是什麽？

個人理解混合開發指的是編寫一個項目將涉及原生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

Install node、npm

官網： https://nodejs.org/en/
安裝全局變量ionic cordova

sudo npm install -g ionic cordova
Init project

ionic start helloWorld [blank,sidemenu,tabs]
blank: 空白頁
sidemenu: 帶側邊欄的模板
tabs: 帶選項卡的模板
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

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路徑 別名

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發布成功。

常用命令

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 （瀏覽器運行，一般用於調試）
新建頁面

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文件用於編寫組件樣式。

引入控件

Alerts Loading Modals Sliders Segment Toggle Lists Range Icons
控件參考網址
Pro版本
ionic pro版本，無需代碼也可以獨自完成混合開發
https://creator.ionic.io/app/dashboard/projects
第三方插件引入

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" />

註意：

jar文件需要使用lib-file標簽，simulator代表模擬器運行環境，device代表在真機運行環境。

so文件需要放在JniLibs文件下。

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

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

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

補充說明

創建自定義插件:
https://www.cnblogs.com/smartsensor/p/7904254.html
plugin.xml詳解:
https://www.jianshu.com/p/92dd69ae7d8f
自定義插件調用Android原生Activity:
https://blog.csdn.net/weixin_37730482/article/details/76618458

問題

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

原因：需要在buiild.gradle文件裏手動配置
android: {
??defaultConfig {
????abiFilters "armeabi", "armeabi-v7a","x86","mips"
??}
}
Activity的配置

將與Activity有關的java文件寫入config-file標簽
權限

將APP權限寫入config-file標簽
source-file和resource-file的區別

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

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

jar文件要使用lib-file標簽引入

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

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']
????}
??}
}

res資源要全部copy，部分文件例如string.xml,color.xml等需要和ionic框架下的配置合並。否則會出現變量找不到bug
ionic項目中沒有R文件，所以需要使用第三方工具MResource，替換R文件，java中的每個有R的地方,例如：
R.string.login_failed 替換成 MResource.getIdByName(this, "string", "login_failed")
Ios和Android同時打包會報錯，並且需要重新生成平臺
原因：是因為mac上沒有android的環境導致

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

ica tool 完成後成本 generic 包名 record 在那不可混合開發是什麽？個人理解混合開發指的是編寫一個項目將涉及原生APP的API封裝成JS模塊，以插件的形式可以引入或刪除，從而可以實現利用HTML調用原生API，本質上是HTML調用封裝API的J

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

混合開發是什麽？

與原生APP效果比較

為什麽使用Cordova？

PhoneGap，DCloud和React Native

怎麽用Cordova開發?

Hello World

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

Android探索之旅（第三十六篇）Android中使用者反饋需要開發？不存在的

Android網路開發回顧之旅 ① 在Android手機整合使用MQTT協議，實現搞掂移動控制硬體端。（附帶Demo）

【我的Java開發學習之旅】如何實現中文漢字進行筆劃(筆畫)排序？

Android探索之旅（第十四篇）Android中實現炫酷效果的Demo（持續收錄中......）

Qt探索之旅（九）簡單實現瀏覽器

【Linux探索之旅】第一部分第三課：測試並安裝Ubuntu

Avalon探索之旅

【Linux探索之旅】第四部分第三課：文件傳輸，瀟灑同步

我的Java開發學習之旅------>Workspace in use or cannot be created, choose a different one.--錯誤解決的方法

Hasen的linux設備驅動開發學習之旅--時鐘

【C++探索之旅】第二部分第一課：面向對象初探，string的驚天內幕

javascript跨域訪問探索之旅

webservice 菜鳥探索之旅

Spring Cloud探索之旅（二）——Spring Cloud Eureka

在Docker中執行PHP專案的探索之旅

我的Web後端開發學習之旅03

ionic+cordova混合開發app【二、建立專案】

ionic+cordova混合開發app【一、環境搭建】

Web 探索之旅 | 第一課

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

混合開發是什麽？

與原生APP效果比較

為什麽使用Cordova？

PhoneGap，DCloud和React Native

怎麽用Cordova開發?

Hello World

相關推薦