当前位置: 主页 > 建站知识 > 小程序

微信小程序 样式库-微信小程序九宫格样式

发布时间:2023-03-09 12:19   浏览次数:次   作者:佚名

WeUI是一套符合微信原生视觉体验的基础样式库。 由微信官方设计团队为微信网页和微信小程序设计,让用户感觉更统一,包括按钮、单元格、对话框、进度、toast。 , article, actionsheet, icon等元素,小程序开发团队可以直接使用这些组件。

1.视觉标准

WeUI-Design是微信官方设计团队设计的与微信原生视觉体验一致的基础视觉样式库。 目前提供了Sketch和PSD的基础样式库源文件。 开发者或设计师可以使用WeUI-Design进行微信Web开发的原型设计和视觉设计。

2.如何配置WeUI

第一步在全局配置中引入WeUI

在小程序全局配置文件app.json中以扩展库的形式引入WeUI,相当于引入扩展库对应的最新版npm包,不占用小程序包大小。

在小程序全局配置文件

第二步指定页面配置中使用的组件

在需要使用WeUI组件的页面配置文件中,指定具体要使用的组件名称。

指定使用的组件

第三步,在页面中使用WeUI组件

要在页面中使用 WeUI,可以使用 WeUI 组件(通过 wxml 标签),也可以使用 WeUI 中预定义的样式(通过类名)。

使用WeUI组件

3.如何快速应用WeUI组件库

第一步进入Pixso社区资源库

所有资源均可免费使用。 Pixso社区有深色版和浅色版WeUI组件库,设计师可以根据产品风格选择调用。

社区资源库

第二步一键调用资源

选择调用WeUI资源,它会直接内置到你的资源中! 目前已有近7万Pixso社区成员调用了WeUI浅色组件库。

一键调用资源

第三步进入Pixso画布开始工作

在资源中拖拽使用WeUI设计组件库。

进入画布

4. Pixso在线协同设计工具特点

Pixso是国内UI/UX设计师和产品经理使用的专业设计工具。 内置大量设计系统资源,可帮助您快速启动设计工作。

Pixso社区——内置腾讯、阿里、字节跳动、今日头条、蚂蚁设计等优秀设计规范,提供海量设计模板素材,本地化字体资源。

设计协作——Pixso使团队中的每个人都可以在同一份文档上工作,提供原型设计、设计和交付的一站式解决方案,引领设计协作新趋势。

在线评论反馈 - 您可以在线/离线演示您的设计并获得即时反馈。 另外,您可以轻松地一键分享。

设计交付——Pixso 自动提供规范和多平台代码微信小程序 样式库,并简单地共享一个链接来交付文件,从而加快设计到开发的工作流程。

云端同步——Pixso支持设计师在任意浏览器中完成所有工作,同步更新修改内容,有助于提高效率,保障数据安全和恢复。

团队协作——团队成员可以协作查看、编辑和同步同一项目的信息微信小程序 样式库,支持UI/UX设计师在异地实时完成创作和交流。