积木式移动互联网App Hybrid框架-modular的使用(1)

积木式移动互联网App框架——modular，它是一个轻量级的Hybird型的框架，本文讲解它的使用。

开发环境

• android studio 3.0+，并下载安装android SDK、gradle等等
• JDK 1.8 +
• xcode 10.0 +
• Sublime Text 3.0+

兼容版本

• android 支持版本6.0 +
• iOS 支持版本 10.0 +

模板工程

iOS模板工程

打开上述下载的模板工程的modular.xcodeproj，模板工程目录结构如图：

config是配置文件:

• 命名以Default开头的png 是一系列启动图片
• modular-plugin-iOS.xml 是JS的Native插件接口白名单
• global.properties 是App的配置，目前只需要关注配置项：

// 生产地址
online.addr=http://xxx.xxx.xxx.xxx

它是应用程序加载的前端URL地址，其他的配置项后面博客会讲解。

类

• AppDelegate iOS标准的应用程序代理类，在入口接口里我们已经编写好一个直接调用modular框架里WMWKWebViewController。后续可自行根据需求，增加应用级别的逻辑，例如，Push等等
• WMWKWebViewExtendPlugin 我们预留一个用于自行扩展modular框架中未实现的能力的扩展插件类

框架包

modular.framework是我们框架的静态库。

android模板工程

打开android studio，导入上述下载模板工程里modular-android，工程目录结构如图：

打包脚本

buildScript-adr 打包脚本，后续讲解打包过程。

App 配置文件

assets

• global.properties App配置，目前只需要关注配置项：

// 生产地址
online.addr=http://xxx.xxx.xxx.xxx

它是应用程序加载的前端URL地址，其他的配置项后面博客会讲解。

• modular-plugin-adr.xml JS的Native插件接口白名单

res

在以mipmap开头的文件夹里，放置对应分辨率的启动图片startpage.png;

类

• LaunchActivity结合res/style.xml实现一个闪屏页面；
• WMWebViewExtendPlugin 我们预留一个用于自行扩展modular框架中未实现的能力的扩展插件类。

框架包

modular.jar是我们框架的jar包。

编译打包

iOS ipa打包

在iOS 模板工程下的buildScript-iOS下，如图：

build.sh编译打包脚本，请自行修改下面3个参数：

# 应用targetName，一般应用的根目录的名称
targetName="xxx"

#当前证书的ID标识
code_sign_identity="iPhone Distribution: xxx"

#证书签名文件名
code_sign_profile="xxx.mobileprovision"

1. 在模板工程中配置好苹果证书；
2. 打开Mac 系统中Terminal App，进入到builScript-iOS目录下，输入打包命令：./build.sh 。
3. 命令执行完毕之后，会在buildScript-iOS目录下新增一个ipa目录存放ipa文件。

上述脚本是基于苹果299的企业版证书，对于苹果99证书，可以参考一下另外一个博文。

android apk打包

在android 模板工程下的buildScript-adr下，如图：

• build.sh编译打包脚本
• buildConfig.gradle gradle脚本，主要就是一个copy的task
  
  在android studio 的Terminal 下输入打包命令：./buildScript-adr/build.sh，命令执行完毕之后会在buildScript-adr目录下新增一个apk目录存放apk文件。
  注意：在app的build.gradle中，我们增加如下配置：

// 请根据xxx.jks证书情况配置
signingConfigs {
    config {
        keyAlias 'xxx'
        storeFile file('xxx.jks')
        keyPassword '******'
        storePassword '******'
        v1SigningEnabled true
        v2SigningEnabled true
    }
}
// 在buildTypes中增加签名配置
buildTypes {
    release {
    	// 采用上面配置的signingConfig.config签名
		signingConfig signingConfigs.config 
        …
    }
}

HTML

我们考虑可移植性和兼容性，采用标准Javascript编写Javascript桥。因此，无论你当前的Html工程基于什么框架，例如，vue, nodejs等等，都可以使用，仅在需要调用Native能力的Html中引入modular框架提供modular-core.js，即在html的head或者body里引入

<script type="text/javascript" src="modular-core.js"></script>

下载模板工程

基于开箱即用的设计原则，我们提供一个框架模板工程，可自行从gitHub上下载模板工程，可自行修改工程名称以及target名称。
gitHub：https://github.com/wuyoujian0313/modular-proj

小结

此时模板工程就已经具备了Hybrid能力，在模板工程的配置文件modular-plugin-iOS.xml或modular-plugin-adr.xml中配置封装在modular框架中的Native端能力接口，后续博客会详细讲解Native端能力接口的使用。