java mvc jquery weui_weui开发笔记
1.標準的weui只是一個css皮膚,當然里面有h5特性所以有一些很好的組件,比如時間選擇控件、數字輸入框(用于手機號等),在ios——微信中可以做到完美的展示。
2.ui框架以手機移動端為優先顯示(bootstrape也是的)。樣式、風格、功能都是移動為要。一些按鈕的效果僅在手機端兼容,在pc端可能會錯誤或者簡配,比如input type="datetime-local"。
3.weui代碼、官網、github自己百度,一大把。這里介紹下https://jqweui.cn/。上面有好多官方原版例子、還有擴展例子、包括js等。
4.貌似現在weui、jqweui、react-weui已在vs nuget上,不過我沒裝。可以試下,省的再手動下載各種css、js等文件了、當然也可以用jqweui里說明的cdn,不過偶爾會cdn掛掉(開發環境就用cdn也無妨)。
5.我用的比較多是tabbar、flex、form、weui-cells,然后就是各種input,js-css控制各種div。
6.第一點也說過,weui只是一套css皮膚+js組件最多(weui.js)。所以,別被官網github上的龐大代碼量、gulpfile.js等首次沒見過的代碼-文件嚇到、真正有用的只是如下:
其中example.css、demos.css不是必須的,其他建議引入的。weui官網使用的js不是jquery、而是zepto.js實際都可以。可能zepto更適合移動端聽說。
weui完全可以用于任何web項目:Asp.Net MVC,WebForm、前后端分離的前端項目、vuejs、bootstrape組合。
像tabbar、navbar這種導航組件完全可以放在_LayoutWithTabbar中、引入weui標準css、js、在里面定義導航組件,需要導航欄的一律引用它;無需使用導航組件的頁面引入layout.cshtml(比如彈框頁面、單頁面程序,則只需引入weui標準css、js)。
需要注意的坑:
1.原版weui的一些樣式寫在了example.css、demos.css,所以有時如果出來的效果和官網的不同、還是用瀏覽器開發者工具細細看下css。最好也從官網上拷貝2個文件下來。
2.日期組件:
這是h5特性,參考http://www.w3school.com.cn/html5/html_5_form_input_types.asp。
注意:其中賦值的數字都是兩位數,不足兩位的話需要用0來填充。
參考:
var now = new Date(); //jquery Date()用法:http://www.w3school.com.cn/jsref/jsref_obj_date.asp
now.setDate(now.getDate() + 1); //提前一天預約。設置表單中的初始時間,比當前時間多一天
var str = now.getFullYear() + "-" + fix((now.getMonth() + 1), 2) + "-" + fix(now.getDate(), 2) + "T" + fix(now.getHours(), 2) + ":" + fix(now.getMinutes(), 2);
$("#ReservesServiceDt").val(str);
獲取datetime-local input的值也是"2015-07-19T05:20"。
//ReservesServiceDt參數格式為:2018-03-17T14:23。datetime-local的格式為YYYY-MM-DDTHH:mm:ss,注意日期和時間之間有一個T,這是ISO 8601的標準
//后端需要處理ReservesServiceDt參數格式為格式,即Replace('T',' ')。但最好前端就處理好。但無論哪種實現方式,原理上后端接口的controller 實現一樣
//實現1:(較好)這里采用前端處理好的方法、所以采用$("#form").serializeArray()后轉json字符串、而不是$("#form").serialize()
參考:http://blog.csdn.net/White_Idiot/article/details/77772568(但有些問題)最終代碼參考:
var formObject = {};
var formData = $("#form").serializeArray();
for (var item in formData) {
formObject[formData[item].name] = formData[item].value;
}
formObject.ReservesServiceDt = ReservesServiceDt.replace('T', ' ');
var formJSON = JSON.stringify(formObject);
另可參考js Date對象文檔:http://www.w3school.com.cn/jsref/jsref_obj_date.asp
我的weui測試項目:WeUIMvcApp(是mvc3),https://gitee.com/nlh774/weui 有需要的可以下載來看。應該可以直接運行(VS2012,MVC3,不用數據庫)
總結
以上是生活随笔為你收集整理的java mvc jquery weui_weui开发笔记的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: [react] react与angula
- 下一篇: web前端常用代码于面试等资源