×

使用微信公众平台开发前必读

微信公众平台开发概述微信公众平台开发者规范微信公众号接口权限说明微信公众号接口调用频次限制说明

开始开发微信公众平台

微信开发者平台接入指南微信公众平台接口域名说明微信平台开发者获取access_token获取微信服务器IP地址微信平台开发报警排查指引微信接口测试号申请

微信公众平台自定义开发

微信平台开发自定义菜单创建接口微信公众平台自定义菜单查询接口微信自定义菜单删除接口微信自定义菜单事件推送微信公众平台个性化菜单接口微信获取自定义菜单配置接口

微信公众平台 消息管理

微信平台接收普通消息微信平台开发接收事件推送微信平台被动回复用户消息微信消息加解密说明微信公众号客服消息微信高级群发接口微信公众号开发模板消息接口微信平台开发者模板消息运营规范获取微信公众号的自动回复规则

微信网页开发

微信网页授权微信网页开发样式库微信JS-SDK说明文档微信web开发者工具

微信平台素材管理

微信新增临时素材获取微信平台临时素材微信开发者新增永久素材微信开发者 删除永久素材微信开发者修改永久图文素材获取微信公众号素材总数获取微信公众平台的素材列表

微信平台 用户管理

微信公众号用户标签管理微信平台开发者设置用户备注名获取微信公众号用户的基本信息(UnionID机制)获取微信公众号用户列表获取微信用户地理位置微信公众号黑名单管理

管理微信账号

微信生成带参数的二维码微信公众号长链接转短链接接口微信认证事件推送

微信公众号数据统计

微信用户分析数据接口微信图文分析数据接口微信消息分析数据接口微信接口分析数据接口

微信卡券接口说明

微信卡券接口微信平台开发者创建卡券微信平台投放卡券核销微信平台的卡券微信公众号管理卡券微信卡券事件推送微信平台会员卡专区(一)微信平台会员卡专区(二)微信优惠券朋友的券专区微信特殊票券第三方微信开发者模式微信卡券错误码

微信门店

微信门店接口

微信小店

微信小店接口微信平台语义理解接口

微信设备功能

微信服务号设备功能介绍微信如何新增产品型号

微信平台新版客服功能

将消息转发到微信客服微信客服管理微信会话控制微信获取聊天记录

微信摇一摇周边

申请开通微信摇一摇微信设备ID微信摇一摇页面管理微信摇一摇上传图片素材微信平台管理设备与页面的关联关系微信摇一摇数据统计微信摇一摇关注的JSAPI微信摇一摇事件通知微信html5页面获取设备信息微信摇一摇获取设备及用户信息微信摇一摇红包介绍说明微信摇一摇周边错误码

微信连WIFI

微信连Wi-Fi开发者指引微信Wi-Fi硬件鉴权协议接口说明微信Wi-Fi软件服务管理接口说明开通微信连Wi-Fi插件微信Wi-Fi门店管理微信Wi-Fi设备管理配置微信WiFi联网方式微信商家主页管理微信平台Wi-Fi数据统计连网后微信公众号下发消息微信卡券投放微信Wi-Fi接口返回错误码微信连网过程常见错误码

微信扫一扫

微信扫一扫接入指南微信上进行商品创建微信商品发布微信商品管理微信扫一扫事件推送微信一物一码专区微信扫一扫错误码微信公众号在线帮助工具微信扫一扫常见问题

微信网页开发样式库


微信网页开发样式库

概述

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页开发量身设计,可以令用户的使用感知更加统一。在微信网页开发中使用 WeUI,有如下优势:

1.同微信客户端一致的视觉效果,令所有微信用户都能更容易地使用你的网站

2.便捷获取快速使用,降低开发和设计成本

3.微信设计团队精心打造,清晰明确,简洁大方

该样式库目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素,已经在GitHub上开源。

WeUI

使用方法

安装

方法一:使用bower进行安装

bower install --save weui 

方法二:使用npm进行安装

npm install --save weui 

任选一种方法安装后,只需要在页面中引入 dist/style/weui.css 或者 dist/style/weui.min.css 其中之一即可。例如:

    

       

         

          

WeUI         

   

   

       

 

 

开发

git clone https://github.com/weui/weui.git 

cd weui 

npm install -g gulp 

npm install 

gulp -ws 

运行 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:

Button

按钮 

按钮 

确认 

确认

按钮

按钮 


按钮     

按钮     

按钮     

按钮

 

Cell

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

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

Cell

带说明的列表项

带说明的列表项


   

       

           

标题文字


       

       

           说明文字
       

   

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

Dialog

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

Dialog


   

   

       
弹窗标题

       
自定义弹窗内容,居左对齐显示,告知需要确认的信息等

       

           取消
           确定
       

   


   

   

       
弹窗标题

       
弹窗内容,告知当前页面信息等

       

           确定
       

   

Progress

Progress 用于上传、下载等耗时并且需要显示进度的场景,用户可以随时中断该操作。

Progress


   

       

   

   
       
   

Toast

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

Toast

Msg Page

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

Msg Page


   

   

       

操作成功


       

内容详情,可根据实际需要安排


   

   

       


           确定
           取消
       


   

   

       查看详情
   

Article

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

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

Article


   

大标题


   

       

章标题


       

           

1.1 节标题


           

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
               quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
               consequat. Duis aute


       

       

           

1.2 节标题


           

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
               cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
               proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


       

   

ActionSheet

ActionSheet 用于显示包含一系列可交互的动作集合,包括说明、跳转等。由底部弹出,一般用于响应用户对页面的点击。

ActionSheet


   

   

       

           
示例菜单

           
示例菜单

           
示例菜单

           
示例菜单

       

       

           
取消

       

   

Icon

Icon








   
   
   
   
   
   
   
   
   
   
   


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)