積木式移動框架-Modular Mobile Framework

你好，歡迎閱讀本博文！本博文介紹自研Hybrid移動框架的使用，框架名爲：積木式移動框架，英文名：Modular Mobile Framework。爲什麼是這麼一個名字，因框架的設計的思路：以堆積木的思路，iOS和android原生控件(組件)以一塊塊的"積木"方式提供，這些控件（組件）可像堆積木一樣，靈活組合形成具體的功能模塊。

核心模塊

以JS調用移動端原生API爲核心設計，框架劃分爲四大核心模塊：

1. JS組件模塊，引入我們提供一個"modular-core.js"，HTML既可以通過JS調用框架中封裝的原生組件，也可引入"modular-extend.js"以擴展自己的原生組件；
2. WebView組件，負責加載HTML，把原生對象注入到HTML的DOM中，注入過來的原生對象，在HTML端變成JS對象。兩大平臺都對應封裝了加載HTML的Page組件：android平臺是AIWebViewActivity組件，iOS平臺是AIWKWebViewController組件；
3. 原生組件配置，通過配置原生組件提供給HTML端調用；
4. 原生組件，常用的原生組件。

集成步驟

1、HTML端

1. 引入框架中的modular-core.js和modular-extend.js

2. 把versions.properties文件隨同HTML一起發佈
   根據自己的發佈服務器情況修改versions.properties：

    #版本號
    #android版本信息配置
    android.version=1.0
    #apk下載url
    android.versionURL=xxxxx
   
    #iOS版本信息配置
    iOS.version=1.0
    #IPA發佈，一般爲版本配置的plist文件，目前是調到版本下載頁面
    iOS.versionURL=xxxxx
   

也可以不採用這一套版本檢查方式，只需要在工程的global.perties不配置version.url。

2、iOS端

用xcode新建一個iOS工程

1. 導入框架AIBase.framework；

2. 導入modular-plugin-iOS.xml和global.properties
   修改global.properties裏下面字段：

    # 應用名稱
    app.name=xxxx
    #版本號
    version=1.2
    #版本文件verison.properties的地址
    version.url=http://xxxxx/versionFile
    #生產環境
    online.addr=http://xxxxx
    #測試環境
    #online.addr=http://xxxxx
   

3. 拷貝框架buildScript.zip，解壓到工程根目錄下
   把蘋果簽名文件xxxx.mobileprovision拷貝到解壓目錄，根據工程實際情況修改解壓目錄下的build.sh裏的下面字段：

    # 應用targetName，一般應用的根目錄的名稱
    targetName="xxxxx"
    
    #當前證書的ID標識
    code_sign_identity="iPhone Distribution: xxxxx"
    
    #證書籤名文件名,即拷貝過來的簽名文件
    code_sign_profile="xxxxx.mobileprovision"
   

4. 在xcode工程配置蘋果證書；

5. 在xcode中AppDelegate中將框架中的AIWKWebViewController設置爲window.rootViewController；

6. 上述配置配置完畢後，進入控制檯應用，進入到上述解壓目錄下，執行：./build.sh， 如圖：
   

3、android端

用android studio 新建一個android工程

1. 導入框架aibase.jar到工程libs文件下；

2. 導入modular-plugin-adr.xml和global.properties到src/main/assents目錄下。
   修改global.properties裏下面字段：

    #應用名稱
    app.name=xxx
    #版本號
    version=1.2
    #版本文件verison.properties的地址
    version.url=http://xxxxx/versionFile
    #生產環境
    online.addr=http://xxxxx
    #測試環境
    #online.addr=http://xxxxx
   

3. 拷貝框架buildScript-adr.zip，解壓到工程根目錄下；

4. 修改上述解壓目錄中的buildConfig.gradle中的證書信息：

   // 請根據xxx.jks證書情況配置
   signingConfigs {
            config {
                keyAlias 'xxxxx'
                keyPassword 'xxxxx'
                storeFile file('../xxxxx.jks')
                storePassword 'xxxxx'
                v1SigningEnabled true
                v2SigningEnabled true
            }
   }
   

5. 在工程app目錄下的build.gradle文件底部引入上述的buildConfig.gradle

   // 引入打包腳本
   apply from: '../buildScript-adr/buildConfig.gradle'
   

6. 在工程app目錄下的build.gradle的dependencies引入框架依賴的okhttp開源庫

   compile 'com.squareup.okhttp3:okhttp:3.1.2'
   compile 'com.squareup.okio:okio:1.6.0'
   

7. 以默認Activity的方式啓動框架中AIWebViewActivity；

8. 上述配置完畢，進入android studio工程控制檯，執行：./buildScript-adr/build.sh， 如圖：
   

API使用說明

