mp progress

мп-прогресс

Инструмент, ориентированный на внедрение круговых индикаторов выполнения в небольших программах.

почему

Мини-программы в настоящее время имеют множество сторонних компонентов пользовательского интерфейса, которые в основном вводятся и используются в виде компонентов. Если стиль проекта ближе к сторонним, то эти полные наборы библиотек сторонних компонентов более удобны. если вы используете только определенные компоненты сторонней библиотеки пользовательского интерфейса. В этом случае было бы неразумно устанавливать очень большую библиотеку.

Целевой размер файла mp-progress составляет менее 7 КБ. Удобный метод вызова 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 %, максимальная дуга полукруга будет автоматически нарисована в зависимости от размера холста. Допустимое значение — от 50 % до 100 %.	100
барСтиль	Множество	да	Стиль прогресса дуги отображается в соответствии с порядком расположения элементов массива. Обычно первая конфигурация элемента — это цвет фона, который покрывает всю дугу, а вторая конфигурация элемента предназначена для визуализации дуги в соответствии с процентом прогресса. fillStyle может быть обычным цветом или цветом градиента. Чтобы использовать цвет градиента, вам необходимо передать информацию о положении и цвете каждой точки в формате массива.	[{width: 12, fillStyle: '#f0f0f0'}, {width: 12, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674' }]}]
нужнаточка	логическое значение	нет	Вам нужно отображать точки прогресса?	ЛОЖЬ
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>
  

• Отзыв о проблеме