积木式移动框架-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) {
 })