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

发布时间：2019-01-11 09:28:56 修改时间：2019-01-11 09:38:08 阅读：6831 评论：0 0

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

官方demo演示地址：https://weui.io/

引用方式有两种：

样式导入示例：

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

示例代码：

/** weui.wxss **/

/*...*/

/** app.wxss **/

@import "weui.wxss";

.middle-p {

  padding:15px;

}

现在我们引入weui.wxss;

首先下载weui.wxss;微信小程序UI框架we-ui github地址

或者 npm install --save weui

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


如何引用weui

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

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

如何使用WeUI

根组件使用class="page"

<view class="page"></view>


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

<view class="page">

    <!--页头-->

    <view class="page__hd"></view>

    <!--主体-->

    <view class="page__bd"></view>

    <!--没有页脚-->

</view>

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

<view class="weui-footer">我是页脚</view>


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

<view class="weui-footer">

    <view class="weui-footer__links">

        <navigator url="" class="weui-footer__link">文章</navigator>

    </view>

    <view class="weui-footer__text">Copyright ©16000268号 </view>

</view>

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

文档

WeUI 视觉标准参考 weui-design

---