[小程序]那些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>

結果

總結

通過上面展示的圖標，可以看到常用的基本上都包括了。圖標組件：三個屬性（類型，大小，顏色）