MSWebApp 1.1

MSWebApp 1.1

×

测试已测试✗
Lang语言 Obj-CObjective C
许可证 MIT
发布最后发布2016年10月

Maintained by WildDylan, WildDylan.

 
依赖
AFNetworking>= 0
WebViewJavascriptBridge>= 0
LKDBHelper>= 0
WPZipArchive>= 0
 

MSWebApp 1.1

  • 作者
  • Dylan

什么是 MSWebApp：越来越多的 html 页面和框架被使用。React-native、weex、phone-gap ... 学习都会花费很多时间。但我们只需要应用中的一部分 html 页面。MSWebApp，动态管理和挂载模块。

功能和特性

  • [x] UIWebView 支持 (为什么不使用 WKWebView？不能与 URLProtocol 钩接)。
  • [x] WebView-JavaScript 桥接。
  • [x] 检查和下载模块的差异。
  • [x] 自定义浏览器。
  • [x] 将 URL 转换为本地文件 URL。
  • [x] 模块挂载进度，并在初始化时下载或不下载，使用同步下载或不使用同步下载。
  • [x] 文件丢失时自动重新下载。
  • [x] 提供文件浏览器。
  • [x] URLProtocol 资源检查。现在，css、js、png、jpg、gif、mp3、mp4 都有 mime-type 检查。
  • [x] 缓存控制、磁盘缓存、内存资源缓存（在 master 分支中，在测试中！）。

如何使用

pod "MSWebApp", "~> 1.0.1"

#import <MSWebApp/MSWebApp.h>

MSWebApp 需要的信息

// FullURL: Server API path, for get the full config.
[MSWebApp webApp].fullURL = @"http://192.168.199.173:8080/webapp.json";

// Type: Seperate the difference app.
// If you have: 'Student client', 'Teacher client', you should need it.
[MSWebApp startWithType:@"MEC"];

MSWebApp webApp 的完整 URL 的响应示例，MSWebApp 框架 使用 POST 方法，服务器响应应该是这样的

{
app =     {
module =         (
{
mid = LeafModules;
packageurl = "http://um.devdylan.cn/LeafModules.zip";
urls =                 {
"classPayment.tpl" = "classPayment.html";
"detail.tpl" = "detail/detail.html";
"enter.tpl" = "index.html";
};
version = ib42;
sync = "n",
initdown = "y",
files: {
"/js/mui.js": "http://um.devdylan.cn/LeafModules/js/mui.js"
}
},
{
mid = bootstrap;
packageurl = "http://um.devdylan.cn/bootstrap.zip";
urls =                 {
};
version = ib43;
sync = "n",
initdown = "y",
files: {
"/js/mui.js": "http://um.devdylan.cn/LeafModules/js/mui.js"
}
},
{
mid = vueModule;
packageurl = "http://um.devdylan.cn/vueModule.zip";
urls =                 {
"enter.tpl" = "index.html";
};
version = "3.4.6";
sync = "y",
"initdown" = "n",
files: {}
}
);
version = "3.3.4";
};
}

使用 KVO

[[NSNotificationCenter defaultCenter]
addObserver:self
selector:@selector(reloadData:)
name:MSWebModuleFetchOk
object:nil];

状态

/** POST on config get success, notification.object is `MSWebAppOp`*/
FOUNDATION_EXTERN NSString MS_CONST MSWebAppGetOptionSuccess;
/** POST on config get with error, notification.object is `NSError` or nil*/
FOUNDATION_EXTERN NSString MS_CONST MSWebAppGetOptionFailure;
/** POST on module start download, notification.object is `MSWebAppModule`*/
FOUNDATION_EXTERN NSString MS_CONST MSWebModuleFetchBegin;
/** POST on module downloaded or ziped with error, notification.object is `MSWebAppModule`*/
FOUNDATION_EXTERN NSString MS_CONST MSWebModuleFetchErr;
/** POST on module handler OK, notification.object is `MSWebAppModule`*/
FOUNDATION_EXTERN NSString MS_CONST MSWebModuleFetchOk; 
/** POST on module mount progress changed*/
FOUNDATION_EXTERN NSString MS_CONST MSWebModuleFetchProgress;

获取浏览器实例

UIViewController * viewController = [MSWebApp instanceWithTplURL:_urlField.text];

您还可以通过 MSWebViewController 的子类自定义它。在获取实例之前必须注册它。

[MSWebApp webApp].registedClass = [SubClass class];

URL 规则

http://{[MSWebApp webApp].fullURL.host}/{ModuleId}/{URLsKey}?{query}

URLsKey，它在配置响应中是一个映射，例如使用 id 获取绝对路径。

注意：URL 映射的键，应该有后缀 .tpl！

{
mid = vueModule;
packageurl = "http://um.devdylan.cn/vueModule.zip";
urls =                 {
"enter.tpl" = "index.html";
};
version = "3.4.6";
sync = "n",
initdown = "y",
files: {}
}

访问此模块中的 index.html

应使用：http://[MSWebApp webApp].fullURL.host/vueModule/enter.tpl?a=b 为什么 URL 的主机与 [MSWebApp webApp].fullURL.host 相同：建议使用独立的服务器来完成此操作。

示例项目

cd Example 然后，运行 pod install。

WebApp 版本信息

版本：1.0.1 可用于产品。版本：1.0.2 包含 URLProtocol、测试版，不用于生产。

依赖项：

dependency 'AFNetworking' # API Requets
dependency 'WebViewJavascriptBridge' # JS bridge
dependency 'LKDBHelper' # Model 2 DB
dependency 'WPZipArchive' # Zip, unZip

许可证

MIT。

附件

URL

http:/{host}/{moduleName}/{tplid}.tpl?{param}

参数 描述
{moduleName} mid
{tplid} TID（模块配置 json 中的 urls.key）
{param} 查询
{host} 主机与配置请求 API.host 相同

APIs

webapp.json (获取配置)

API路径：webapp.json

参数列表

参数 类型 必须 描述
app 字符串 是 区分产品
version 字符串 是 本地webApp版本，将自动附加。

如果版本参数为空，服务器应响应最新的配置。最新的配置包含所有活跃模块，MSWebApp框架将进行检查。更新、覆盖或删除。

请求数据示例

// Content-Type: application/json
app: "MEC",
version: "a4fc6"

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document test</title>
<!-- loaded public css, use relative path, All modules will in same level directory. -->
<link rel="stylesheet" type="text/css" href="../../bootstrap/css/bootstrap.css">
</head>
<body>
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn btn-info">Search</button>
</form>

<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
<button class="btn btn-large btn-block" type="button">Block level button</button>

</body>
</html>

如果模块下载失败或文件丢失，将从服务器请求。

CMS

更新模块

API路径：updateModule

参数列表

参数 类型 描述
mid 字符串 module ID
version 字符串 版本，有时应该是git短版本号
packageurl 字符串 模块zip下载链接
urls 对象 键:值 id:绝对路径
sync 字符串 sync load y/n
initdown 字符串 y: 获取配置成功时下载。n: 不下载。

响应：

{
"message": "update success!",
"status" : "successful",
}

问题

问题：我想在模块挂载时进入应用。回答：观察 MSWebModuleFetchOk 和 MSWebAppGetOptionSuccess，您将首先接收到 MSWebAppGetOptionSuccess，等待 FetchOK，当您收到此通知时，构建一个临时数组并将其添加，当临时数组计数与 [MSWebApp webapp].op.modules 计数相同时，所有模块已成功加载。但请注意，如果模块加载失败，您应该执行某些操作。

问题：如果配置加载出错？回答：观察 MSWebAppGetOptionFailure，执行 startWithType:。