小程序ui什么意思-微信小程序之weui的引用及使用说明-小程序ui-即速应用

小程序ui什么意思-微信小程序之weui的引用及使用说明-小程序ui

浏览量：1854 时间：2020-03-20 来源：千与千寻之前

1.WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式元素。
2.官方demo演示地址：https://weui.io/
3.引用方式有两种：
样式导入示例：使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
示例代码：
/**weui.wxss**/
/*...*/
/**app.wxss**/
@import"weui.wxss";
.middle-p{
padding:15px;
}
现在我们引入weui.wxss;
首先下载weui.wxss;微信小程序UI框架we-uigithub地址
或者npminstall--saveweui
用微信web开发者工具打开dist目录（请注意，是dist目录，不是整个项目）
如何引用weui组件的wxml结构请看dist/example/下的组件
样式文件可直接在app.wxss全局样式中引用dist/style/weui.wxss，或者单独引用dist/style/widget下的组件的wxss（参考以上示例）
如何使用WeUI根组件使用class="page"
viewclass="page"/view
页面骨架组件使用class="page__xxx"(注意是两个下划线)
viewclass="page"
!--页头--
viewclass="page__hd"/view
!--主体--
viewclass="page__bd"/view
!--没有页脚--
/view
其他组件都已weui-开头后接组件名称，例如class="weui-footer"
viewclass="weui-footer"我是页脚/view
组件的子组件样式，例如view.weui-footer组件还有链接和版权信息。
viewclass="weui-footer"
viewclass="weui-footer__links"
navigatorurl=""class="weui-footer__link"文章/navigator
/view
viewclass="weui-footer__text"Copyright©16000268号/view
/view
组件和子组件使用两个下划线衔接，所以要区分什么时候用"-",什么时候用"__"
文档WeUI视觉标准参考weui-design