mp progress

mp-ความคืบหน้า

เครื่องมือที่เน้นไปที่การใช้แถบความคืบหน้าแบบวงกลมในโปรแกรมขนาดเล็ก

ทำไม

ปัจจุบันมินิโปรแกรมมีส่วนประกอบ UI ของบุคคลที่สามจำนวนมาก ซึ่งโดยพื้นฐานแล้วจะมีการแนะนำและใช้ในรูปแบบของส่วนประกอบ หากรูปแบบโปรเจ็กต์ใกล้เคียงกับบุคคลที่สาม ชุดไลบรารีส่วนประกอบของบุคคลที่สามที่สมบูรณ์เหล่านี้จะสะดวกกว่า หากคุณใช้ส่วนประกอบบางอย่างของไลบรารี UI ของบริษัทอื่นเท่านั้น หากเป็นเช่นนั้น การติดตั้งไลบรารีขนาดใหญ่มากจะไม่สมเหตุสมผล

ขนาดไฟล์เป้าหมายของ mp-progress น้อยกว่า 7KB วิธีการเรียก js ที่สะดวกและวิธีการเขียนแท็ก canvas ดั้งเดิมนั้นเหมาะมากสำหรับโปรเจ็กต์ที่ต้องการรักษาการควบคุมในระดับสูง

ติดตั้ง

 $ npm install mp-progress --save

ข้อกำหนดพื้นฐานของห้องสมุด

ตามข้อกำหนดของเอกสาร รองรับไลบรารีพื้นฐานเวอร์ชัน 2.7.0 ขึ้นไป ผลลัพธ์ที่ดีที่สุดคือการใช้ไลบรารีพื้นฐานล่าสุด

มินิโปรแกรมเนทิฟ WeChat

การใช้แอปเพล็ตดั้งเดิมของ WeChat เพื่อแนะนำแพ็คเกจ npm จำเป็นต้องมีการกำหนดค่าเพิ่มเติม โปรดดูรายละเอียดที่ https://developers.weixin.qq.com/community/develop/article/doc/0008aecec4c9601e750be048d51c13

การโทรในโหมดส่วนประกอบ (เรียบง่ายและใช้งานง่าย)

แนะนำส่วนประกอบในหน้าที่เกี่ยวข้อง เริ่มต้นข้อมูล และใช้ส่วนประกอบใน 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>

วิธีการนี้เป็นไปตามหลักการของข้อมูลการเชื่อมโยงแบบสองทาง เมื่อเพจเปลี่ยนเปอร์เซ็นต์ mp-progress จะอัปเดตมุมมองโดยอัตโนมัติ

การเรียก API (เหมาะสำหรับผู้ที่ต้องการสร้างส่วนประกอบใหม่นอกเหนือจาก mp-progress)

วิธีนี้เหมาะสำหรับ wepy แต่ต้องเริ่มต้นในฟังก์ชันโทรกลับ onReady

หน่วยที่ส่งเข้ามาคือ rpx กล่าวคือ หากความกว้างของผืนผ้าใบคือ 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>

โหมดการแสดงผล

ผล	แยกวิเคราะห์
	โหมดปกติ (ค่าเริ่มต้น)
	โหมดเปอร์เซ็นต์ (คุณจะต้องส่งผ่านเป็นเปอร์เซ็นต์เท่านั้นตามต้องการ โปรดดูคำอธิบายพารามิเตอร์)

คำอธิบายพารามิเตอร์

