Magicodes.WeiChat同时也致力于提高后台开发效率，因此对在后台前端这块也做了一定的封装。我们先来说说主要的框架JS——mwc.js和mwc_elements.js。这两个JS文件位于Scripts目录下的app目录：
· mwc：前端框架定义，可以理解为接口定义
· mwc_elements：基于前端框架定义的具体实现
主要API功能如下：
1日志
日志函数用于向浏览器控制台输出日志信息，比如调试信息、警告信息、错误信息、灾难信息等等，兼容主流的浏览器。后续还会增强相关函数，目前只做了简单的封装。
1.1 定义
目前封装了5个日志记录函数，分别是：
方法名 | 参数 | 描述 |
mwc.log.debug | logObject:object | 输出debug日志 |
mwc.log.info | logObject:object | 输出info日志 |
mwc.log.warn | logObject:object | 输出warn日志 |
mwc.log.error | logObject:object | 输出error日志 |
mwc.log.fatal | logObject:object | 输出fatal日志 |
1.2 使用示例：
mwc.log.debug('记录调试日志')
mwc.log.info('记录信息日志')
mwc.log.warn('记录警告日志')
mwc.log.error('记录错误日志')
mwc.log.fatal('记录灾难日志')
1.3 效果图
2 通知
通知函数用于向用户提示相关业务信息。默认显示在用户窗口的右上角，然后在一定时间后会自动消失。
不同函数显示的颜色和图标不同，通常用于显示业务成功操作提示，警告提示，错误提示等信息。
2.1 定义
函数定义如下：
方法名 | 参数 | 描述 |
mwc.notify.success | message（消息正文）:string, title（消息标题）:string | 显示success提示 |
mwc.notify.info | message（消息正文）:string, title（消息标题）:string | 显示info提示 |
mwc.notify.warn | message（消息正文）:string, title（消息标题）:string | 显示warn提示 |
mwc.notify.error | message（消息正文）:string, title（消息标题）:string | 显示error提示 |
2.2 使用示例
mwc.notify.success('这是成功提示！','消息提示')
mwc.notify.success('这是成功提示！')
mwc.notify.info('这是信息提示！','消息提示')
mwc.notify.info('这是信息提示！')
mwc.notify.warn('这是警告提示！','消息提示')
mwc.notify.warn('这是警告提示！')
mwc.notify.error('这是错误提示！','消息提示')
mwc.notify.error('这是错误提示！')
2.3 效果图
3 弹窗
弹窗信息（提示）用于向用户显示需要用户确认的信息或内容，主要用于弹窗显示信息确认、成功确认、警告确认、错误确认、操作确认等。
3.1 定义
方法名 | 参数 | 描述 |
mwc.message.info | message（消息正文）:string, title（消息标题）:string | 显示Info信息 |
mwc.message.success | message（消息正文）:string, title（消息标题）:string | 显示success信息 |
mwc.message.warn | message（消息正文）:string, title（消息标题）:string | 显示warn信息 |
mwc.message.error | message（消息正文）:string, title（消息标题）:string | 显示error信息 |
mwc.message.confirm | message（消息正文）:string, title（消息标题）:string | 显示confirm信息 |
3.2 使用示例
mwc.message.info('图片删除成功！','温馨提示')
mwc.message.success('图片删除成功！','温馨提示')
mwc.message.warn('图片删除失败！','温馨提示')
mwc.message.error('图片删除出现错误，该图片不存在！','温馨提示')
mwc.message.confirm('确定需要删除此项目么？','温馨提示')
mwc.message.confirm('确定需要删除此项目么？','温馨提示',function(){alert('删除成功！')})
3.3 效果图
Info：
Success：
Warn：
Error：
Confirm：
4 UI阻塞
UI阻塞会显示遮罩层以阻碍用户的操作，通常用于Ajax请求处理或者时间比较长的业务处理，以提高用户体验并且防止在处理过程中用户进行其他操作。
4.1 定义
方法名 | 参数 | 描述 |
mwc.ui.block | elm（jq选择器）:string | 阻塞UI |
mwc.ui. unblock | elm（jq选择器）:string | 取消阻塞 |
4.2 使用示例
mwc.ui. block ()
mwc.ui. unblock ()
mwc.ui. block ('#newUsers')
mwc.ui. unblock ('#newUsers')
4.3 效果图
5 忙碌状态
忙碌状态用于阻塞UI并且显示加载动画，通常用于Ajax请求处理或者时间比较长的业务处理，以提高用户体验并且防止在处理过程中用户进行其他操作。
5.1 定义
方法名 | 参数 | 描述 |
mwc.ui.setBusy | elm（jq选择器）:string, optionsOrPromise（设置）:object | 设置为忙碌状态 |
mwc.ui.clearBusy | elm（jq选择器）:string | 清除或关闭忙碌状态 |
5.2 使用示例
mwc.ui.setBusy()
mwc.ui.clearBusy()
mwc.ui.setBusy('#newUsers')
mwc.ui.clearBusy('#newUsers')
mwc.ui.setBusy('#newUsers',{finally:function(){alert('终于搞完了！')}})
5.3 效果图
6 弹出窗口
弹出窗口用于在当前页面弹窗以Iframe的形式加载其他页面并显示，以便用户在一个界面里完成所有的操作或者查看所有内容，以便提高用户体验。
6.1 定义
方法名 | 参数 | 描述 |
mwc.window.show | title（窗口标题）:string, url（url地址）:string, width（宽度，可省略）:int, height（高度，可省略）:int | 弹出窗口。 注意：该函数支持多级弹窗，如果没有设置弹窗大小，子级弹窗的高宽会被自动设置比父级窗口稍小，以更好的呈现。 |
mwc.window.closeSeft | 从当前窗口的内容页关闭自身（即关闭当前窗口） | |
mwc.window.closeAll | 关闭所有弹窗 |
6.2 使用示例
//将clicktype='modal'属性的链接均用弹窗打开
$("a[data-clicktype='modal']").on('click', function () {
var url = $(this).data('url');
var title = $(this).data('title');
mwc.window.show(title, url);
});
mwc.window.closeSeft()
mwc.window.closeAll()
6.3 效果图
7 Ajax请求处理
本框架封装了对象restApi用于处理Ajax请求。主要用于使用Ajax请求REST风格的Web Api，并且根据状态码处理请求结果，回调成功或错误函数。
7.1 HTTP状态码处理
mwc.restApi封装了对Ajax请求的通用处理。其定义了get、put、post、delete等4个函数，能够很方便的访问REST API接口。默认已支持以下类型的HTTP状态码处理：
HTTP状态码 | 描述 | 处理 | 对应WebApi方法 |
200 | 成功响应 | 调用success函数，并传递jsonData | Ok |
201 | 创建成功 | 调用success函数，并传递jsonData | Created |
401 | 需要验证 | 弹出“登陆失效，请重新登陆！”提示，调用error函数，并跳转到登录窗口 | Unauthorized |
204 | 成功响应，无内容返回 | 调用success函数 | StatusCode(HttpStatusCode.NoContent) |
404 | 资源或对象不存在 | 弹出“您访问的资源已被删除或不存在！”提示，调用error函数，并传递错误消息 | NotFound |
400 | 请求失败 | 调用error函数，并传递失败对象消息 | BadRequest |
500 | 服务器错误 | 调用error函数，并传递错误消息对象 | InternalServerError |
配置说明，在Ajax默认的配置项上，增加对以下属性的支持：
属性名称 | 类型 | 说明 |
success | function | 业务处理成功后执行的回调函数 |
error | function | 业务处理失败后执行的回调函数 |
isBlockUI | bool | 请求时是否阻碍UI（会显示遮罩层以及加载动画），默认为true |
blockUI | string | Jquery选择器表达式 |
7.2 定义
方法名 | 参数 | 描述 |
mwc.restApi.get | setting（ajax设置）:object | 使用Http GET发起Ajax请求 |
mwc.restApi.delete | setting（ajax设置）:object | 使用Http DELETE发起Ajax请求 |
mwc.restApi.put | setting（ajax设置）:object | 使用Http PUT发起Ajax请求 |
mwc.restApi.post | setting（ajax设置）:object | 使用Http POST发起Ajax请求 |
7.3 使用示例
7.3.1 GET
示例1：
mwc.restApi.get({
url: '/api/Menus',
success: function (data) {
$.each(data, function (i, v) {
if (v.sub_button) {
$.each(v.sub_button, function (i1, v1) {
v.sub_button[i1] = $.extend(self.getModelTpl(), v1);
})
}
data[i] = $.extend(self.getModelTpl(), v);
});
self.Menus(ko.mapping.fromJS(data));
}
});示例2：
mwc.restApi.get({
//请求地址
url: '/api/News/' + newValue,
//是否锁定UI
isBlockUI: true,
//可选，锁定元素
blockUI: componentInfo.element,
//成功函数
success: function (data) {
self.Name(data.Title);
self.Url('/MediaFiles/thumb/' + data.ThumbMediaId + '.jpg');
}
});示例3：
//加载数据
this.loadData = function () {
mwc.restApi.get({
//请求地址
url: '/api/News/' + self.currentPageIndex() + '/' + self.pageSize(),
//是否锁定UI
isBlockUI: true,
//可选，锁定元素
blockUI: componentInfo.element,
//成功函数
success: function (data) {
self.dataRows(data.DataRows);
self.totalCount(data["TotalItemCount"]);
self.pages(self.getPagesArr());
self.showLoader(false);
}
});
};
7.3.2 POST
示例1：
mwc.restApi.post({
url: "@Model.TemplateNo",
contentType: "application/x-www-form-urlencoded",
data: dataJson,
success: function (data) {
if (data.Success && data.Result)
location.href = '/[email protected]&batchNumber=' + data.Result;
else
mwc.message.warn('操作失败，具体原因请查看系统日志！');
}
});7.3.3 PUT
mwc.restApi.put({
url: '/api/Menus',
data: { menu: { button: data } }
});7.3.4 DELETE
mwc.restApi.delete({
url: "/api/images/" + $(this).data("id"),
success: function (data) {
mwc.notify.success("操作成功！");
setTimeout(function () {
location.reload();
}, 1000);
}
});已经在封装微信H5 UI框架的脚本了，请关注后续更新。