💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
### 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可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp; 各个操作系统的空格标准并不一致。 <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&nbsp;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)