Мини-программа «Прокладывая путь»

внешний интерфейс GitHub Vue.js Canvas

Мини программа давно так глубоко не разрабатывалась.В этот раз я воспользовался услугами компании для создания мини программы и подробно изучил ее.В результате было вырыто бесчисленное количество ям.Конечно копались только ямы,и они не были заполнены. Ха-ха, просто отметьте это первым.

Из-за потребностей бизнеса компании этот апплет используетmpvue + typescriptразвивать.

mpvueродственная яма

оinputвопрос

Потому что дизайн хочет, чтобы взаимодействие с полем ввода выглядело так:

Недостаточно использовать родное поле ввода, можно только написать компоненты самостоятельно. затем используйтеvueспособ написать компонент, и обнаружил, чтоmpvueоinputЕсть довольно много проблем.

  • inputиспользоватьv-modalМигает при вводе
  • вложение компонентовslotЧто-то не так
  • Вход не поддерживается:typeа такжеv-modal
  • Такие теги, как слот, не поддерживают добавлениеclass, который не может быть скомпилирован вwxss
  • вложенные компоненты,propsЧто-то не так
  • Исправлятьslotнельзя обновлять в горячем виде, только повторноnpm run dev

Вот связанная проблема на github:

проблема с перепрошивкой inout

Проблема слота вложенного компонента 11

Проблема слота вложенного компонента 222

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

Небольшие ямы, связанные с программой

нативные компонентыcanvasвопрос

Из-за бизнес-потребностей компании в апплете есть много данных диаграммы, которые необходимо отобразить, и, естественно, их необходимо использовать.canvas,а такжеcanvasявляется нативным компонентом, егоz-indexБесконечно большой, как только появляется содержимое всплывающего окна, которое нужно прикрыть, просто gg.

На самом деле это может быть решено с помощьюcover-viewВ качестве маскирующего слоя (сначала я думал, надо поставитьcover-viewВложенный в узел нативного компонента), объедините содержимое всплывающего окнаcover-view, но это очень невкусно,cover-viewСодержащиеся в нем проблемы узла, а также некоторые проблемы стиля не могут быть реализованы. Если содержимое всплывающего окна крутое, то могу только предложить поменять дизайн на эскизный.

<view>
    <canvas canvas-id="test"></canvas>
    // 这是一个遮罩层，为了覆盖住原生组件（ 1.9.0及以上才支持 ）
    <cover-view>
        这是一个遮罩层balabala
    </cover-view>
    
    // 官方给的demo
    <video>
        <cover-view>
            这里也可以覆盖video里的内容
        </cover-view>
    </video>
<view>

Вот соответствующие ошибки, с которыми я столкнулся:

  • покрыть текстcover-viewЭтикетки, иначе опечатки.
  • cover-viewСодержимое не поддерживает настройкиградиент, теньи другие стили.
  • вложение пользовательских компонентовcover-view, пользовательский компонентslotи его родительские узлы в настоящее время не поддерживают передачуwx:ifЭлементы управления отображаются и скрываются, иначе это вызоветcover-viewНе показывай
  • canvasЕго нельзя поместить в прокручиваемый список.Когда страница скользит, под эффектом настоящей машины,canvasНе могу очень хорошо следить за прокруткой, сначала будет очень плохой эффект от прокрутки, а потом прокрутка внезапно исчезнет.
  • cover-imageне поддерживаетсяbindtouchstartдождитесь сенсорного события

В общем, с нативными компонентами апплета еще много проблем, и конкретную реализацию нужно протестировать на реальной машине, чтобы увидеть различные проблемы.

Яма с использованием echart-for-wx

  1. Решите проблему с всплывающим окном, закрывающим холст, тем же способом, что и выше.

Решение: используйте диаграммуcover-viewдолжен быть в узлеec-canvasДобавлено позже, контролируется стилемcover-viewсоответствующее местонахождение

<ec-canvas class="canvas" id="mychart-dom-line" canvas-id="mychart-line" :ec="ecLine">
</ec-canvas>
<cover-view class="cover-view">cover-vdddddddddddddiew</cover-view>
  1. echartВ использованииrpxКогда единицей является единица, возникает проблема адаптации модели.

echartПроблемы с адаптацией на разных моделях, блок использованияpx, адаптация не проблема, но с помощьюrpx, будет небольшая проблема с адаптацией модели, а если использовать mpvue, то блокpxпревратится вrpx, возникает следующая проблема:

фактический эффект:

ожидаемый результат:

Решение:

существуетmpvue, используйте встроенные стили (встроенные стили неpxПревратиться вrpx), Лучше всего фиксировать высокие Emmmm .... Результаты показали, что будут проблемы с мобильными телефонами с большим экраном и маленьким экраном, поэтому его нельзя написать в встроенном стиле.pxРазмер (поднял вопрос на GitHub, но пока не ответил, боюсь мертвый камень утонет в море)

Canvas создает проблему адаптации изображения

Из-за разных размеров телефонов и соотношения пикселей их устройствdevicePixelRatioНесовместимо, а то у апплета свой блокrpx, так что если генерироватьcanvasФиксировано писать его ширину и высоту, что проблематично.

Основной алгоритм:

canvasрисовать с помощьюpxединицы, но разные устройстваpxЕго нужно преобразовать, поэтому единица rpx используется в компоненте единообразно, и вот проблема, как преобразовать единицу. пройти черезwx.getSystemInfoSyncПолучите размер экрана устройства, чтобы получить соотношение, а затем выполните преобразование, код выглядит следующим образом:

const sysInfo = wx.getSystemInfoSync();
const screenWidth = sysInfo.screenWidth;
this.factor = screenWidth / 750; // 获取比例
function toPx(rpx) { // rpx转px
    return rpx * this.factor;
}
function toRpx(px) { // px转rpx
    return px / this.factor;
},

Но я знаю, что все ленивы, почему бы не иметь колёса🤣

Я действительно не хочу считать, я могу использовать готовые колесаНебольшой программный холст генерирует изображения

Тогда есть,canvasпроблема с передачей изображения

Нужно использоватьcanvasToTempFileметод, потому чтоcanvasУзел должен существовать, чтобы получить егоcanvasрисование в контекстеcanvasвне видимой области страницы. И когда вы конвертируете его в картинку, вам нужно добавить волшебствоsetTimeoutзадерживать. Минимальная задержка составляет300ms, каким бы маленьким он ни был. (Почему, я не знаю, о(╥﹏╥)о)

наконец

Это всего лишь запись моего опыта рытья ям, а есть еще ямы, которые нужно вырыть.

Категории