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等首次没见过的代码-文件吓到、真正有用的只是如下：

    <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更适合移动端听说。

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.日期组件：<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无效 。该组件赋值需要如下代码：

<input type="datetime-local" name="" value="2015-07-19T05:20">   注意：其中赋值的数字都是两位数，不足两位的话需要用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,不用数据库)