Toggle navigation
首页
产品中心
全新RDIF.vNext低代码框架
镇店
.NET C/S开发框架
.NET Web敏捷开发框架
.NET 快速开发框架(全新EasyUI版本)
.NET 代码生成器
.NET WebAPI服务端开发框架
客户案例
付款方式
国思学堂
技术文章
新闻资讯
下载
关于
首页
技术文章
前端技术
正文
原创
2019-05-28
浏览 (
11610
)
微信公众号开发C#系列-12、微信前端开发利器:WeUI
## 1、前言 ## 通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识。后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了。关于手机端的浏览器的兼容性问题相信一直是开发者们的一块心病,对于微信开发前端组件这一块总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了。于是乎博主打算另辟蹊径,找找基于微信开发的移动端UI组件,最后找到了微信官方开发的一套前端组件:WeUI。 ## 2、WeUI基本介绍 ## ### 2.1 WeUI概述 ### WeUI、微信公众号开发的瑞士军刀。WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。有了这个作为基础,我们再也不用担心微信开发的浏览器兼容性问题了,微信官方推出的这个东西拯救了千千万万的开发者! jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。 jQuery WeUI 的最大特点是它只提供UI组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用。无论你的项目是基于jQuery,还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目,也几乎可以做到拿来即用。 WeUI开源地址:[https://github.com/Tencent/weui](https://github.com/Tencent/weui) WeUI使用示例:[https://weui.io/](https://weui.io/) 基于jquery的WeUI:[http://jqweui.com/](http://jqweui.com/)(提供了大量的第三方组件库) ### 2.2 为什么选择jQuery WeUI ### jQuery WeUI 的定位正如 jQuery 的定位:做一把锋利易用的小刀,而不是做一个笨重的大炮。 - 简单易用,无上手难度 - 丰富强大的组件库,并且还在不断完善中 - 轻量,无限制,可以结合任何主流JS框架使用,比如 `Vue, Angular, React` 等 - 高性能的 CSS3 动画,低端手机上依然可以较流畅运行 - 详尽完善的官方文档 - 标准稳定的API,基本可以保证版本透明更新 - 基于 MIT 协议发布,免费开源 下面引用几张WeUI官方提供的jQuery WeUI组件展示。 ![jQuery WeUI组件展示](http://doc.rdiframework.net/blog/article/20190528112054947.png-pw) ![jQuery WeUI组件展示](http://doc.rdiframework.net/blog/article/20190528112118189.png-pw) ## 3、jQuery WeUI基本用法 ## 考虑到大家对WeUI组件的使用有忧虑,不知如何下手。下面我就从最基础的开始,手把手教你入门WeUI。已经很熟悉的朋友请直接跳过此段,前往官方网站查看demo。 **1、引用必须的文件** 如果你用的是原始的开发方式,比如基于jQuery的开发,那么你首先需要去Github上面将WeUI的源文件down下来,然后引入到你的项目;如果是基于npm管理组件,使用npm命令的方式引入WeUI组件即可。这里我们使用的是原始的开发方式。如果你只需要WeUI的css样式支持,那么你只需要引入weui.css文件即可;如果除了样式之外,还需要WeUI的js组件支持,那么你还需要引用另外一个包:weui.js。下面先介绍基础的WeUI样式库,先来看看WeUI到底能为我们带来啥,后面再来分享WeUI.js以及jquery.WeUI.js的相关技术。 要使用WeUI,这里首先必须引入css样式文件 <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" /> **2、最基础的组件样式** 下面我们以一个最基础的表单来展示WeUI的使用方法,如下我们开发一个个人资料录入的页面效果。 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>个人资料录入</title> <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css" /> </head> <body> <div class="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-cells__title">填写个人资料</div> <div class="weui-cells weui-cells_form"> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">姓名</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="text" placeholder="请输入姓名" /> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">QQ</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="number" pattern="[0-9]*" placeholder="QQ号" /> </div> </div> <div class="weui-cell weui-cell_vcode"> <div class="weui-cell__hd"> <label class="weui-label">手机号</label> </div> <div class="weui-cell__bd"> <input class="weui-input" type="tel" placeholder="请输入手机号" /> </div> <div class="weui-cell__ft"> <button class="weui-vcode-btn">获取验证码</button> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="" class="weui-label">出生日期</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="date" value="" /> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="" class="weui-label">注册时间</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="datetime-local" value="" placeholder="" /> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">性别</label></div> <div class="weui-cell__bd"> <div class="weui-cells weui-cells_radio"> <label class="weui-cell weui-check__label" for="x11"> <div class="weui-cell__bd"> <p>男</p> </div> <div class="weui-cell__ft"> <input type="radio" class="weui-check" name="radio1" id="x11" /> <span class="weui-icon-checked"></span> </div> </label> <label class="weui-cell weui-check__label" for="x12"> <div class="weui-cell__bd"> <p>女</p> </div> <div class="weui-cell__ft"> <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked" /> <span class="weui-icon-checked"></span> </div> </label> </div> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">爱好</label></div> <div class="weui-cell__bd"> <div class="weui-cells weui-cells_checkbox"> <label class="weui-cell weui-check__label" for="s11"> <div class="weui-cell__hd"> <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked" /> <i class="weui-icon-checked"></i> </div> <div class="weui-cell__bd"> <p>篮球</p> </div> </label> <label class="weui-cell weui-check__label" for="s12"> <div class="weui-cell__hd"> <input type="checkbox" name="checkbox1" class="weui-check" id="s12" /> <i class="weui-icon-checked"></i> </div> <div class="weui-cell__bd"> <p>足球</p> </div> </label> <label class="weui-cell weui-check__label" for="s13"> <div class="weui-cell__hd"> <input type="checkbox" name="checkbox1" class="weui-check" id="s13" /> <i class="weui-icon-checked"></i> </div> <div class="weui-cell__bd"> <p>游泳</p> </div> </label> </div> </div> </div> <div class="weui-cell weui-cell_select"> <div class="weui-cell__bd"> <select class="weui-select" name="select1"> <option selected="" value="1">微信号</option> <option value="2">QQ号</option> <option value="3">Email</option> </select> </div> </div> <div class="weui-cell weui-cell_vcode"> <div class="weui-cell__hd"><label class="weui-label">验证码</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="text" placeholder="请输入验证码" /> </div> <div class="weui-cell__ft"> <img class="weui-vcode-img" src="vcode.png" /> </div> </div> </div> <div class="weui-btn-area"> <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a> </div> </div> </div> </div> </body> </html> 我们用google浏览器的移动端模式测试效果如下: ![个人资料录入](http://doc.rdiframework.net/blog/article/20190528112142566.png-pw) **代码讲解** (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切换即可。 ## 4、其他基础组件展示 ## ### 4.1、switch开关 ### <div class="container" id="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-cells__title">开关</div> <div class="weui-cells weui-cells_form"> <div class="weui-cell weui-cell_switch"> <div class="weui-cell__bd">是否显示</div> <div class="weui-cell__ft"> <input class="weui-switch" type="checkbox" /> </div> </div> <div class="weui-cell weui-cell_switch"> <div class="weui-cell__bd">是否置顶(兼容IE浏览器写法)</div> <div class="weui-cell__ft"> <label for="switchCP" class="weui-switch-cp"> <input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked" /> <div class="weui-switch-cp__box"></div> </label> </div> </div> </div> </div> </div> </div> ![switch开关](http://doc.rdiframework.net/blog/article/20190528112158961.png-pw) ### 4.2、文本框搜索组件 ### <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>WeUI测试</title> <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" /> @*<--example.css可以不引用-->*@ <link rel="stylesheet" href="/Content/weui-master/dist/example/example.css" /> </head> <body> <div class="container" id="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-search-bar" id="searchBar"> <form class="weui-search-bar__form" onsubmit="return false;"> <div class="weui-search-bar__box"> <i class="weui-icon-search"></i> <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required /> <a href="javascript:" class="weui-icon-clear" id="searchClear"></a> </div> <label class="weui-search-bar__label" id="searchText"> <i class="weui-icon-search"></i> <span>搜索</span> </label> </form> <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> </div> <div class="weui-cells searchbar-result" id="searchResult"> </div> </div> </div> </div> <script src="~/scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function(){ var $searchBar = $('#searchBar'), $searchResult = $('#searchResult'), $searchText = $('#searchText'), $searchInput = $('#searchInput'), $searchClear = $('#searchClear'), $searchCancel = $('#searchCancel'); function hideSearchResult(){ $searchResult.hide(); $searchInput.val(''); } function cancelSearch(){ hideSearchResult(); $searchBar.removeClass('weui-search-bar_focusing'); $searchText.show(); } $searchText.on('click', function(){ $searchBar.addClass('weui-search-bar_focusing'); $searchInput.focus(); }); $searchInput .on('blur', function () { if(!this.value.length) cancelSearch(); }).on('keydown', function (event) { if (event.keyCode == 13) { alert("执行搜索"); } }); ; $searchClear.on('click', function(){ hideSearchResult(); $searchInput.focus(); }); $searchCancel.on('click', function(){ cancelSearch(); $searchInput.blur(); }); }); </script> </body> </html> ![文本框搜索组件](http://doc.rdiframework.net/blog/gif/%E6%96%87%E6%9C%AC%E6%A1%86%E6%90%9C%E7%B4%A2%E7%BB%84%E4%BB%B6.gif) ### 4.3、正在加载、暂无更多、查看更多效果 ### <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>WeUI测试</title> <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" /> </head> <body> <div class="container" id="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-loadmore"> <i class="weui-loading"></i> <span class="weui-loadmore__tips">正在加载</span> </div> <div class="weui-loadmore weui-loadmore_line"> <span class="weui-loadmore__tips">暂无数据</span> </div> <div class="weui-panel__ft"> <a href="#" style="border-bottom: 1px solid #e5e5e5;border-top: 1px solid #e5e5e5;" class="weui-cell weui-cell_access weui-cell_link"> <div class="weui-cell__bd" style="font-size:16px;">查看更多</div> <span class="weui-cell__ft"></span> </a> </div> </div> </div> </div> </body> </html> ![正在加载、暂无更多、查看更多效果](http://doc.rdiframework.net/blog/gif/%E6%AD%A3%E5%9C%A8%E5%8A%A0%E8%BD%BD%E3%80%81%E6%9A%82%E6%97%A0%E6%9B%B4%E5%A4%9A%E3%80%81%E6%9F%A5%E7%9C%8B%E6%9B%B4%E5%A4%9A%E6%95%88%E6%9E%9C.gif) ### 4.4、图片全屏预览 ### 首先引入必须的样式文件 <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" /> <link href="~/Content/jquery-weui-master/dist/css/jquery-weui.css" rel="stylesheet" /> 在body最后面引入js <script src="~/scripts/jquery-1.9.1.min.js"></script> <script src="~/Content/jquery-weui-master/dist/js/jquery-weui.min.js"></script> <script src="~/Content/jquery-weui-master/dist/js/swiper.js"></script> 需要说明的是这个效果需要jquery-weui.js组件的支持。你需要去down这个组件的dist目录,然后引用dist目录下面的swiper.js文件。这块有问题的可以单独留言。 引入相关的css与js文件之后,下面就可以开始着手写html了。 <div class="container" id="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-btn-area"> <a class="weui-btn weui-btn_primary" href="javascript:" id="showQuery">浏览图片</a> </div></div> </div> </div> js代码初始化 script type="text/javascript"> var pb1 = $.photoBrowser({ items: [ "/Content/jquery-weui-master/dist/demos/images/swiper-1.jpg", "/Content/jquery-weui-master/dist/demos/images/swiper-2.jpg", "/Content/jquery-weui-master/dist/demos/images/swiper-3.jpg" ] }); $('#showQuery').on('click', function () { pb1.open(); //打开 }); </script> ![图片全屏预览](http://doc.rdiframework.net/blog/gif/%E5%9B%BE%E7%89%87%E5%85%A8%E5%B1%8F%E9%A2%84%E8%A7%88.gif) swiper组件还提供了带图片文字描述的效果,和PC端的焦点图效果一样一样的。我们将上述js代码稍作修改: <script type="text/javascript"> var pb1 = $.photoBrowser({ items: [ { image: "/Content/jquery-weui-master/dist/demos/images/swiper-1.jpg", caption: "文字描述1" }, { image: "/Content/jquery-weui-master/dist/demos/images/swiper-2.jpg", caption: "文字描述2" }, { image: "/Content/jquery-weui-master/dist/demos/images/swiper-3.jpg", caption: "文字描述3" } ] }); $('#showQuery').on('click', function () { pb1.open(); //打开 }); </script> ![图片全屏预览1](http://doc.rdiframework.net/blog/gif/%E5%9B%BE%E7%89%87%E5%85%A8%E5%B1%8F%E9%A2%84%E8%A7%881.gif) swiper组件的应用有很多可供参考的使用方式,大家可根据实际自行扩展。 ## 5、微信开发系列文章列表 ## - [微信公众号开发C#系列-1、微信公众平台注册](http://www.guosisoft.com/article/detail/204) - [微信公众号开发C#系列-2、微信公众平台接入指南](http://www.guosisoft.com/article/detail/205) - [微信公众号开发C#系列-3、搭建微信本地调试环境-借助花生壳实现内网穿透](http://www.guosisoft.com/article/detail/206) - [微信公众号开发C#系列-4、获取接口调用凭证](http://www.guosisoft.com/article/detail/207) - [微信公众号开发C#系列-5、用户和用户组管理-支持同步](http://www.guosisoft.com/article/detail/208) - [微信公众号开发C#系列-6、消息管理-普通消息接受处理](http://www.guosisoft.com/article/detail/210) - [微信公众号开发C#系列-7、消息管理-接收事件推送](http://www.guosisoft.com/article/detail/211) - [微信公众号开发C#系列-8、自定义菜单及菜单响应事件的处理](http://www.guosisoft.com/article/detail/212) - [微信公众号开发C#系列-9、多公众号集中管理](http://www.guosisoft.com/article/detail/213) - [微信公众号开发C#系列-10、长链接转短链接](http://www.guosisoft.com/article/detail/214) - [微信公众号开发C#系列-11、生成带参数二维码应用场景](http://www.guosisoft.com/article/detail/215) ## 参考文章 ## [微信公众平台技术文档-官方](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432) [Senparc.Weixin SDK + 官网示例源代码](https://github.com/JeffreySu/WeiXinMPSDK) [RDIFramework.NET — 基于.NET的快速信息化系统开发框架 — 系列目录](http://www.guosisoft.com/article/detail/190) [RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件介绍](http://www.guosisoft.com/article/detail/169) [RDIFramework.NET框架SOA解决方案(集Windows服务、WinForm形式与IIS形式发布)-分布式应用](http://www.guosisoft.com/article/detail/189) [RDIFramework.NET代码生成器全新V3.5版本发布-重大升级](http://www.guosisoft.com/article/detail/199) ----- 一路走来数个年头,感谢RDIFramework.NET框架的支持者与使用者,大家可以通过下面的地址了解详情。 RDIFramework.NET官方网站:http://www.rdiframework.net/ RDIFramework.NET官方博客:http://blog.rdiframework.net/ 同时需要说明的,以后的所有技术文章以官方网站为准,欢迎大家收藏! RDIFramework.NET框架由专业团队长期打造、一直在更新、一直在升级,请放心使用! 欢迎关注RDIFramework.net框架官方公众微信(微信号:guosisoft),及时了解最新动态。 扫描二维码立即关注 ![微信号:guosisoft](http://doc.rdiframework.net/weixin.png)
正文到此结束
本文标签:
.NET
微信开发
挨踢业界
Web前端
版权声明:
本站原创文章,由
guosisoft.com
发布,遵循
CC 4.0 by-sa
版权协议,转载请附上原文出处链接和本声明。
上一篇
微信公众号开发C#系列-11、生成带参数二维码应用场景
下一篇
RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件Web业务平台
热门推荐
{{article.title}}
热门指数:
浏览({{article.lookCount + 5000}})
相关文章
{{article.title}}
该篇文章的评论功能暂时被站长关闭
说给你听
本文目录
文章标签
RDIF.NET
其他
微信开发
.NET
消息交互
.NetCore
项目管理
常用工具
工作流
Web前端
数据库
挨踢业界
随机文章
8 种主流数据迁移工具技术选型
信息系统项目管理系列之九:项目质量管理
.NET分离exe和dll在不同的目录让你的程序更整洁
压缩文本、字节或者文件的压缩辅助类-GZipHelper 欢迎收藏
ORACLE常见问题一千问[601至700](不怕学不成、就怕心不诚!)
解放双手,markdown文章神器,Typora+PicGo+七牛云图床实现自动上传图片
RDIFramework.NET V3.3 Web版新增系统公告、系统新闻模块方便需要的客户
RDIFramework.NET V3.3 Web版新增报表管理功能模块-重量级实用功能
一文搞懂flex(弹性盒布局)
恭喜:创造历史,C#正式荣登TIOBE 2023年年度编程语言奖
信息系统项目管理系列之六:项目范围管理
史上最全面的SignalR系列教程-5、SignalR 实现一对一聊天
如何做好正式交付使用前的项目演示
git用.gitignore忽略指定文件
RDIFramework.NETV2.9版本 Web新增至14套皮肤风格+三套界面组合(共42套皮肤组合)
RDIFramework.NET敏捷开发框架WinForm新增通用附件管理控件
ORACLE常见问题一千问[801至900](不怕学不成、就怕心不诚!)
RDIFramework.NET V3.3 Web版新增日程管理功能模块
RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->用户管理模块新增“重置用户密码”功能
.Net Core发布到Linux下验证码失效的处理
网站信息
文章总数:599 篇
标签总数:8 个
分类总数:8 个
留言数量:1385 条
在线人数:
89
人
运行天数:1321天
最后更新:2023-05-18
QQ:406590790
13005007127