weUI的使用

目标：学习将weUI在小程序中使用；

资源：“weUI for 小程序”`

不要选择weUI，之前下载了CSS文件，在小程序中并不支持。

步骤：

1. 使用Github 将weUI 克隆至本地；
2. 复制“/weui-wxss/dist/style/weui.wxss”至小程序的style文件夹中；
3. 在对应的page中进行引用相应的wxss‘

//@import "../../style/weui.wxss"

4. 在相应page的wxml文件中调用样式的Class既可以，官方view如下：

<view class="page">
    <view class="page__hd">
        <view class="page__title">WeUIview>
        <view class="page__desc">WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。view>
    view>
    <view class="page__bd page__bd_spacing">
        <view class="kind-list">
            <block wx:for="{{list}}" wx:key="id">
                <view class="kind-list__item">
                    <view id="{{item.id}}" class="weui-flex kind-list__item-hd {{item.open ? 'kind-list__item-hd_show' : ''}}" bindtap="kindToggle">
                        <view class="weui-flex__item">{{item.name}}view>
                        <image class="kind-list__img" src="images/icon_nav_{{item.id}}.png">image>
                    view>
                    <view class="kind-list__item-bd {{item.open ? 'kind-list__item-bd_show' : ''}}">
                        <view class="weui-cells {{item.open ? 'weui-cells_show' : ''}}">
                            <block wx:for="{{item.pages}}" wx:for-item="page" wx:key="*this">
                                <navigator url="{{page}}/{{page}}" class="weui-cell weui-cell_access">
                                    <view class="weui-cell__bd">{{page}}view>
                                    <view class="weui-cell__ft weui-cell__ft_in-access">view>
                                navigator>
                            block>
                        view>
                    view>
                view>
            block>
        view>
    view>
    <view class="page__ft">
        <image src="images/icon_footer.png" style="width: 84px; height: 19px;">image>
    view>
view>

官方效果如下：

5. 使用：

• 组件的wxml结构请看dist/example/下的组件
• 样式文件可直接引用dist/style/weui.wxss，或者单独引用dist/style/widget下的组件的wxss

6. 个人实例：

<view class=''>
  <view class='weui-flex'>
    <view class='page_title'>
      标题2
    view>
    <text class='page_desc'>
这是一个用于打卡的App
  text>
  view>
  <view class='weui-cells'>
    <button class='weui-btn' type='primary'>添加打卡任务button>
    <button class='weui-btn' type='warn'>已添加打卡任务button>
  view>
view>
<view class='weui-footer_fixed-bottom'>
  I am footer.
view>

样式：