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 = '/WeiChat_MessagesTemplateSendLog?templateNo=@Model.TemplateNo&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框架的腳本了，請關注后續更新。