ชื่อพารามิเตอร์	ชนิดข้อมูล	พารามิเตอร์ที่จำเป็น	แยกวิเคราะห์	รายการ
เป้า	วัตถุ	ใช่	บริบทของหน้า	นี้
รหัสผ้าใบ	สตริง	ใช่	รหัสของผืนผ้าใบหน้า	ความคืบหน้า
ผ้าใบขนาด	วัตถุ	ใช่	ขนาดของผืนผ้าใบ หน่วยที่เกี่ยวข้องคือ rpx คุณจะต้องส่งผ่านตัวเลขเท่านั้น	{กว้าง: 200 สูง: 300}
เปอร์เซ็นต์	ตัวเลข	เลขที่	ตามค่าเริ่มต้น วงกลมจะถูกคำนวณและแสดงตาม 360 องศา หากส่งผ่าน 80% ส่วนโค้งสูงสุดของครึ่งวงกลมจะถูกวาดโดยอัตโนมัติตามขนาดผืนผ้าใบ	100
บาร์สไตล์	อาร์เรย์	ใช่	รูปแบบความคืบหน้าของส่วนโค้งจะแสดงผลตามลำดับตำแหน่งขององค์ประกอบอาร์เรย์ โดยทั่วไป การกำหนดค่าองค์ประกอบแรกคือสีพื้นหลังที่ครอบคลุมส่วนโค้งทั้งหมด และการกำหนดค่าองค์ประกอบที่สองคือการแสดงผลส่วนโค้งตามเปอร์เซ็นต์ความคืบหน้า fillStyle อาจเป็นสีปกติหรือสีไล่ระดับสีก็ได้ หากต้องการใช้สีไล่ระดับสี คุณต้องส่งผ่านข้อมูลตำแหน่งและสีของแต่ละจุดในรูปแบบของอาร์เรย์	[{ความกว้าง: 12, fillStyle: '#f0f0f0'}, {ความกว้าง: 12, เคลื่อนไหว: จริง, fillStyle: [{ตำแหน่ง: 0, สี: '#56B37F'}, {ตำแหน่ง: 1, สี: '#c0e674' }]}]
ต้องการDot	บูลีน	เลขที่	คุณจำเป็นต้องแสดงคะแนนความคืบหน้าหรือไม่?	เท็จ
ดอทสไตล์	อาร์เรย์	เลขที่	การกำหนดค่ารูปแบบจุดความคืบหน้ารองรับการซ้อนทับได้ถึงสองรูปแบบ เพื่อให้แน่ใจว่าจะแสดงจุดความคืบหน้าได้ชัดเจน จุดแรกจะเพิ่มเงาตามค่าเริ่มต้น หากเส้นผ่านศูนย์กลางของจุดความคืบหน้าจุดแรกใหญ่กว่าแถบความคืบหน้า เพื่อให้แน่ใจว่าจุดความคืบหน้าจะแสดงบนผืนผ้าใบอย่างสมบูรณ์ วงกลมของแถบความคืบหน้าที่วาดจะต้องลดลงตามความแตกต่างที่สอดคล้องกัน โดยที่เงาคือการกำหนดค่าเสริม และค่าเงาคือ (0, 0, r/2, shadow)	dotStyle: [{r: 24, fillStyle: '#fff', เงา: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]

คำอธิบายฟังก์ชั่นการวาด

เมื่อพิจารณาว่าแถบความคืบหน้าอาจได้รับการอัปเดตหลายครั้งบนเพจ หลังจากที่ส่วนประกอบถูกสร้างอินสแตนซ์แล้ว คุณจะต้องเรียกใช้วิธี draw ด้วยตนเองเพื่อวาดภาพ

ชื่อพารามิเตอร์	ชนิดข้อมูล	พารามิเตอร์ที่จำเป็น	แยกวิเคราะห์
เปอร์เซ็นต์	ตัวเลข	ใช่	เปอร์เซ็นต์ส่วนโค้ง ตัวอย่างเช่น หากส่งผ่าน 60 ส่วนโค้งที่เหลือเพียง 60% เท่านั้นที่จะแสดงผลทวนเข็มนาฬิกา

คำแนะนำอื่นๆ

• วิธีการตั้งค่าสไตล์จุดสิ้นสุดส่วนโค้ง

  คุณสามารถเพิ่มพารามิเตอร์ lineCap ให้กับรายการพารามิเตอร์ใดๆ ใน barStyle ได้ เช่น: barStyle: [{width: 12, lineCap: 'round', fillStyle: '#56B37F'}] สำหรับค่าที่ถูกต้อง lineCap โปรดดูเอกสาร

• ต้องทำงานบน SDK เวอร์ชัน 2.7.0 ขึ้นไป

  ส่วนประกอบดังกล่าวได้นำวิธีการเรนเดอร์เลเยอร์เดียวกันล่าสุดของ WeChat มาใช้ ซึ่งกำหนดให้เวอร์ชัน SDK ไม่ต่ำกว่า 2.7.0

• ดอทสไตล์

  หาก dotStyle มีเงา เพื่อให้แน่ใจว่าเงาสามารถแสดงได้เต็มที่ในทุกพื้นที่ของวงกลม รัศมีของแถบความคืบหน้าจะลดลงโดยอัตโนมัติ

• แอนิเมชั่นความคืบหน้า

  ปัจจุบันภาพเคลื่อนไหวใช้งานได้เฉพาะในคำจำกัดความขององค์ประกอบสุดท้ายของ 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>
  

• ข้อเสนอแนะปัญหา