mp progress

mp-progress

أداة تركز على تنفيذ أشرطة التقدم الدائرية في البرامج الصغيرة

لماذا

تحتوي البرامج المصغرة حاليًا على العديد من مكونات واجهة المستخدم التابعة لجهات خارجية، والتي يتم تقديمها واستخدامها بشكل أساسي في شكل مكونات. إذا كان نمط المشروع أقرب إلى الطرف الثالث، فإن هذه المجموعات الكاملة من مكتبات مكونات الطرف الثالث تكون أكثر ملاءمة. إذا كنت تستخدم فقط مكونات معينة من مكتبة واجهة المستخدم التابعة لجهة خارجية. إذا كان الأمر كذلك، فلن يكون من المعقول تثبيت مكتبة كبيرة جدًا.

حجم الملف المستهدف لـ mp-progress أقل من 7 كيلو بايت. تعد طريقة استدعاء js المريحة وطريقة كتابة علامة القماش الأصلية مناسبة جدًا للمشاريع التي ترغب في الاحتفاظ بدرجة عالية من التحكم.

ثَبَّتَ

 $ 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>

وضع العرض

تأثير	تحليل
	الوضع العادي (الافتراضي)
	وضع النسبة المئوية (تحتاج فقط إلى تمرير النسبة المئوية كما هو مطلوب، راجع وصف المعلمة)

وصف المعلمة

اسم المعلمة	نوع البيانات	المعلمات المطلوبة	تحليل	قائمة
هدف	هدف	نعم	سياق الصفحة	هذا
معرف القماش	خيط	نعم	معرف لوحة الصفحة	تقدم
CanvasSize	هدف	نعم	حجم اللوحة القماشية، الوحدة المقابلة لها هي rpx، ما عليك سوى تمرير الرقم	{العرض: 200، الارتفاع: 300}
بالمائة	رقم	لا	افتراضيًا، يتم حساب الدائرة وعرضها وفقًا لـ 360 درجة، إذا تم تمرير 80%، فسيتم رسم الحد الأقصى لقوس نصف الدائرة تلقائيًا بناءً على حجم اللوحة القماشية. تتراوح القيمة الصالحة بين 50% و100%.	100
barStyle	صفيف	نعم	يتم عرض نمط تقدم القوس وفقًا لترتيب موضع عناصر المصفوفة، بشكل عام، تكوين العنصر الأول هو لون الخلفية الذي يغطي القوس بأكمله، وتكوين العنصر الثاني هو عرض القوس وفقًا لنسبة التقدم. يمكن أن يكون fillStyle لونًا عاديًا أو لونًا متدرجًا لاستخدام لون متدرج، تحتاج إلى تمرير معلومات موضع ولون كل نقطة في تنسيق المصفوفة.	[{width: 12, fillStyle: '#f0f0f0'}، {width: 12، animate: true، fillStyle: [{position: 0، color: '#56B37F'}، {position: 1، color: '#c0e674' }]}]
needDot	منطقية	لا	هل تحتاج إلى عرض نقاط التقدم؟	خطأ شنيع
dotStyle	صفيف	لا	يدعم تكوين نمط نقطة التقدم ما يصل إلى نمطين من التراكب لضمان العرض الواضح لنقاط التقدم، تضيف النقطة الأولى ظلًا بشكل افتراضي. إذا كان قطر نقطة التقدم الأولى أكبر من شريط التقدم، فمن أجل ضمان عرض نقطة التقدم بالكامل في اللوحة القماشية، يجب تقليل دائرة شريط التقدم المرسومة بالفرق المقابل، حيث يكون الظل تكوينًا اختياريًا، وقيمة الظل هي (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

  إذا كان 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>
  

• ردود الفعل المشكلة