### icon标签
图标。
![](https://box.kancloud.cn/ad1e4968fc6de491eb0872bb79e927f4_979x225.png)
示例:
wxml:
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="40"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="{{item}}"/>
</block>
</view>
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'
]
}
})
![](https://box.kancloud.cn/a94d447ff4249addef05ac0c9f8b690c_418x515.png)
### text标签
文本。
![](https://box.kancloud.cn/7ce6ec5d747c2989cddf5199b3d9cb2e_980x570.png)
Tips
decode可以解析的有 < > & '    
各个操作系统的空格标准并不一致。
<text/> 组件内只支持 <text/> 嵌套。
除了文本节点以外的其他节点都无法长按选中。
示例:
wxml:
<view class="btn-area">
<view class="body-view">
<text>{{text}}</text>
<button bindtap="add">add line</button>
<button bindtap="remove">remove line</button>
</view>
</view>
js:
var initData = 'this is first line\nthis is second line'
var extraLine = [];
Page({
data: {
text: initData
},
add: function(e) {
extraLine.push('other line')
this.setData({
text: initData + '\n' + extraLine.join('\n')
})
},
remove: function(e) {
if (extraLine.length > 0) {
extraLine.pop()
this.setData({
text: initData + '\n' + extraLine.join('\n')
})
}
}
})
![](https://box.kancloud.cn/4b175e6a8182cce6f2cc831e7446d66d_416x580.png)
### rich-text标签
基础库 1.4.0 开始支持,低版本需做兼容处理
富文本。
![](https://box.kancloud.cn/153d8bcd85df0c50dc73cdf54569ff08_973x110.png)
支持默认事件,包括:tap、touchstart、touchmove、touchcancel、touchend和longtap
nodes 属性推荐使用 Array 类型,由于组件会将 String 类型转换为 Array 类型,因而性能会有所下降
nodes
现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点
元素节点:type = node
![](https://box.kancloud.cn/0f1ad803d1edf10fece027c24000655d_973x227.png)
文本节点:type = text
![](https://box.kancloud.cn/0a2d5d8736577e8c3c8c9cef94ab669d_993x116.png)
示例:
wxml:
<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
js:
// rich-text.js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
},
tap() {
console.log('tap')
}
})
Bug & Tip
tip: nodes 不推荐使用 String 类型,性能会有所下降。
tip: rich-text 组件内屏蔽所有节点的事件。
tip: attrs 属性不支持 id ,支持 class 。
tip: name 属性大小写不敏感。
tip: 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。
tip: img 标签仅支持网络图片。
tip: 如果在自定义组件中使用 rich-text 组件,那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。
### progress标签
进度条。
![](https://box.kancloud.cn/5fb1d41e33b66b9d6ea06b6cd02ef128_961x523.png)
示例:
<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />
![](https://box.kancloud.cn/581cb08b1af0857775510fc05f460d77_478x474.png)
- 商城api接口
- 首页数据获取
- 分类接口
- 购物车接口
- 商品信息接口
- 搜索接口
- 订单列表接口
- 店铺接口
- 收藏接口
- 收货地址接口
- 生成订单接口
- 支付接口
- 会员中心接口
- 登录注册接口
- 关于我们
- 图片上传
- 分销中心
- 分销明细
- 代金券
- 平台红包列表
- 分销申请列表
- 我的推广
- 微信小程序
- 简介
- 开发前准备
- 目录结构介绍
- 发起请求
- 网络请求提交表单
- 代码及开发所遇到问题总结
- 导航跳转时所遇到的问题
- 缓存数据与数据取得的问题
- 如何引入外部css
- 如何定义与使用全局变量
- 如何定义新的界面
- 微信小程序支付
- 小程序的手机验证码登录
- 上传,下载
- 提示框
- app.json配置
- 配置demo
- pages
- window
- tabBar
- networkTimeout
- debug
- page.json
- 缓存
- 特效
- 滑动方式
- 城市切换
- 五星好评
- Switch
- 上拉加载
- wxml 标签
- 视图容器
- 基础内容
- 表单组件
- 导航
- 媒体组件
- 自定义提示框
- 小程序内访问网页
- 倒计时显示
- 微信小程序,如何在返回前一个页面时,执行前一个页面的方法
- 在本地可以请求到数据,但手机上是请求不到的
- curl请求失败
- 代码同步
- 短信平台更换