前言：年前的两个星期，学习了下微信公众号的开发。后端基本能够基于盛派的第三方sdk能搞定大部分事宜。剩下的就是前端了，关于手机端的浏览器的兼容性，一直是博主的一块心病，因为博主一直专注于bootstrap的相关组件学习，知道bootstrap做响应式没有任何问题，所以曾经尝试过直接用bootstrap来布局，对于一些简单的栅格布局，bootstrap没有任何问题，可是一旦涉及前端组件这一块的时候，总是找不到合适的移动端组件，什么都要自己去实现，这个开发成本就大了去了。于是乎博主打算另辟蹊径，找找基于微信开发的移动端UI组件，最后找到了微信官方开发的一套前端组件：WeUI。
本文原创地址：http://www.cnblogs.com/landeanfen/p/8473755.html
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。有了这个作为基础，妈妈再也不用担心微信开发的浏览器兼容性问题了，微信官方推出的东西应该比较靠谱吧！
WeUI开源地址：https://github.com/Tencent/weui
WeUI使用示例：https://weui.io/
基于jquery的WeUI：http://jqweui.com/（提供了大量的第三方组件库）
考虑到一些园友对于第三方组件的使用不知道如何下手或者不太熟悉，博主不厌其烦从最基础的开始，手把手教你入门WeUI。已经很熟悉的园友请直接跳过此段，前往官方网站查看demo。
如果你用的是原始的开发方式，比如基于jQuery的开发，那么你首先需要去Github上面将WeUI的源文件down下来，然后引入到你的项目；如果是基于npm管理组件，使用npm命令的方式引入WeUI组件即可。这里博主使用的是原始的开发方式。需要说明的是，如果你只需要WeUI的css样式支持，那么你只需要引入weui.css文件即可；如果除了样式之外，还需要WeUI的js组件支持，那么你还需要引用另外一个包：weui.js。今天这篇，博主就先介绍下基础的WeUI样式库，先来看看WeUI到底能为我们带来啥，以后如果有机会再来分享WeUI.js以及jquery.WeUI.js的相关技术。
这里首先引入必须的css样式文件
官方的demo里面为了使演示的效果更好，还引入了example.css文件，但这个并不是必须的！
第一个例子我们还是用最基础的表单来说明。我们来看看下面一个基础的个人资料录入的页面效果：
我们用google浏览器的移动端模式测试效果如下：
代码说明
（1）网页上面的 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> 这一句必须要有，这个和WeUI无关，是浏览器的显示比例问题。建议各位准备做移动端开发之前可以百度下viewport的含义，这样更容易理解响应式。根据博主的理解，加这一句是告诉浏览器在不同的设备上面的显示比例问题。
（2）最外面必须要有一个大的容器div，即上述代码里面的 <div class="container" id="container"> 这个标签；页面的所有标签必须放在这个里面；
（3）上述代码里面的radio和checkbox的效果是可以切换的。比如上述代码改下可以将性别这一项变成多选选，爱好这一项变成单选，你只需要将radio和checkbox切换即可。
有了上面的基础表单作为基础，我们演示其他示例就简单很多了。这里并不会将WeUI官网上面的例子挨个演示个遍，只是抽其中几个来演示和讲解。
（1）switch开关
效果如下
（2）文本框搜索组件
（3）正在加载、暂无更多、查看更多效果
效果展示
这些东西虽然不难，但如果全部都要我们自己去实现，估计也得花不少时间吧。
虽然在移动端大部分情况下不建议使用弹出操作，但某些情况下，弹出一些东西操作起来其实也挺方便的，还是那句话：存在即合理。没有最好的方式，只有最适合的方式。我们来看博主简单封装的一段弹出层代码。
以上都是一些最基础的Dom操作，如果需要在项目里面用起来，可以进行简单的dialog组件封装。
第二个例子博主不打算再演示原生的WeUI效果了，来看一个基于jquery的WeUI封装示例。
首先引入必须的文件
在body最后面引入js
需要说明的是这个效果需要jquery-weui.js组件的支持。你需要去down这个组件的dist目录，然后引用dist目录下面的swiper.js文件。这块有问题的可以单独留言。
引入了文件之后，然后第二部就是我们的html了
最后是js初始化
效果如下：
这里是通过图片的物理路径去动态渲染生成img标签的。效果还不过！除此之外，swiper组件还提供了带图片文字描述的效果，和PC端的焦点图效果一样一样的。
我们将上述js代码稍作修改：
当然，大部分情况下，我们在实际使用的时候这种通过已经存在的图片文件的路径渲染的场景不是很多，更多的是通过页面上已经存在的img标签的来渲染图片的。我们来个例子试试水。
比如我们复制一段网页内容，里面是图文混合的。然后用js去提取其中图片的src。
我们继续优化下，将最上面的按钮去掉，然后给每个图片加上点击事件，这样是不是更加真实呢！
在寻找微信前端框架的时候，关注过各种微信公众号，发现一个叫“爱摄汇”的公众号，它的前端效果就是基于WeUI去做的，跟着学习了下，觉得它功能简单，但是页面效果做得还可以，对摄影有兴趣或者想学习WeUI基础方法的园友可以关注看看。
至此本篇基本结束。就这么泛泛总结了下，花了几乎两天时间，写点东西不容易。如果大家有其他关于WeUI的使用问题，可以留言！等以后再用到更多WeUI的高级功能，再来跟大家做分享。如果你觉得本文能够帮助你，可以右边随意 打赏 博主。
本文原创出处：http://www.cnblogs.com/landeanfen/
欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利