Magicodes.WeiChat——後臺JS框架封裝

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框架的腳本了，請關注後續更新。