一、icon 体验

先看一张图

上图展示的图标便是微信提供的，我们可以直接使用的图标

1.1 icon 的三个属性

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

icon 类型 type 分为：success, success_no_circle, info, warn, waiting, cancel, download, search, clear ，分别对应上图的每一个图标
icon的大小：通过 size 属性进行设置
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>

更多有趣的内容请自行尝试

二、实际项目

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

界面分析：

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

2.2 跳转等待界面

界面分析：

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

2.3 搜索栏实现

项目分析：
1.

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

手把手带你学习微信小程序 —— 十（icon 标签【微信默认标签】）相关推荐

微信小程序：超强大微信小程序源码下载内含几十款功能王者战力查询,游戏扫码登录,王者巅峰信息查询等等支持流量主收益和CPS收益
这是一款特别强大的一款微信小程序源码初步算了一下,该款小程序目前包含了几十个功能具体功能如以下: 游戏扫码登录王者战力查询改名生成(多种生成方式) 头像框制作(N款模板) 王者巅峰数据查询王 ...
视频教程-微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统-微信开发
微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试 ...
视频教程-微信小程序项目-豆瓣评分-微信开发
微信小程序项目-豆瓣评分北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥68.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订 ...
视频教程-微信小程序开发培训教程-微信开发
微信小程序开发培训教程本人计算机专业,毕业工作已经10多年,从事过的行业有,安防,通讯,Gps定位,信息统计分析,互联网电商等,从事过的职位. 代码工程师(使用过的语言C#,PHP,Java),Ap ...
微信小程序python自动化测试_微信小程序的自动化测试框架
微信小程序的自动化测试框架微信发布了小程序的自动化测试框架Minium,提供了多种运行验证方式,其特点: 支持一套脚本,iOS & Android & 模拟器,三端运行提供丰富的页 ...
基于微信小程序开发的仿微信demo
(本文参考自github/liujians,地址:https://github.com/liujians/weApp) 作者声明: 基于微信小程序开发的仿微信demo 整合了ionic的样式库和we ...
微信小程序：去水印工具微信小程序源码
这是一个去水印小程序支持各大平台短视频去水印支持图集去水印另外还有一个功能也就相当于抖音一样刷短视频偷偷告诉你们哟,刷的短视频都是热门小姐姐哟!惊不惊喜意不意外小程序源码下载地址: 微信小程 ...
微信小程序装修解决方案ppt_微信小程序开发教程.ppt
微信小程序开发教程.ppt 从开发CMS系统学起从入门到精通的微信小程序开发教程学微信小程序开发从实践中学习是开发者最好最快的学习方法.本教程将和大家从零开始一步一步搭建微信小程序CMS系统, ...
微信小程序 python 自动化测试_微信小程序的自动化测试框架
微信小程序的自动化测试框架微信发布了小程序的自动化测试框架Minium,提供了多种运行验证方式,其特点: 支持一套脚本,iOS & Android & 模拟器,三端运行提供丰富的页 ...
微信小程序的网络请求 —— 微信小程序教程系列（14）
网络请求,基本上是必须的环节之一. 小程序提供了wx.request(object),与开发者的服务器实现数据交互的一个很重要的api. 最简单的用法如下(以GET请求为例) <view bin ...

手把手带你学习微信小程序 —— 十（icon 标签【微信默认标签】）

icon 标签

一、icon 体验

1.1 icon 的三个属性

1.2 icon 的基本使用

二、实际项目

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

2.2 跳转等待界面

2.3 搜索栏实现

手把手带你学习微信小程序 —— 十（icon 标签【微信默认标签】）相关推荐

最新文章

热门文章