WeUI 在小程序中使用

才接触小程序。想找个ui框架。。也不知道咋弄；

下载地址：点击打开链接

1. 将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下
2. 引入weui.wxss
3. 方式一：在app.wxss内或者需要的页面引入style/weui.wxss。
4. 方式二：在app.wxss内或者需要的页面引入style/widget下的组件的wxss

 

WeUI的使用

<view class="page">
  <view class="page__hd">
      <view class="page__title">WeUI</view>
      <view class="page__desc">WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。</view>
  </view>
  <view class="page__bd page__bd_spacing">
      <view class="kind-list">
          <block wx:for-items="{{list}}" wx:key="{{item.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="data: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-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
                              <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="data:images/icon_footer.png" style="width: 84px; height: 19px;"></image>
  </view>
</view>

根组件

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

页头和主体使用class="page__xx"(注意是两个下划线)

<view class="page">
<!--页头-->
<view class="page__hd"></view>
<!--主体-->
<view class="page__bd"></view>
</view>

其他组件采用weui-xx，例如class = "weui-flex"。

<view id="{{item.id}}" class="weui-flex" >
   <view class="weui-flex__item">{{item.name}}</view>
   <image class="kind-list__img" src="data:images/icon_nav_{{item.id}}.png"></image>
</view>

以上都收集自网络。自己用过可以的。