受欢迎的博客标签

 

1.简介

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计。

https://github.com/Tencent/weui-wxss

2.准备工作

2.1 下载样式文件

在miniprogram下新建一个目录weui,用来存放weiui的文件

 

  将dist/style/** 拷贝到/miniprogram/wenui

 

2.2 引用样式文件

在app.wxss内引入style/weui.wxss

@import 'weui/weui.wxss';

2.3 复制wxss

将https://github.com/Tencent/weui-wxss/dist/app.wxss

内容复制到自己的app.wxss中

3.diy

用户中心

<view class="page">




  <view class="page__bd">

    <view class="weui-cells weui-cells_after-title">
      <!--  用户图像-->
      <view class="weui-cell">
        <label>
          <view class="weui-cell__hd" style="position: relative;margin-right: 10px;">
            <image src="{{avatarUrl|| defaultAvatarUrl}}" style="width: 50px; height: 50px; display: block" />
            <view class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">8</view>
          </view>
          <view class="weui-cell__bd">
            <view>{{userInfo.nickName || '点亮图像'}}</view>
            <view style="font-size: 13px;color: #888888;">摘要信息</view>
          </view>
          <button open-type='getUserInfo' bindgetuserinfo='onGetUserInfo'></button>
        </label>
      </view>
      <!--  菜单导航-->
      <view class="weui-cells__title">功能演示</view>
      <navigator url="/pages/pulish/pulish" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <view class="weui-cell__bd">图片上传及发表文字</view>
        <view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>
      </navigator>

      <navigator url="/pages/advice/advice" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <view class="weui-cell__bd">意见反馈</view>
        <view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>
      </navigator>


    </view>

    <view class="weui-cells__title">项目信息</view>
    <view class="weui-cells weui-cells_after-title">
      <navigator url="/pages/about/about" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <view class="weui-cell__bd">关于项目</view>
        <view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>
      </navigator>
      <navigator url="/pages/systeminfo/systeminfo" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <view class="weui-cell__bd">系统信息</view>
        <view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>
      </navigator>
      <navigator url="/pages/miniqrcode/miniqrcode" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <view class="weui-cell__bd">小程序码</view>
        <view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>
      </navigator>
      <view class="weui-cell weui-cell_access" bindtap='showInfo'>
        <view class="weui-cell__bd">
          <view style="display: inline-block; vertical-align: middle">关于我们</view>

        </view>
        <view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>
      </view>
    </view>


  </view>




</view>

 

WeUI的使用方法

https://www.jianshu.com/p/010cea4202b8