一、icon 体验

先看一张图
手把手带你学习微信小程序 —— 十（icon 标签【微信默认标签】）_icon
上图展示的图标便是微信提供的，我们可以直接使用的图标

1.1 icon 的三个属性

icon 的使用简单，它只有三个属性

  1. icon 类型 type 分为 ：success, success_no_circle, info, warn, waiting, cancel, download, search, clear ，分别对应上图的每一个图标
  2. icon的大小：通过 size 属性进行设置
  3. icon 的颜色，通过 color 进行修改（同css 中的color）

1.2 icon 的基本使用

<icon type="success" size="50"></icon>
<icon type="success_no_circle" size="50"></icon>
<icon type="info" size="50"></icon>
<icon type="warn" size="50"></icon>
<icon type="waiting" size="50"></icon>
<icon type="cancel" size="50"></icon>

手把手带你学习微信小程序 —— 十（icon 标签【微信默认标签】）_icon_02
更多有趣的内容请自行尝试

二、实际项目

2.1 微信支付界面支付成功展示

手把手带你学习微信小程序 —— 十（icon 标签【微信默认标签】）_微信支付_03
界面分析：

  1. icon：<icon type='success' size='100'></icon>
  2. view标签 —— 操作成功
  3. button组件 —— 完成
  4. wxss 样式：主要采用 flex 布局，由全局样式控制，局部样式进行微调

2.2 跳转等待界面

手把手带你学习微信小程序 —— 十（icon 标签【微信默认标签】）_微信支付_04
界面分析：

  1. icon：使用等待界面的类型次 —— waiting<icon type='waiting' size='100'></icon>
  2. view：操作进行中… ，后面的数字是动态变化的，通过js 传值
  3. button：取消
  4. wxss 样式：基本和上面一样
  5. js 实现倒计时

2.3 搜索栏实现

手把手带你学习微信小程序 —— 十（icon 标签【微信默认标签】）_icon_05
项目分析：
1.

源码在Github 上，有需要的同学请自取~
传送门