在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
【1】简介 因为小程序的api描述都比较简单,并没有wxml及wxss的描述,一定会想小程序有没有一个UI库,类似于前端中的Bootstrap,MD,Semantic UI这样的框架UI库。有的,它就是WeUI。 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。 WeUI是在微信终端非常出色的UI样式库,提供了非常多丰富的基础UI组件,最重要的是拥有了和微信一致的视觉体验,使得用户即使从微信切换到相关小程序,也不会觉得UI感到突兀。 它的界面如图:
【2】下载配置 下载链接:https://github.com/Tencent/weui-wxss
3.weui.wxss的引入方法 /**app.wxss**/ @import 'style.weui.wxss' 方式二:在app.wxss内或者需要的页面引入style/widget下的组件的wxss。 /**app.wxss---->引入button的wxss**/ @import 'style.widget.weui-button.weui-button.wxss'; 注意:这样引入前提是weui.wxss放在全局的位置如图 这样就可以简单的调用WeUI组件了。 【3】微信开发工具预览
【4】使用 了解了 新建一个空白的小程序工程,选择新建项目,填写项目名称、appId、项目目录之后,就进入小程序的开发页面。 使用 (1)导入weui.wxss文件 (2)参照weui提供的例子使用weui组件 接下来我们按步骤尝试即可。
. |
请发表评论