「小程序JAVA实战」小程序的基础组件（24）

野性酷女 2021-12-23 09:41 313阅读 0赞

转自：https://idig8.com/2018/08/12/xiaochengxu-chuji-24/

> 来说下 ，小程序的基础组件。源码：https://github.com/limingios/wxProgram.git 中的No.11

### 基础组件 ###

*  icon图标组件
 *  rich-text 富文本组件
 *  text 文本组件
 *  progress 进度条组件

### icon图标组件 ###

*  官方介绍  
    >https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

![1240][]

*  演示用例

<view class="container">
    <icon type='success' color='red' size='55'></icon>
    <icon type='success_no_circle' size='55'></icon>
    <icon type='info' size='55'></icon>
    <icon type='warn' size='55'></icon>
    <icon type='waiting' size='55'></icon>
    <icon type='cancel' size='55'></icon>
    <icon type='download' size='55'></icon>
    <icon type='search' size='55'></icon>
    <icon type='clear' size='55'></icon>
    </view>

![1240 1][]

### text组件 ###

*  官方介绍  
    >https://developers.weixin.qq.com/miniprogram/dev/component/text.html

![1240 2][]

*  演示用例  
    text.html

<view>
    <text selectable='{
        {true}}'>欢迎关注：编程坑太多</text>
    </view>
    
    <view>
    <text>欢迎关注：编程坑太多</text>
    </view>
    
    
    <view>
    <text space='{
        {true}}' decode="true">个人博客：    idig8.com</text>
    </view>
    
    <view>
    <text space='{
        {false}}'>个人博客：    idig8.com</text>
    </view>
    
    <view>
    <text decode="true">个人博客：\t\nidig8.com</text>
    </view>

![1240 3][]

### rich-text 富文本 ###

*  官方介绍  
    >https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

![1240 4][]

*  演示用例  
    rich-text.html

<view>
      <rich-text nodes="{
        {mycontentStr}}"> </rich-text>
      <rich-text nodes="{
        {mycontentArray}}"> </rich-text>
    </view>

rich-text.js

//rich-text.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data:{
        mycontentStr: '<img class="s_lg_img_gold_show" src="//www.baidu.com/img/bd_logo1.png" width="270" height="129" >',
        mycontentArray:[
          {
            name:"img",
            attrs:{
              class:"s_lg_img_gold_show",
              src:"//www.baidu.com/img/bd_logo1.png",
              width:"270",
              height:"129"
            }
          }
        ]
      }
    })

rich-text.wxss

/**icon.wxss**/
    .s_lg_img_gold_show{
      width:600rpx;
    }

![1240 5][]

> 使用富文本需要特别注意

![1240 6][]

### progress 进度条 ###

*  官方介绍  
    >https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

![1240 7][]

*  演示用例  
    rich-text.html

<view>
      <progress percent="70" show-info="{
        {true}}" stroke-width="20" color="red" active="{
        {true}}"></progress>
        <progress percent="{
        {mypercent}}" show-info="{
        {true}}" stroke-width="20" color="red" active="{
        {true}}" active-mode='forwards'></progress>
      <view bindtap='addpercent' >增加进度条百分比</view>
    </view>

//progress.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data:{
        mypercent:15
      },
      addpercent:function(){
        var newpercent = this.data.mypercent+20;
        this.setData({
          mypercent: newpercent
        })
      }
    })

![1240 8][]

PS：关于基础组件部分就是这4块，从下次开始咱们一起了解下表单组件

转载于:https://www.cnblogs.com/sharpest/p/10285538.html

[1240]: /images/20211223/3579eaa9a32746b595197513300d1424.png
[1240 1]: /images/20211223/bbb776879ade4f6d90abbb4fa79dafa0.png
[1240 2]: /images/20211223/e5dc903859034cbdb7ce37c403f80b72.png
[1240 3]: /images/20211223/1a08cabc69ef4d9cb9b45105e45bafcc.png
[1240 4]: /images/20211223/fe7cd1329fd64025a5f4622e19a5e47a.png
[1240 5]: /images/20211223/33d113e34054465b8768dc7a1e5b4533.png
[1240 6]: /images/20211223/5b07ca95c8ad4fec8edf637269169c3e.png
[1240 7]: /images/20211223/eb979fc6a8074aa1940f3b965542b90b.png
[1240 8]: /images/20211223/02f74cc1733d429988fa01ae9321074e.png