weui+php+引用,微信小程序之weui的引用及使用说明

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

引用方式有两种：

样式导入示例：

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** weui.wxss **/

/*...*/

/** app.wxss **/

@import "weui.wxss";

.middle-p {

padding:15px;

}

现在我们引入weui.wxss;

或者 npm install --save weui

用微信web开发者工具打开dist目录(请注意，是dist目录，不是整个项目)

如何引用weui

组件的wxml结构请看dist/example/下的组件

样式文件可直接在app.wxss全局样式中引用dist/style/weui.wxss，或者单独引用dist/style/widget下的组件的wxss(参考以上示例)

如何使用WeUI

根组件使用class="page"

页面骨架组件使用class="page__xxx"(注意是两个下划线)

其他组件都已weui-开头后接组件名称，例如class="weui-footer"

我是页脚

组件的子组件样式，例如view.weui-footer组件还有链接和版权信息。

文章

Copyright ©16000268号

组件和子组件使用两个下划线衔接，所以要区分什么时候用"-",什么时候用"__"

文档

WeUI 视觉标准参考 weui-design