mp progress下載 - mp progress原始碼下載

mp progress

Ai源碼

支持在wepy中是用api方式

下載

mp-progress

專注於在小程式中實現圓環形進度條的工具

why

小程式目前有很多第三方ui元件，基本上都是以元件的形式引入使用，如果專案風格比較貼近第三方，那麼這些成套的三方元件庫是比較方便，不過如果只是使用三方ui庫某幾個元件的話，安裝一個非常大的庫則不太合理。

mp-progress目標檔案體積小於7KB，方便的js呼叫方式和原生的canvas標籤寫法，非常適合希望保留高度控制權的專案。

安裝

 $ npm install mp-progress --save

基礎庫要求

根據文件要求，支援2.7.0 及以上的基礎庫版本，使用最新基礎庫效果最佳

微信原生小程式

使用微信原生小程式的方式引入npm套件需要有額外的配置，具體可以查看https://developers.weixin.qq.com/community/develop/article/doc/0008aecec4c9601e750be048d51c13

元件方式的呼叫（簡單易用）

在對應頁面引入元件，初始化data並在wxml中使用元件

由於元件實現差異，該方式在wepy中不適用

 {
  "navigationBarTitleText": "首页",
  "usingComponents": {
    "mpProgress": "mp-progress/dist/component/mp-progress"
  }
}
...
// 参数使用方式相同，canvasSize默认是400*400
data = {
  config: {
    canvasSize: {
      width: 400,
      height: 400
    },
    percent: 100,
    barStyle: [{width: 20, fillStyle: '#f0f0f0'}, {width: 20, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}],
    needDot: true,
    dotStyle: [{r: 20, fillStyle: '#ffffff', shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]
  },
  percentage: 10
}
...
<mpProgress config="{{config}}" percentage="{{percentage}}"></mpProgress>

該方式遵從雙向綁定資料的原則，當頁面改變percentage，mp-progress會自動更新視圖

API方式呼叫（適合需要在mp-progress上層建構新元件的需求）

該方式適用於wepy，但必須在onReady回呼函數裡面進行初始化

傳入的單位是rpx ，即如果canvas寬度為400rpx，則傳入400，後續會自動計算真實尺寸

 import MpProgress from 'mp-progress';
...
// 初始化
// 注意：在wepy中必须在onReady里调用
const mprogress = new MpProgress({
  target: this,
  canvasId: 'progress',
  canvasSize: {width: 400, height: 400},
  barStyle: [{width: 12, fillStyle: '#f0f0f0'}, {width: 12, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}]
});

// 开始绘制进度，60代表60%
mprogress.draw(60);

...
<canvas class="canvas" type="2d" id="progress"></canvas>

顯示模式

效果	解析
	正常模式（預設）
	百分比模式（只需依需求傳入percent即可，相見參數說明）

參數說明

參數名	資料類型	必要參數	解析	示列
target	Object	是	頁面上下文	this
canvasId	String	是	頁面canvas的id	progress
canvasSize	Object	是	canvas畫布的大小，對應單位是rpx，只需要傳入數字即可	{width: 200, height: 300}
percent	Number	否	預設依360度去計算顯示圓環，如果傳入80%則會自動根據canvas尺寸貼底畫出最大半圓弧，有效值在50%～100%	100
barStyle	Array	是	圓弧進度樣式，依照陣列元素的位置順序渲染，一般第一個元素配置是鋪滿整個圓弧的底色，第二個元素配置是依照進度百分比渲染圓弧。 fillStyle可以是普通顏色和漸層顏色，使用漸層顏色是需要依照陣列的格式傳入各點的位置和顏色訊息	[{width: 12, fillStyle: '#f0f0f0'}, {width: 12, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674' }]}]
needDot	Boolean	否	是否需要顯示進度點	false
dotStyle	Array	否	進度點樣式配置，最多支援兩種樣式疊加，為確保進度點的清晰顯示第一個點預設添加陰影。如果第一個進度點直徑比進度條更大時，為了確保在畫布內完整顯示進度點，繪製的進度條圓圈必須減少對應的差值，其中shadow是可選的配置，shadow的值是`(0, 0, r/2, shadow)`	dotStyle: [{r: 24, fillStyle: '#fff', shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]

繪製函數說明

考慮到進度條在一個頁面可能多次更新，所以當元件實例化完成之後，需要手動呼叫draw方法去畫圖

參數名	資料類型	必要參數	解析
percentage	Number	是	圓弧百分比，例如傳入的是60，只會逆時針渲染剩餘的60%圓弧

其他說明

如何設定弧線端點樣式
在barStyle中任何一個參數項目都可以增加lineCap參數，例如：barStyle: [{width: 12, lineCap: 'round', fillStyle: '#56B37F'}]， lineCap有效值可以檢視文檔
必須在2.7.0版本以上的SDK運行
元件已經採用微信最新的同層渲染方法，該方法要求SDK版本不低於2.7.0
dotStyle
如果dotStyle包含shadow的話，為了確保shadow在圓環的所有都可以完整展示，會自動縮減進度條的半徑
進度動畫
目前動畫只在barStyle最後一個元素的定義中起作用，每一幀的動畫為總動畫的2%

文字展示效果

正常模式

實現代碼可以參考：

 <view class="garage-status">
  <canvas class="canvas" type="2d" id="progress"></canvas>
  <view class="status-ctn">
    <view class="status-count">127/127</view>
    <view class="desc-text">适用车位剩余</view>
  </view>
</view>