当前位置:主页 > 微信开发 > WeUI >

微信网页开发基础组件图标Icons

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-04-03
  当我们在做微信开发时,总会遇到一些用户操作时的问题,例如,用户上传一张图片成功要不要给用户一个提示?当用户误码操作时是不是给用户一个错误提示?当用户在操作某一个功能前要不要给用户一个提示信息,是在什么情况下才可以操作这个功能?当用户提交信息时要不要显示一个正在提交信息的等待时间?还有很多这样那样的在用户操作前后或操作中给出提示信息。

  如果在用户操作时适当的给出一些提示信息,这样可以增加用户体验,提高微信公众号网页或微信小程序的用户体验。

  WeUI已经帮我们想到了这些提示信息,并做成了一些组件,在我们在做微信开发时,只需要调用这些组件就可以实现相应图标显示信息。

示例:


示例代码:

      <div class="icon-box">
            <i class="weui-icon-success weui-icon_msg"></i>
            <div class="icon-box__ctn">
                <h3 class="icon-box__title">成功</h3>
                <p class="icon-box__desc">用于表示操作顺利达成</p>
            </div>
        </div>
        <div class="icon-box">
            <i class="weui-icon-info weui-icon_msg"></i>
            <div class="icon-box__ctn">
                <h3 class="icon-box__title">提示</h3>
                <p class="icon-box__desc">用于表示信息提示;也常用于缺乏条件的操作拦截,提示用户所需信息</p>
            </div>
        </div>
        <div class="icon-box">
            <i class="weui-icon-warn weui-icon_msg-primary"></i>
            <div class="icon-box__ctn">
                <h3 class="icon-box__title">普通警告</h3>
                <p class="icon-box__desc">用于表示操作后将引起一定后果的情况</p>
            </div>
        </div>
        <div class="icon-box">
            <i class="weui-icon-warn weui-icon_msg"></i>
            <div class="icon-box__ctn">
                <h3 class="icon-box__title">强烈警告</h3>
                <p class="icon-box__desc">用于表示操作后将引起严重的不可挽回的后果的情况</p>
            </div>
        </div>
        <div class="icon-box">
            <i class="weui-icon-waiting weui-icon_msg"></i>
            <div class="icon-box__ctn">
                <h3 class="icon-box__title">等待</h3>
                <p class="icon-box__desc">用于表示等待</p>
            </div>
        </div>
        <div class="icon_sp_area">
            <i class="weui-icon-success"></i>
            <i class="weui-icon-success-no-circle"></i>
            <i class="weui-icon-circle"></i>
            <i class="weui-icon-warn"></i>
            <i class="weui-icon-download"></i>
            <i class="weui-icon-info-circle"></i>
            <i class="weui-icon-cancel"></i>
            <i class="weui-icon-search"></i>
        </div>

WeUI提供了7种图标组件:

  目前WeUI基础样式库共提供了7种组件,分别是成功、提示、警告、等待、下载、搜索和取消。

图标使用方法使用html里面的<i>标签来设置图标,例如 <i class="weui-icon-warn"></i>

图标Icons绘制原理:

  上例中的图标组件在WeUI是如何绘制出来的?其实,我们在上例中看到的图标都是通过css绘制出来的,这是如何实现的呢,实现原理如下。

  为了讲解方便以“成功”图标组件weui-icon-success为例子进行讲解,只要把这一个原理掌握了,因为其它图标跟这个图标类似,掌握这一个其它的就会了。

  要把“成功”类 .weui-icon-success 实现原理搞明白,只需要把这个类使用到的所有的类源码分析明白即可。

  .weui-icon-success {
    font-size: 23px;
    color: #09BB07;
}


  “成功”类定义了这个类的字体大小和颜色,也就是说我们使用<i class="weui-icon-success"></i> 时,显示一个绿色圆圈里面有一个白色对号,但是,从这个类我们发现其实,这个类只是定义了文本的颜色和字体大小,其它什么也没有定义,从这里我们可以推断出肯定还有其它的类进行补充。

  在WeUI类里面找到如下类的定义:

[class^="weui-icon-"], [class*=" weui-icon-"] {
    display: inline-block;
    vertical-align: middle;
    font: normal normal normal 14px/1 "weui";
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}


  这里定义了只要是包括weui-icon-的类或是以weui-icon-开头的类都使用这里面定义的样式。

  因为我们在讲“成功”所以,这里的显示方式就是指图标的显示样式为“内联块”

  对齐方式为垂直居中对齐。

    对字体font定义,即:
 

    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: inherit;
    line-height: 1;
    font-family: weui


  然后,定义字体的为继承父元素。

  还对text-rendering和font-smoothing作为了声明,如果不知道这是什么请研究一下css3。

  通过上面的css的定义,就绘制出一个“绿色背景的圆”了。

  通过下面的css的定义就得到了一个有对号的圆了:
 

[class^="weui-icon_"]:before, [class*=" weui-icon_"]:before {
    margin: 0;
}
.weui-icon-success:before {
    content: "\EA06";
}
[class^="weui-icon-"]:before, [class*=" weui-icon-"]:before {
    display: inline-block;
    margin-left: .2em;
    margin-right: .2em;
}

 
  这里面主要是在类.weui-icon-success前面加上内容“\EA06”,这样就完整的变成一个“成功”图标了。

  其它的图标的实现原来跟这个完全一样,只是颜色、大小和符号不同,这里的符号指的是\EA06符号。
 


图标Icons的大小

  图标也有大小默认情况下是图标字体大小为23px,如果想使用大图标则在图标所在的类的后面加上类.weui-icon_msg后,将变成字体大小为93px。
 

.weui-icon_msg {
  font-size: 93px;
}


  例如:

 <i class="weui-icon-success weui-icon_msg"></i>

图标Icons组件详解:

  1)绿色成功:用于表示操作顺利达成。

  对应的类是:.weui-icon-success

 

  “对号”图标对应的类是:weui-icon-success-no-circle



  2) 表示一个空白的圆:weui-icon-circle

  不过用处不大。



  3) 警告类:weui-icon-warn

  警告的图标是一个叹号,分为两种: 一种是黄色的普通警告,一种是浅红色的强烈警告。

  普通警告:<i class="weui-icon-warn weui-icon_msg-primary"></i> ,即当类weui-icon-warn与类weui-icon_msg-primary配合使用时就是普通警告,用于表示操作后将引起一定后果的情况。


  强烈警告:<i class="weui-icon-warn weui-icon_msg"></i> ,即当类weui-icon-warn与类weui-icon_msg配合使用时就是强烈警告,用于表示操作后将引起严重的不可挽回的后果的情况。
 
  若警告单独使用时,即 <i class="weui-icon-warn"></i> 则纯红色,而且,只能使用23px大小的字体,否则,就变成了强烈警告了。


  3)提示信息:weui-icon-info

  用于表示信息提示;也常用于缺乏条件的操作拦截,提示用户所需信息。
 

  <i class="weui-icon-info"></i>


  背景为白色的提示信息:<i class="weui-icon-info-circle"></i>



  4) 下载:weui-icon-download

  当从微信网页上面有下载软件链接时,可以使用这样的图标。




  5) 取消图标:<i class="weui-icon-cancel"></i>


  6)搜索图标:<i class="weui-icon-search"></i>



图标与文本一起使用

  图标可以单独作为一个图标使用,也可以与文本一起使用,只需要使用相应的类把图标与文本放到这个类所在的div里面就可以了。

  在本教程一开始就已经有这个示例了,这里不再重复。