weui開發筆記 - JavaShuo

1.標準的weui只是一個css皮膚，固然裏面有h5特性因此有一些很好的組件，好比時間選擇控件、數字輸入框（用於手機號等），在ios——微信中能夠作到完美的展現。css

2.ui框架以手機移動端爲優先顯示（bootstrape也是的）。樣式、風格、功能都是移動爲要。一些按鈕的效果僅在手機端兼容，在pc端可能會錯誤或者簡配，好比input type="datetime-local"。html

3.weui代碼、官網、github本身百度，一大把。這裏介紹下https://jqweui.cn/。上面有好多官方原版例子、還有擴展例子、包括js等。前端

4.貌似如今weui、jqweui、react-weui已在vs nuget上，不過我沒裝。能夠試下，省的再手動下載各類css、js等文件了、固然也能夠用jqweui裏說明的cdn，不過偶爾會cdn掛掉（開發環境就用cdn也無妨）。vue

5.我用的比較可能是tabbar、flex、form、weui-cells，而後就是各類input，js-css控制各類div。html5

6.第一點也說過，weui只是一套css皮膚+js組件最多（weui.js）。因此，別被官網github上的龐大代碼量、gulpfile.js等首次沒見過的代碼-文件嚇到、真正有用的只是以下：react

<link href="@Url.Content("~/Content/example.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/demos.css")" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>

其中example.css、demos.css不是必須的，其餘建議引入的。weui官網使用的js不是jquery、而是zepto.js實際均可以。可能zepto更適合移動端據說。jquery

weui徹底能夠用於任何web項目：Asp.Net MVC,WebForm、先後端分離的前端項目、vuejs、bootstrape組合。ios

像tabbar、navbar這種導航組件徹底能夠放在_LayoutWithTabbar中、引入weui標準css、js、在裏面定義導航組件，須要導航欄的一概引用它；無需使用導航組件的頁面引入layout.cshtml（好比彈框頁面、單頁面程序，則只需引入weui標準css、js）。git

須要注意的坑：github

1.原版weui的一些樣式寫在了example.css、demos.css，因此有時若是出來的效果和官網的不一樣、仍是用瀏覽器開發者工具細細看下css。最好也從官網上拷貝2個文件下來。

2.日期組件：<input class="weui-input" type="datetime-local" value="" id="ReservesServiceDt" name="ReservesServiceDt">

這是h5特性，參考http://www.w3school.com.cn/html5/html_5_form_input_types.asp。<input type="datetime" 在chrome無效。該組件賦值須要以下代碼：

注意：其中賦值的數字都是兩位數，不足兩位的話須要用0來填充。
參考：
<input type="datetime-local" name="" value="2015-07-19T05:20">

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,不用數據庫)