【微信小程序】简洁好用的icon（94/100）

原创已于 2025-08-24 21:01:43 修改 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #微信小程序断点调试 #微信开发者工具mac #微信小程序单选框 #微信小程序怎么打断点调试 #微信小程序switch

于 2022-07-15 15:24:49 首次发布

微信小程序专栏收录该内容

29 篇文章

订阅专栏

面对Postman在国内使用遇到的诸多问题，一款名为SmartApi的API调试开发工具应运而生。该工具由作者独立开发，尽管功能进行了精简，但包含了API参数填写、响应数据展示、PDF文档分享、Mock本地化解决方案等核心功能，旨在满足开发者的基本日常需求。SmartApi v1.0.0已正式上线，提供下载链接，有望成为Postman的有力替代品。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

布局

<!--pages/icon/icon.wxml-->
<icon class="icon-box-img" type="success" size="50"></icon>
<view class="icon-box-title">成功</view>
<icon class="icon-box-img" type="info" size="50"></icon>
<view class="icon-box-title">提示</view>
<icon class="icon-box-img" type="warn" size="50" color="#C9C9C9"></icon>
<view class="icon-box-title">普通警告</view>
<icon class="icon-box-img" type="warn" size="50"></icon>
<view class="icon-box-title">强烈警告</view>

<icon class="icon-box-img" type="waiting" size="50"></icon>
<view class="icon-box-title">等待</view>

<icon class="icon-small" type="success_no_circle" size="23"></icon>
<view class="icon-box-title">多选控件图标_已选择</view>

  <icon class="icon-small" type="circle" size="23"></icon>
  <view class="icon-box-title">多选控件图标_未选择</view>

  <icon class="icon-small" type="warn" size="23"></icon>
  <view class="icon-box-title">错误提示</view>

  <icon class="icon-small" type="success" size="23"></icon>
    <view class="icon-box-title">单选控件图标_已选择</view>
      
    <icon class="icon-small" type="download" size="23"></icon>
    <view class="icon-box-title">下载</view>
      
    <icon class="icon-small" type="info_circle" size="23"></icon>
    <view class="icon-box-title">提示</view>
      
    <icon class="icon-small" type="cancel" size="23"></icon>
    <view class="icon-box-title">停止或关闭</view>
      
    <icon class="icon-small" type="search" size="14"></icon>
    <view class="icon-box-title">搜索</view>

数据模型：

// pages/icon/icon.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  },