WeUI微信UI库 v2.4.0 源码下载

来源:脚本之家  责任编辑:小易  

weui.css只是微信的UI布局weui应该还包括他的js文件吧,包含了js文件才能实现微信表单的响应,包括页面切换,按钮点击事件等效果。weui应该提供了一个默认的网页路由式交互demo,这个可以好好研究一下,对做手机H5页面非常有用www.zgxue.com防采集请勿采集本网。

源码大小:334KB 源码语言:简体中文 源码类型:国产软件 源码授权:免费软件 更新时间:2020-08-12 16:54:53 源码类别:java源码 源码官网: 官方网址 网友评分:源码评分 应用平台:JavaScript

 WeUI是由微信官方设计团队专为微信移动Web应用设计的UI库。

。 因此,当微信官方团队出了WeUI 项目之后,我迅速开发了 jQuery WeUI,并且它会是一个长期稳定的项目。因为我在这里彻底放弃了一个轻量的UI库不该做的事情,只专注于做一

WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

ui H-ui是轻量级前端框架,简单免费,兼容性好,适用于中国网站。 7.Weui weUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计

使用方法一:

展开全部 WeUI WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团 SUI Mobile 是一套基于 Framework7 开发的UI库。并参考 Ratchet、Fastclick 开源库。

使用bower进行安装

在此也非常感谢大家对脚本之家网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢! 您可能感兴趣的文章:浅谈微信小程序之官方UI框架we-ui使用教程微信小

bower install --save weui

UI库方面,框架自然带有自家weui库加成 并且在使用这些API时,你不用再去顾虑浏览器兼容性,不用担心生产环境中出现不可预料的奇妙BUG,可见微信小程序的开发成本确实相比

方法二:

使用npm进行安装

npm install --save weui

下载地址如下:

网硕互联电信下载

港中数据电信下载

河南紫田网通下载

易阳网络电信下载

酷云中国电信下载

易阳IDC电信下载

群英网络电信下载

烽火云集电信下载

网盾科技电信下载

创梦网络电信下载

WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。WeUI使用方法一:使用bower进行安装1bowerinstall--save weui方法二:使用npm进行安装1npminstall--save weui开发12345git clone https://github.com/weui/weui.gitcdweuinpminstall-g gulpnpminstallgulp -ws运行gulp -ws命令,会监听src目录下所有文件的变更,并且默认会在8080端口启动服务器,然后在浏览器打开http://localhost:8080/example。手机预览请用微信扫码WeUI地址:http://weui.github.io/weui/Button按钮可以使用a或者button标签。wap上要触发按钮的active态,必须触发ontouchstart事件,可以在body上加上ontouchstart=""全局触发。按钮常见的操作场景:确定、取消、警示,分别对应class:weui_btn_primary、weui_btn_default、weui_btn_warn,每种场景都有自己的置灰态weui_btn_disabled,除此外还有一种镂空按钮weui_btn_plain_xxx,客户端webview里的按钮尺寸有两类,默认宽度100%,小型按钮宽度自适应,两边边框与文本间距0.75em:12345678910111213<ahref="javascript:;"class="weui_btn weui_btn_primary">按钮</a><ahref="javascript:;"class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a><ahref="javascript:;"class="weui_btn weui_btn_warn">确认</a><ahref="javascript:;"class="weui_btn weui_btn_disabled weui_btn_warn">确认</a><ahref="javascript:;"class="weui_btn weui_btn_default">按钮</a><ahref="javascript:;"class="weui_btn weui_btn_disabled weui_btn_default">按钮</a><divclass="button_sp_area"><ahref="javascript:;"class="weui_btn weui_btn_plain_default">按钮</a><ahref="javascript:;"class="weui_btn weui_btn_plain_primary">按钮</a><ahref="javascript:;"class="weui_btn weui_btn_mini weui_btn_primary">按钮</a><ahref="javascript:;"class="weui_btn weui_btn_mini weui_btn_default">按钮</a></div>CellCell,列表视图,用于将信息以列表的结构显示在页面上,是wap上最常用的内容结构。Cell由多个section组成,每个section包括section headerweui_cells_title以及cellsweui_cells。cell由thumnailweui_cell_hd、bodyweui_cell_bd、accessoryweui_cell_ft三部分组成,cell采用自适应布局,在需要自适应的部分加上classweui_cell_primary即可:带说明的列表项1234567891011<divclass="weui_cells_title">带说明的列表项</div><divclass="weui_cells"><divclass="weui_cell"><divclass="weui_cell_bd weui_cell_primary"><p>标题文字</p></div><divclass="weui_cell_ft">说明文字</div></div></div>Cell可根据需要进行各种自定义扩展,包括辅助说明、跳转、单选、复选等。下面以带图标、说明、跳转的列表项,其他情况可以直接参考example下的代码:1234567891011121314151617181920212223242526<divclass="weui_cells_title">带图标、说明、跳转的列表项</div><divclass="weui_cells weui_cells_access"><aclass="weui_cell"href="javascript:;"><divclass="weui_cell_hd"><imgsrc=""alt="icon"style="width:20px;margin-right:5px;display:block"></div><divclass="weui_cell_bd weui_cell_primary"><p>cell standard</p></div><divclass="weui_cell_ft">说明文字</div></a><aclass="weui_cell"href="javascript:;"><divclass="weui_cell_hd"><imgsrc=""alt="icon"style="width:20px;margin-right:5px;display:block"></div><divclass="weui_cell_bd weui_cell_primary"><p>cell standard</p></div><divclass="weui_cell_ft">说明文字</div></a></div>Dialog若系统的alert窗体无法满足网页的临时视图内容需求,则可以自定义实现与alert形式相似的dialog,并且在dialog中可以自定义地使用各种控件,来满足需求。1234567891011<divclass="weui_dialog_confirm"><divclass="weui_mask"></div><divclass="weui_dialog"><divclass="weui_dialog_hd"><strongclass="weui_dialog_title">弹窗标题</strong></div><divclass="weui_dialog_bd">自定义弹窗内容<br>...</div><divclass="weui_dialog_ft"><ahref="javascript:;"class="weui_btn_dialog default">取消</a><ahref="javascript:;"class="weui_btn_dialog primary">确定</a></div></div></div>12345678910<divclass="weui_dialog_alert"><divclass="weui_mask"></div><divclass="weui_dialog"><divclass="weui_dialog_hd"><strongclass="weui_dialog_title">弹窗标题</strong></div><divclass="weui_dialog_bd">弹窗内容,告知当前页面信息等</div><divclass="weui_dialog_ft"><ahref="javascript:;"class="weui_btn_dialog primary">确定</a></div></div></div>Toasttoast用于临时显示某些信息,并且会在数秒后自动消失。这些信息通常是轻量级操作的成功、失败或等待状态信息。1234567<divid="toast"style="display: none;"><divclass="weui_mask_transparent"></div><divclass="weui_toast"><iclass="weui_icon_toast"></i><pclass="weui_toast_content">已完成</p></div></div>1234567891011121314151617181920<divid="loadingToast"class="weui_loading_toast"style="display:none;"><divclass="weui_mask_transparent"></div><divclass="weui_toast"><divclass="weui_loading"><!-- :) --><divclass="weui_loading_leaf weui_loading_leaf_0"></div><divclass="weui_loading_leaf weui_loading_leaf_1"></div><divclass="weui_loading_leaf weui_loading_leaf_2"></div><divclass="weui_loading_leaf weui_loading_leaf_3"></div><divclass="weui_loading_leaf weui_loading_leaf_4"></div><divclass="weui_loading_leaf weui_loading_leaf_5"></div><divclass="weui_loading_leaf weui_loading_leaf_6"></div><divclass="weui_loading_leaf weui_loading_leaf_7"></div><divclass="weui_loading_leaf weui_loading_leaf_8"></div><divclass="weui_loading_leaf weui_loading_leaf_9"></div><divclass="weui_loading_leaf weui_loading_leaf_10"></div><divclass="weui_loading_leaf weui_loading_leaf_11"></div></div><pclass="weui_toast_content">数据加载中</p></div></div>Msg Page结果页通常来说可以认为进行一系列操作步骤后,作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节(可用于确认 之前的操作是否有误)等信息;若该流程用于开启或关闭某些重要功能,可在结果页增加与该功能相关的描述性内容;除此之外,结果页也可以承载一些附加价值操 作,例如提供抽奖、关注公众号等功能入口。12345678910111213141516<divclass="weui_msg"><divclass="weui_icon_area"><iclass="weui_icon_success weui_icon_msg"></i></div><divclass="weui_text_area"><h2class="weui_msg_title">操作成功</h2><pclass="weui_msg_desc">内容详情,可根据实际需要安排</p></div><divclass="weui_opr_area"><pclass="weui_btn_area"><ahref="javascript:;"class="weui_btn weui_btn_primary">确定</a><ahref="javascript:;"class="weui_btn weui_btn_default">取消</a></p></div><divclass="weui_extra_area"><ahref="">查看详情</a></div></div>Article文字视图显示大段文字,这些文字通常是页面上的主体内容。Article支持分段、多层标题、引用、内嵌图片、有/无序列表等富文本样式,并可响应用户的选择操作。在微信客户端webview中使用Article,必须保证文字有足够的可读性和可辨识性、使用规范字体、保证足够的段间距、段首无缩进。1234567891011121314151617181920<articleclass="weui_article"><h1>大标题</h1><section><h2class="title">章标题</h2><section><h3>1.1 节标题</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute</p></section><section><h3>1.2 节标题</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></section></section></article>Icon1234567891011121314151617<iclass="weui_icon_msg weui_icon_success"></i><iclass="weui_icon_msg weui_icon_info"></i><iclass="weui_icon_msg weui_icon_warn"></i><iclass="weui_icon_msg weui_icon_waiting"></i><iclass="weui_icon_safe weui_icon_safe_success"></i><iclass="weui_icon_safe weui_icon_safe_warn"></i><divclass="icon_sp_area"><iclass="weui_icon_success"></i><iclass="weui_icon_success_circle"></i><iclass="weui_icon_success_no_circle"></i><iclass="weui_icon_info"></i><iclass="weui_icon_waiting"></i><iclass="weui_icon_waiting_circle"></i><iclass="weui_icon_circle"></i><iclass="weui_icon_warn"></i><iclass="weui_icon_download"></i></div>内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 微信移动 Web 应用设计的 UI 库安装及使用教程
  • jqeury weui和weui.css不一样吗
  • 微信公众号,前端用什么UI框架
  • 移动ui框架 vue怎么调用java
  • 用vue 一般都配合什么 UI 框架
  • 比较常用,成熟的针对html5的UI框架是哪些
  • 移动webapp前端ui用哪个框架好
  • 详解 微信小程序开发框架(MINA)
  • 微信小程序的开发与h5有什么关系
  • 微信页面内小于1px的线如何用js生成
  • 网站首页源码下载asp源码php源码.net源码jsp源码软件开发脚本下载js框架网站地图网页游戏黑客源码数据库类其它源码整站系统博客程序留言聊天企业网站新闻文章ajax相关搜索链接文件管理交友会员上传下载投票调查框架模板整站系统新闻文章留言聊天博客系统贺卡图片ajax相关文件管理问答系统社区论坛上传下载整站系统控件组件新闻文章主机域名计数统计小偷采集电子商务学校班级 社区论坛上传下载投票调查blog程序留言聊天整站系统社区论坛上传下载投票调查数据管理jsp其它c#源码易语言源码delphi源码vb源码java源码其它菜单导航tab标签焦 点 图在线客服css特效相册代码flash特效批处理其它jqueryextjsprototypemootoolsajax/javascript其它框架主页源码下载软件开发java源码jfast快速开发平台 v1.2eova(jfinal快速简单开发平台) v1.6.0 taoshop电商系统 v1.0docsite静态站点搭建工具 v1.2.3xxm个人知识管理工具 v6.0.5weui微信ui库junit4 jar包 java单元测试框架 v4.12 绿色免费版junit4 jar包 java单元测试框架 v4.12 绿色免费版下载publiccms开源java系统 v4.0.190312publiccms开源java系统 v4.0.190312下载若依后台管理系统 ruoyi v4.1若依后台管理系统 ruoyi v4.1下载qq 聊天机器人小薇(xiaov) v2.2.2qq 聊天机器人小薇(xiaov) v2.2.2下载jsh_erp 开源版j2ee进销存系统代码源码 v1.0.2jsh_erp 开源版j2ee进销存系统代码源码 v1.0.2下载javashop b2c开源电商系统 v6.3.2javashop b2c开源电商系统 v6.3.2下载examstack开源考试系统examstack开源考试系统下载因酷时代(inxedu)在线教育系统 v2.0.6因酷时代(inxedu)在线教育系统 v2.0.6下载jeewx 捷微微信管家平台 v4.1jeewx 捷微微信管家平台 v4.1下载找不到分享码?jfast快速开发平台 v1.2eova(jfinal快速简单开发平台) v1.6.0 taoshop电商系统 v1.0docsite静态站点搭建工具 v1.2.3xxm个人知识管理工具 v6.0.5node blog开源博客系统 v1.0鲁班h5页面生成工具 v1.10.1bopomofo.js拼音转换库 v1.0.1curve分布式存储系统 v0.1.3spring-boot-plus后台框架java源码 v2.0分享码的获取方法迅雷winrar v5c#源码易语言源码delphi源码vb源码java源码其它jfast快速开发平台 v1.2eova(jfinal快速简单开发平台) v1.6.0 taoshop电商系统 v1.0docsite静态站点搭建工具 v1.2.3xxm个人知识管理工具 v6.0.5node blog开源博客系统 v1.0鲁班h5页面生成工具 v1.10.1bopomofo.js拼音转换库 v1.0.1curve分布式存储系统 v0.1.3spring-boot-plus后台框架java源码 v2.0chrome
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved