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,不用数据库)

 

weui开发笔记的更多相关文章

  1. [开发笔记]-未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService...匹配的导出【转载自:酷小孩】

    原文地址:http://www.cnblogs.com/babycool/p/3199158.html 今天打算用VisualStudio2012做一个js效果页面测试的时候,打开VS2012新建项目 ...

  2. EasyUI 开发笔记(二)

    接上篇 :EasyUI 开发笔记(一)  (http://www.cnblogs.com/yiayi/p/3485258.html) 这期就简单介绍下, easyui 的 list 展示, 在easy ...

  3. EasyUI 开发笔记(一)

    由于某些原因,在公司做的后台需要改成类似于Ext.js 形式的后台,主要看好其中的 框架布局,以及tab开页面和弹出式内部窗体. 后来看看,改成EasyUI,较Ext.js 库小很多,也便于公司的初级 ...

  4. [Openwrt 项目开发笔记]:Openwrt平台搭建(一)

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 最近开始着手进行Openwrt平台的物联网网关设 ...

  5. Android移动APP开发笔记——Cordova(PhoneGap)通过CordovaPlugin插件调用 Activity 实例

    引言 Cordova(PhoneGap)采用的是HTML5+JavaScript混合模式来开发移动手机APP,因此当页面需要获取手机内部某些信息时(例如:联系人信息,坐标定位,短信等),程序就需要调用 ...

  6. Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

    引言 简单介绍一下Cordova的来历,Cordova的前身叫PhoneGap,自被Adobe收购后交由Apache管理,并将其核心功能开源改名为Cordova.它能让你使用HTML5轻松调用本地AP ...

  7. 开发笔记:基于EntityFramework.Extended用EF实现指定字段的更新

    今天在将一个项目中使用存储过程的遗留代码迁移至新的架构时,遇到了一个问题——如何用EF实现数据库中指定字段的更新(根据UserId更新Users表中的FaceUrl与AvatarUrl字段)? 原先调 ...

  8. Lucene/Solr搜索引擎开发笔记 - 第1章 Solr安装与部署(Jetty篇)

    一.为何开博客写<Lucene/Solr搜索引擎开发笔记> 本人毕业于2011年,2011-2014的三年时间里,在深圳前50强企业工作,从事工业控制领域的机器视觉方向,主要使用语言为C/ ...

  9. [openwrt 项目开发笔记]: 传送门

    “Openwrt 项目开发笔记”系列传送门: [Openwrt 项目开发笔记]:Openwrt平台搭建(一) (2014-07-11 00:11) [Openwrt 项目开发笔记]:Openwrt平台 ...

随机推荐

  1. dubbo配置多个注册中心

    用法: <dubbo:registry address="zookeeper://10.0.1.131:2181?backup=10.0.1.132:2181,10.0.1.133:2 ...

  2. 删除 nuget 文件夹内容

    vs2017 ->工具->选项->NuGet 包管理器->清除所有NuGet缓存

  3. python两个 list 获取交集,并集,差集的方法

    1. 获取两个list 的交集 #方法一: a=[2,3,4,5] b=[2,5,8] tmp = [val for val in a if val in b] print tmp #[2, 5] # ...

  4. Python(字符编码)

    https://www.cnblogs.com/zihe/p/6993891.html 一 了解字符编码的知识储备 1. 文本编辑器存取文件的原理(nodepad++,pycharm,word) 打开 ...

  5. Git忽略规则.gitignore忽略node_modules文件夹

    在项目文件夹里添加.gitignore的文件 打开文件,在里面添加 /node_modules

  6. Python定期删除文件、整理文件夹

    1.根据传入的参数,文件所在目录,匹配文件的正则表达式,过期天数进行删除,这些可写在配置文件del_file.conf. del_file3.py #!/usr/bin/env python # en ...

  7. 【iCore4 双核心板_uC/OS-II】例程二:任务的建立与删除

    一.实验说明: 本例程建立三个任务,通过任务寄存器来实现任务的建立与删除功能.红灯和绿灯同时以固定 频率闪烁,当任务寄存器为5时,删除绿灯闪烁的任务LED1,此时只有红灯闪烁,当任务寄存器的 值为10 ...

  8. js 暂时存储 sessionStorge

    H5的storage有sessionstorage&localStorage,其中他们的共同特点是API相同 下面直接上代码,storage中的存储与删除: <!DOCTYPE html ...

  9. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  10. log4j Tricks (log4j 1.2)

    1. 开启 log4j 框架内部的日志输出到控制台 # 在 log4j.properties 中添加log4j.debug=true # 配置 log4j 框架内部的日志通过 System.out 输 ...