僅介紹可被HTML調用的APIs，其他原生API可從對應的框架包中找對對應的調用方式（後續補充）

1. 分享到系統剪切板

JN_Sharing(content,callback)

參數	類型	說明
content	string	複製到剪切板的內容
callback	function	匿名回調函數

範例

window.modular.JN_Sharing("wuyoujian",function(str) {
 })

2. 打開在線文檔

JN_OpenDocument(url,callback)

參數	類型	說明
url	string	文檔的在線鏈接（pdf、word、ppt、excel、圖片等）
callback	function	匿名回調函數

範例

 window.modular.JN_OpenDocument('http://xxxx/201809.xls',function(str){
 })

3. 獲取版本號

JN_VersionNumber(callback)

參數	類型	說明
callback	function	匿名回調函數,回傳版本號

範例

window.modular.JN_VersionNumber(function(versionNumber){
  })

4. 檢查版本

JN_CheckVersion(versionUrl,callback)

參數	類型	說明
versionUrl	string	配置版本信息文件versions.properties的服務器鏈接,可通過框架global.properties的version.url字段配置的鏈接
callback	function	匿名回調函數,回傳版本號

範例

window.modular.JN_VersionNumber(function(versionNumber){
  })

5. 顯示原生Loading

JN_ShowLoading(text,callback)

參數	類型	說明
text	string	loading的提示語
callback	function	匿名回調函數

範例

window.modular.JN_ShowLoading('加載中...',function(str){
})

6. 關閉原生Loading

JN_DismissLoading(callback)

參數	類型	說明
callback	function	匿名回調函數

範例

window.modular.JN_DismissLoading(function(str){
})

7. 自消失的提示框

JN_ShowMessage(text)

參數	類型	說明
text	string	提示語

範例

window.modular.JN_ShowMessage('你好，張三！')

8. 保存數據

JN_SetValueWithKey(value,key)

參數	類型	說明
value	string	保存的字符串
key	string	保存的key

範例

window.modular.JN_SetValueWithKey('你好，張三！','message')

9. 獲取保存數據

JN_GetValueWithKey(key,callback)

參數	類型	說明
key	string	保存的key
callback	function	匿名回調函數,回傳獲取的數據

範例

window.modular.JN_GetValueWithKey('message',function(value) {
})

10. 指紋驗證

JN_Fingerprint(callback)

參數	類型	說明
callback	function	匿名回調函數,回傳驗證的狀態語，其中：“failed” 表示失敗，"success"表示成功，其他對應的提示語

範例

window.modular.JN_Fingerprint(function(result) {
})

11. 發送短信

JN_SMS(phoneNumber,content)

參數	類型	說明
phoneNumber	string	接收短信的手機號碼
content	string	短信內容

範例

window.modular.JN_SMS('13812345678','你好，張三！')

12. 撥打電話

JN_Telephone(phoneNumber)

參數	類型	說明
phoneNumber	string	手機號碼

範例

window.modular.JN_Telephone('13812345678')

13. 發送郵件

JN_Email(address,subject,content)

參數	類型	說明
address	string	接收者郵箱地址
subject	string	郵件主題
content	string	郵件內容

範例

window.modular.JN_Email('[email protected]','你好，張三','郵件內容')

14. 打開網址

JN_Brower(url)

參數	類型	說明
url	string	網址

範例

window.modular.JN_Brower('http://www.baidu.com')

15. 從相冊選擇圖片

JN_SelectPhoto(callback)

參數	類型	說明
callback	function	匿名回調函數,參數就一個圖片數據的base64

範例

window.modular.JN_SelectPhoto(function(base64) {
 })

16. 系統拍照

JN_Photograph(callback)

參數	類型	說明
callback	function	匿名回調函數,參數就一個圖片數據的base64

範例

window.modular.JN_Photograph(function(base64) {
 })

17. 身份證拍照

JN_TakeCertificate(callback)

參數	類型	說明
callback	function	匿名回調函數,參數就一個圖片數據的base64

範例

window.modular.JN_TakeCertificate(function(base64) {
 })

18. 掃碼

JN_QRcode(callback)

參數	類型	說明
callback	function	匿名回調函數,參數就一個String掃碼的內容

範例

window.modular.JN_QRcode(function(result) {
 })

19. 傳遞自定義對象

JN_JSONObj(obj,callback)

參數	類型	說明
obj	object	android側是JSONObject，iOS側是NSDictionary
callback	function	匿名回調函數

範例

var obj = {"title":"問候","message":"張三，你好！"};
window.modular.JN_JSONObj(obj,function(str) {
 })

20. 退出應用

JN_Quit(appName,callback)

參數	類型	說明
appName	string	應用的名稱
callback	function	匿名回調函數

範例

window.modular.JN_Quit(‘QQ’,function(str) {
 })