热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

软件推介_专为微信移动Web应用设计的UI库软件推介

篇首语:本文由编程笔记#小编为大家整理,主要介绍了专为微信移动Web应用设计的UI库软件推介相关的知识,希望对你有一定的参考价值。

篇首语:本文由编程笔记#小编为大家整理,主要介绍了专为微信移动 Web 应用设计的 UI 库软件推介相关的知识,希望对你有一定的参考价值。












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








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





















使用












 方法一







使用 bower 进行安装











专为微信移动 Web 应用设计的 UI 库【软件推介】
























 方法二








使用
npm 进行安装









专为微信移动 Web 应用设计的 UI 库【软件推介】



















开发











专为微信移动 Web 应用设计的 UI 库【软件推介】









运行
gulp -ws 命令,会监听
src 目录下所有文件的变更,并且默认会在
8080 端口启动服务器,然后在浏览器打开 
http://localhost:8080/example


















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:









专为微信移动 Web 应用设计的 UI 库【软件推介】


专为微信移动 Web 应用设计的 UI 库【软件推介】



















cell


















Cell,列表视图,用于将信息以列表的结构显示在页面上,是 wap 上最常用的内容结构。
Cell 由多个 section 组成,每个 section 包括 section  header
weui_cells_title 以及  
cellsweui_cells


















cell 由 thumnail
weui_cell_hd、body
weui_cell_bd、accessory
weui_cell_ft 三部分组成,
cell 采用自适应布局,在需要自适应的部分加上class
weui_cell_primary 即可:



















专为微信移动 Web 应用设计的 UI 库【软件推介】











带说明的列表项











专为微信移动 Web 应用设计的 UI 库【软件推介】



















Cell 可根据需要进行各种自定义扩展,包括辅助说明、跳转、单选、复选等。下面以带图标、说明、跳转的列表项,其他情况可以直接参考
example 下的代码:








专为微信移动 Web 应用设计的 UI 库【软件推介】




















Dialog


















若系统的 alert 窗体无法满足网页的临时视图内容需求,则可以自定义实现与alert形式相似的 dialog,并且在 dialog 中可以自定义地使用各种控件,来满足需求。


















专为微信移动 Web 应用设计的 UI 库【软件推介】


专为微信移动 Web 应用设计的 UI 库【软件推介】


专为微信移动 Web 应用设计的 UI 库【软件推介】
专为微信移动 Web 应用设计的 UI 库【软件推介】




















Toast

















toast 用于临时显示某些信息,并且会在数秒后自动消失。这些信息通常是轻量级操作的成功、失败或等待状态信息。










专为微信移动 Web 应用设计的 UI 库【软件推介】








专为微信移动 Web 应用设计的 UI 库【软件推介】


专为微信移动 Web 应用设计的 UI 库【软件推介】
专为微信移动 Web 应用设计的 UI 库【软件推介】



















Msg Page




















结果页通常来说可以认为进行一系列操作步骤后,作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节(可用于确认 之前的操作是否有误)等信息;若该流程用于开启或关闭某些重要功能,可在结果页增加与该功能相关的描述性内容;除此之外,结果页也可以承载一些附加价值操 作,例如提供抽奖、关注公众号等功能入口。

















专为微信移动 Web 应用设计的 UI 库【软件推介】


专为微信移动 Web 应用设计的 UI 库【软件推介】


























Article


















文字视图显示大段文字,这些文字通常是页面上的主体内容。
Article 支持分段、多层标题、引用、内嵌图片、有/无序列表等富文本样式,并可响应用户的选择操作。


















在微信客户端 webview 中使用
Article ,必须保证文字有足够的可读性和可辨识性、使用规范字体、保证足够的段间距、段首无缩进。









专为微信移动 Web 应用设计的 UI 库【软件推介】


专为微信移动 Web 应用设计的 UI 库【软件推介】









Icon









专为微信移动 Web 应用设计的 UI 库【软件推介】











专为微信移动 Web 应用设计的 UI 库【软件推介】

















专为微信移动 Web 应用设计的 UI 库【软件推介】









推荐阅读










































点击“阅读原文”查看更多精彩内容















