积木式移动互联网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"

在模板工程中配置好苹果证书；
打开Mac 系统中Terminal App，进入到builScript-iOS目录下，输入打包命令：./build.sh 。
命令执行完毕之后，会在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 truev2SigningEnabled 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端能力接口的使用。