[小程序]那些icons

摘要

为了提供更友好的提示信息，会使用icon+信息的方式，向用户提示当前操作的成功，失败或者一些警告信息。小程序也为我们定义了一些icons，足够大部分情况的使用了。

那些icons

我们新建一个名为icons的目录，并在该目录下添加对应的页面，样式表以及js文件，命名为icons页面。如图所示

然后，需要在app.json中，设置icon.wxml为首页，如下所示：

{

  "pages":[

    "pages/icons/icon"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle":"black"

  }

}

icon组件

type属性

string类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

size属性

Number类型，icon的大小，单位px。

color属性

Color类型，icon的颜色，同css的color

在icon.js中初始化icon的size，以及color，iconType

Page({

  data:{

    iconSizes:[10,20,30,40,50,60,70],

    iconColor:[ 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'],

    iconType:[ 'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',

      'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',

      'info_circle', 'cancel', 'search', 'clear']

  },

  onLoad:function(options){

    // 页面初始化 options为页面跳转所带来的参数

    String2

  },

  onReady:function(){

    // 页面渲染完成

    String3

  },

  onShow:function(){

    // 页面显示

    String4

  },

  onHide:function(){

    // 页面隐藏

    String5

  },

  onUnload:function(){

    // 页面关闭

    String6

  }

})

icon.wxml绑定

<view class="group">

  <block wx:for="{{iconSizes}}">

    <icon type="success" size="{{item}}"/>

  </block>

</view>

<view class="group">

  <block wx:for="{{iconType}}">

    <icon type="{{item}}" size="45"/>

  </block>

</view>

<view class="group">

  <block wx:for="{{iconColor}}">

    <icon type="success" size="45" color="{{item}}"/>

  </block>

</view>

结果

总结

通过上面展示的图标，可以看到常用的基本上都包括了。图标组件：三个属性（类型，大小，颜色）