推荐阅读
  • 本文介绍如何在 Android 中自定义加载对话框 CustomProgressDialog,包括自定义 View 类和 XML 布局文件的详细步骤。 ... [详细]
  • 微信公众号推送模板40036问题
    返回码错误码描述说明40001invalidcredential不合法的调用凭证40002invalidgrant_type不合法的grant_type40003invalidop ... [详细]
  • 本文介绍了如何利用Struts1框架构建一个简易的四则运算计算器。通过采用DispatchAction来处理不同类型的计算请求,并使用动态Form来优化开发流程,确保代码的简洁性和可维护性。同时,系统提供了用户友好的错误提示,以增强用户体验。 ... [详细]
  • 利用爬虫技术抓取数据,结合Fiddler与Postman在Chrome中的应用优化提交流程
    本文探讨了如何利用爬虫技术抓取目标网站的数据,并结合Fiddler和Postman工具在Chrome浏览器中的应用,优化数据提交流程。通过详细的抓包分析和模拟提交,有效提升了数据抓取的效率和准确性。此外,文章还介绍了如何使用这些工具进行调试和优化,为开发者提供了实用的操作指南。 ... [详细]
  • 本文深入探讨了HTTP头部中的Expires与Cache-Control字段及其缓存机制。Cache-Control字段主要用于控制HTTP缓存行为,其在HTTP/1.1中得到了广泛应用,而HTTP/1.0中主要使用Pragma:no-cache来实现类似功能。Expires字段则定义了资源的过期时间,帮助浏览器决定是否从缓存中读取资源。文章详细解析了这两个字段的具体用法、相互关系以及在不同场景下的应用效果,为开发者提供了全面的缓存管理指南。 ... [详细]
  • 开发笔记:深入解析Android自定义控件——Button的72种变形技巧
    开发笔记:深入解析Android自定义控件——Button的72种变形技巧 ... [详细]
  • 本文介绍了如何通过掌握 IScroll 技巧来实现流畅的上拉加载和下拉刷新功能。首先,需要按正确的顺序引入相关文件:1. Zepto;2. iScroll.js;3. scroll-probe.js。此外,还提供了完整的代码示例,可在 GitHub 仓库中查看。通过这些步骤,开发者可以轻松实现高效、流畅的滚动效果,提升用户体验。 ... [详细]
  • 在iOS平台上,应用的流畅操作体验一直备受赞誉。然而,过去开发者往往将更多精力集中在功能实现上,而对性能优化的关注相对较少。本文深入探讨了iOS应用性能优化的关键要点与实践方法,旨在帮助开发者提升应用的响应速度、降低功耗,并改善整体用户体验。通过具体案例分析和技术解析,文章提供了实用的优化策略,包括代码层面的改进、资源管理优化以及界面渲染效率的提升等。 ... [详细]
  • 本文出处:炎之铠csdn博客:http:blog.csdn.nettotond炎之铠邮箱:yanzhikai_yjk@qq.com本文原创,转载请注明本出处!前言 ... [详细]
  • MicrosoftDeploymentToolkit2010部署培训实验手册V1.0目录实验环境说明3实验环境虚拟机使用信息3注意:4实验手册正文说 ... [详细]
  • 如何在Java中使用DButils类
    这期内容当中小编将会给大家带来有关如何在Java中使用DButils类,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。D ... [详细]
  • 本文详细介绍了如何在 Django 项目中使用 Admin 管理后台,包括创建超级用户、启动项目、管理数据模型和修改用户密码等步骤。 ... [详细]
  • 解决Parallels Desktop错误15265的方法
    本文详细介绍了在使用Parallels Desktop时遇到错误15265的多种解决方案,包括检查网络连接、关闭代理服务器和修改主机文件等步骤。 ... [详细]
  • 基于Net Core 3.0与Web API的前后端分离开发:Vue.js在前端的应用
    本文介绍了如何使用Net Core 3.0和Web API进行前后端分离开发,并重点探讨了Vue.js在前端的应用。后端采用MySQL数据库和EF Core框架进行数据操作,开发环境为Windows 10和Visual Studio 2019,MySQL服务器版本为8.0.16。文章详细描述了API项目的创建过程、启动步骤以及必要的插件安装,为开发者提供了一套完整的开发指南。 ... [详细]
  • 掌握Android UI设计:利用ZoomControls实现图片缩放功能
    本文介绍了如何在Android应用中通过使用ZoomControls组件来实现图片的缩放功能。ZoomControls提供了一种简单且直观的方式,让用户可以通过点击放大和缩小按钮来调整图片的显示大小。文章详细讲解了ZoomControls的基本用法、布局设置以及与ImageView的结合使用方法,适合初学者快速掌握Android UI设计中的这一重要功能。 ... [详细]
author-avatar
久居我心入我怀
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有