一.icon

icon 即 圖示。

1.屬性

2.程式碼

2.1.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>
 

2.2.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'
    ]
  }
})

3.效果

二.text

text 即 文字

1.屬性

space 有效值

2.程式碼

2.1.WXSS程式碼

.intro {
  margin: 15px;
}

2.2.WXML程式碼

<view class='intro'>

  <text>{{text}}</text>

</view>

2.3.JS程式碼

Page({
  data: {
    text: '新建專案選擇小程式專案，選擇程式碼存放的硬碟路徑，填入剛剛申請到的小程式的 AppID，給你的專案起一個好聽的名字，最後，勾選 "建立 QuickStart 專案" （注意: 你要選擇一個空的目錄才會有這個選項），點選確定，你就得到了你的第一個小程式了，點選頂部選單編譯就可以在微信開發者工具中預覽你的第一個小程式。'
  },
})
 

3.效果

三.progress

progress 即 進度條。

1.屬性

2.程式碼

2.1.WXSS程式碼

progress {
  margin: 10px;
}

2.2.WXML程式碼

<progress percent="{{percentValue}}" color="pink" stroke-width="15" show-info active />

2.3.JS程式碼

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    percentValue: '90'
  }
})

3.效果

四.rich-text

rich-text 即 富文字。

1.屬性

受信任的HTML節點及屬性

全域性支援class和style屬性，不支援id屬性。

 

2.程式碼

2.1.WXSS程式碼

rich-text {
  width: 700rpx;
  padding: 25rpx 0;
}


.page-body {
  padding: 20rpx 0;
}


.rich-text-wrp {
  padding: 0 25rpx;
  background-color: #fff;
}

2.2.WXML程式碼

<view class="page-body">

  <view class="rich-text-wrp">
    <rich-text nodes="{{html}}" bindtap="tap"></rich-text>
  </view>

</view>

2.3.JS程式碼

Page({
  data: {

    html: '<p><img src=\"http://i.imgur.com/DvpvklR.png\" /><div class="div_class" style="line-height: 60px; color: red;">Hello&nbsp;World!</div>先說第一個，如何繪製波浪圖形。繪製波浪圖形的方法有很多,這裡介紹一種最簡單的方法，就是使用canvas的drawLine方法繪製直線。我們可以將view的寬度轉化成弧度，通過sin或者cos方法獲取每個畫素點的座標，通過drawline繪製一條從頂點到底部的直線，這樣都可以達到效果。再說第二個，這個是一個難點，但是實現起來卻很簡單。我們獲取的座標是從0-360度的座標，也就是說，最後一個的座標接下來的座標應該是第一的座標，它們是一個連續的沒有斷開的座標系列，那麼我們只需要將座標按照一定的規則交換一下位置就可以實現波浪的盪漾效果了。<img src=\"http://i.imgur.com/DvpvklR.png\" />先說第一個，如何繪製波浪圖形。繪製波浪圖形的方法有很多,這裡介紹一種最簡單的方法，就是使用canvas的drawLine方法繪製直線。我們可以將view的寬度轉化成弧度，通過sin或者cos方法獲取每個畫素點的座標，通過drawline繪製一條從頂點到底部的直線，這樣都可以達到效果。再說第二個，這個是一個難點，但是實現起來卻很簡單。我們獲取的座標是從0-360度的座標，也就是說，最後一個的座標接下來的座標應該是第一的座標，它們是一個連續的沒有斷開的座標系列，那麼我們只需要將座標按照一定的規則交換一下位置就可以實現波浪的盪漾效果了。<img src=\"http://i.imgur.com/DvpvklR.png\" />如何繪製波浪圖形。繪製波浪圖形的方法有很多,這裡介紹一種最簡單的方法，就是使用canvas的drawLine方法繪製直線。我們可以將view的寬度轉化成弧度，通過sin或者cos方法獲取每個畫素點的座標，通過drawline繪製一條從頂點到底部的直線，這樣都可以達到效果。再說第二個，這個是一個難點，但是實現起來卻很簡單。我們獲取的座標是從0-360度的座標，也就是說，最後一個的座標接下來的座標應該是第一的座標，它們是一個連續的沒有斷開的座標系列，那麼我們只需要將座標按照一定的規則交換一下位置就可以實現波浪的盪漾效果了。',

  },


  tap() {
    console.log('tap')
  }
  
})

3.效果