「小程序JAVA實戰」小程序的基礎組件（24）

轉自：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

• 演示用例

<!--icon.wxml-->
<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>

text組件

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

• 演示用例
  text.html

<!--text.wxml-->
<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>

rich-text 富文本

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

• 演示用例
  rich-text.html

<!--rich-text.wxml-->
<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;
}

使用富文本須要特別注意

progress 進度條

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

• 演示用例
  rich-text.html

<!--progress.wxml-->
<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
    })
  }
})

PS：關於基礎組件部分就是這4塊，從下次開始我們一塊兒瞭解下表單組件