mpvue и подводные камни в разработке апплета

внешний интерфейс JavaScript Promise mpvue

Деловые нужды, в последнее время начал разрабатывать небольшие программы, используя mpvue, в процессе наступил на какие-то ямы, есть и небольшие программы, есть и mpvue. Я чувствую, что в текстовом поле апплета много ям, и много необъяснимых ям, причину которых невозможно найти. Как правило, мини-программы не подходят для страниц сложной формы.

Побить пит-рекорд

1. mpvue устанавливает атрибут отображения элемента, а затем v-show управляет отображением и скрытием, что не вступает в силу.Элемент всегда подчиняется атрибуту отображения в css

   Настройка свойства display в css не действует при использовании v-show. То же самое верно и для использования собственного апплета :hidden в mpvue. Элемент подчиняется свойству display в css. В настоящее время его можно связать с :class.

Тестовый код:


<template>
  <div class="container">
    <div class="box" :hidden="!isShow">原生hidden
    </div>
    <div class="box" v-show="isShow">v-show
    </div>
    <div class="box" :class="{'hidden':!isShow}">:class绑定
    </div>
    <button @tap="showUser">点我</button>
  </div>
</template>
<script>
export default {
    data() {
        return {
            isShow: false
        };
    },
    methods: {
        showUser() {
            this.isShow = !this.isShow;
        }
    }
};

</script>

<style scoped>
.box {
    display: block;
    width: 100rpx;
    height: 200rpx;
    background: yellow;
    margin:0 auto;
}
.hidden{
  display:none;
}

</style>

2. Самый высокий уровень текстовой области

Длинная форма страницы, кнопка отправки фиксируется внизу с фиксированным — это очень распространенная сцена, потому что текстовая область имеет самый высокий уровень и не может быть покрыта другими элементами, поэтому часть значения текстовой области будет раскрыта, а фокус событие также может быть запущено при нажатии нижней кнопки. (То же самое верно для наложения слоя маркера на страницу с текстовой областью)

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

  Окончательное решение — использовать текстовое поле во всплывающем окне в качестве общедоступного компонента редактора, который отображается только при его срабатывании с наивысшим уровнем. Избегайте переопределения других элементов.

3. При использовании фиксированного пользовательского всплывающего окна в апплете, как сделать так, чтобы нижняя длинная страница запрещала прокрутку

   Этот сценарий также очень распространен, решения таковы:

   1. Длинная страница внизу использует режим прокрутки. Когда отображается всплывающее окно, установите для параметра scroll-y значение false, а когда всплывающее окно закрыто, установите для параметра scroll-y значение true.

   2. В нативном апплете вы можете использовать catchtouchmove на всплывающем слое. Это событие предотвратит всплытие к родительскому элементу. Используйте @touchmove.stop="an empty function" в mpvue.

4. При возникновении исключения в коде mpvue инструмент разработчика апплета иногда не выдает исключение и сообщает об ошибке.За исключением отсутствия файла консоль большую часть времени молчит, что сложно отладить.

   После поиска, при нормальных обстоятельствах, инструмент разработчика будет выдавать сообщение об ошибке, если код неверен, но ошибка не будет выдана, если код в обещании ненормальный. Причина: Promise в mpvue заменен на объект Promise полифилла core-js, в global нет обработки ошибок.

Решение. Добавьте строку require('core-js/library/modules/_global.js').console = console или require('core-js/library/modules/_global.js') в файле main.js под src . onunhandledrejection = console.error

5. При записи textarea в компоненте происходит сбой привязки события @input под ios

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

Поле ввода должно подсчитывать количество слов в режиме реального времени, поэтому событие ввода связано. Всплывающий слой использует v-show для управления отображением и скрытием, что является нормальным для инструментов разработчика, нормальным для Android и ненормальным для ios, что указывает на то, что событие, связанное с @input, не может быть найдено, и это нормально для привязки другие события, такие как bindblur, одновременно.

В итоге просто поменял v-show на v-if, а причину пока не нашел.

6. Ошибка TypeError: Cannot assign to read only property 'exports' объекта '#' сообщается при обращении к сторонней библиотеке.

При обращении к сторонней библиотеке я не использовал метод пакета npm, а напрямую копировал файлы под dist в сторонней библиотеке в либы проекта, но webpack сообщил об ошибке, это не проблема mpvue , но webpack Вы не можете смешивать import и module.exports. Следовательно, необходимо преобразовать модульный синтаксис ES6 в модульный стандартный синтаксис, такой как AMD, CommonJS, UMD.

 1.使用transform-es2015-modules-commonjs插件


 2.将babelrc下preset中的modules设置成"commonjs"

tips

1. На клавиатуре цифрового поля ввода апплета под ios нет полной кнопки, а интерактивный опыт оставляет желать лучшего. Используйте обычные поля ввода.

2. Текстовая область не может использоваться в режиме прокрутки.

3. Событие размытия текстовой области будет позже, чем событие касания на странице.Если вам нужно получить текстовую область в событии нажатия кнопки, вы можете использовать bindsubmit формы.

Категории