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. Love2D游戏引擎制作贪吃蛇游戏

    代码地址如下:http://www.demodashi.com/demo/15051.html Love2D游戏引擎制作贪吃蛇游戏 内附有linux下的makefile,windows下的生成方法请查 ...

  2. 【转】WPF 与 WinForm 间的按键值(枚举)转换

    There is a function for that in System.Windows.Input.KeyInterop static class. Try:var inputKey = Key ...

  3. 如何用jQuery获取选中行固定列的数据

    [本文出自天外归云的博客园] 问题:把选中行的ID统计出来,组成一个数组传给后台(选中行的特点:class为danger) 办法如下: // 多选后点击下线按钮 $("#offline&qu ...

  4. [转]list的交集,差集,并集

    原文地址:https://www.cnblogs.com/changfanchangle/p/8966860.html 工作中用到了list的取差集,发现还是挺好用的.所以记录下. 需求 list的方 ...

  5. session_id()和session_regenerate_id()对原来session文件和其中数据是怎么处理的

    一.session_id()对原来session文件和里面的数据,是怎么处理的? 测验办法:<?php $sid = md5("aaad");session_id($sid) ...

  6. javaEE中config.properties文件乱码解决办法

    http://jingyan.baidu.com/article/ed2a5d1f3381d709f6be17f8.html ————————————————————————————————————— ...

  7. Angular4中路由Router类的跳转navigate

    最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习. 官方地址:https://angul ...

  8. 消息中间件系列三:使用RabbitMq原生Java客户端进行消息通信(消费者(接收方)自动确认模式、消费者(接收方)自行确认模式、生产者(发送方)确认模式)

    准备工作: 1)安装RabbitMQ,参考文章:消息中间件系列二:RabbitMQ入门(基本概念.RabbitMQ的安装和运行) 2.)分别新建名为OriginalRabbitMQProducer和O ...

  9. Glide和Govendor安装和使用

    两个都是Go的包管理工具,二选一 Glide参考:golang 依赖管理 /etc/profile #Go export GOROOT=/home/lintong/software/go export ...

  10. Mybatis常考面试题汇总(附答案)

    1.#{}和${}的区别是什么? #{}和${}的区别是什么? 在Mybatis中,有两种占位符 #{}解析传递进来的参数数据 ${}对传递进来的参数原样拼接在SQL中 #{}是预编译处理,${}是字 ...