Каркас апплета Meituan mpvue (название цветка: нет друзей) руководство по приседаниям

внешний интерфейс JavaScript Vue.js mpvue

Каркас апплета Meituan mpvue (название цветка: нет друзей) руководство по приседаниям

Первый раз я столкнулся с апплетом наверное в начале 2017. В то время апплет был только внутри.В то время он был накинут различными ограничениями.Односторонняя привязка, Никаких обещаний, лимит запросов, лимит на размер пакета, всякие античеловеческие... В любом случае, я чувствую себя полным злорадства. Недавно получил проект небольшой инженерной программы, когда занимался подбором технологий, взял предыдущие вещи, посмотрел еще раз, и снова стал с ними знаком. Я чувствую, что апплет все еще усердно работает, поддерживая большую часть синтаксиса es6 и Vue-подобную структуру mvvm wepy, которая также поддерживает управление состоянием redux. В основном я создал демо и запустил его.Хотя он не такой кислый и освежающий, как vue, он все же вполне в порядке, по крайней мере, гораздо более дружелюбный, чем родной синтаксис апплета.

Затем я начал использовать wepy для сборки проекта и написания статических страниц (потому что режим разработки компании заключается в том, чтобы сначала писать статические страницы, Подождите, пока выйдет back-end интерфейс classmate, а затем привяжите данные), хотя wepy проще в использовании, чем нативный, Но ям все равно много, так что не буду их здесь перечислять...

Когда мы уже почти закончили писать статическую страницу, я как-то вечером увидел на форуме сообщение о том, что Meituan выпустила небольшой программный фреймворк mpVue. (не знаю почему, каждый раз, когда я вижу это имя, я думаю только о 3-х словах, нет друзей, ха-ха), примерно посмотрелофициальное введение, есть следующие основные моменты:

  1. Как опыт развития VUE, в том числе Vuex
  2. Возможность преобразования кода H5 в небольшой программный объектный код

То есть его можно не только разработать с помощью знакомого синтаксиса vue, но также можно напрямую скомпилировать вашу страницу h5 в небольшую программу. Проект находится в открытом доступе менее 20 дней и получил почти 7000 звезд на своем нынешнем месте.Видно, что мир страдает уже давно.

Я построил демо и запустил его.Это похоже на работу совести в мире разработки.Кстати, я скопировал код статической страницы wepy, написанный ранее, и посмотрел. Обнаружено, что пока немного изменишься, можно плавно переключаться с wepy на mpvue (время переключения всего проекта около полдня). Просто делайте то, что вы говорите, и в тот же день переходите к mpvue.На данный момент проект близится к завершению, и весь процесс разработки действительно доставляет удовольствие.

Баг... Кажется, сегодня я здесь не для того, чтобы рекламировать mpvue, я здесь, чтобы придраться..

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

один,Это личное чувство является самой большой ямой, в дополнение к отсутствию файлов будет сообщать об ошибках, других ошибках синтаксиса кода и т. д., Консоль большую часть времени молчит (и иногда сообщает, что xxx не определено) Часто встречается, что this.xxx=5 в некоторых случаях сообщит об ошибке, а в некоторых случаях ответа не будет, При каких обстоятельствах это сработает, а при каких нет, я еще не разобрался в правилах.

как только я положил

this.dataObject.map(() => { ...这里省略... })

перед картой результатов.Случайно выставленный фактический код становится

this.dataObjectmap(() => { ...这里省略... })

В итоге долго искал и не смог найти причину проблемы.

два,Это еще и более неудобное место, то есть в привязке данных шаблона нет возможности вызвать метод method в синтаксисе шаблона (Или нет способа вызывать функции, отличные от вычисляемых), некоторые люди могут сказать, что можно использовать вычисляемое свойство, так что, если я хочу передать параметры в функцию? См. код ниже:

<template>
  <view v-for="item in costList" >
    {{formatCost(item)}}
  </view>
</template>

<script>
export default {
  data(){
    return{
      costList:[]
    }
  },
  methods: {
    formatCost(item){
    return item.toFixed(2)
    },
    getData(){
    let arr = [3.255,4.1,5,15]
    this.costList = arr
    }
  }
</script>

В настоящее время{{formatCost(item)}}Содержимое внутри будет отображаться как пустая строка, поскольку функция не поддерживается, и в этом случае Также нельзя использовать вычисляемое свойство, если вы не хотите писать вычисление для каждого элемента массива.

В этом случае мое решение состоит в том, чтобы сначала изменить данные при получении данных.Как и в приведенном выше примере, мы можем написать это в методе getData

let arr = [3.255,4.1,5,15]
// 遍历数组里面的元素,然后格式化一下,添加到 costList里去
arr.map(item => {
    this.costList.push = this.formatCost(item)
})

три,Созданные функции жизненного цикла на всех страницах будут загружены при загрузке апплета. Одноразовое выполнение, не каждый раз при входе на страницу, например у меня 3 страницы

pageA

...省略一些代码...
creatted(){
    console.log('pageA 的 created函数执行')
}

pageB

...省略一些代码...
creatted(){
    console.log('pageB 的 created函数执行')
}

pageC

...省略一些代码...
creatted(){
    console.log('pageC 的 created函数执行')
}

Затем запустите апплет, не заходя на эти 3 страницы.Предположим, что у меня сейчас есть индексная страница.Когда мы откроем эту страницу, будет какой-то вывод.

pageA 的 created函数执行
pageB 的 created函数执行
pageC 的 created函数执行

Это на самом деле очень легко решить. Вместо этого используйте mount или onLoad или onReady.Когда дело доходит до этих функций, позвольте мне упомянуть об этом. Созданные и смонтированные здесь — это жизненный цикл vue (mpvue), а onLoad и onReady — жизненный цикл апплета.Официальное описание mpvue:

В дополнение к жизненному циклу самого Vue, mpvue также совместим с жизненным циклом апплета Эта часть хука жизненного цикла исходит от апплета WeChat. Страница,Помимо особых обстоятельств, не рекомендуется использовать небольшой хук жизненного цикла процедуры.

Однако официальная диаграмма жизненного цикла также показывает, что onLoad и onReady апплета выполняются раньше, чем создаются и монтируются. То есть, если мы запрашиваем данные в и onLoad onReady, время белого экрана будет относительно меньше (здесь белый экран относится к интерфейсу, где данные не отображаются), И официалы не объяснили почему не рекомендуется использовать жизненный цикл апплета.Мы тоже пробовали.Жизненных проблем с жизненным циклом апплета не нашли. Поэтому мы больше склонны отдавать приоритет жизненному циклу апплета, ведь пользовательский опыт — это главное.

4. Свойства, установленные в Vue.prototype, не определены в синтаксисе шаблона и должны быть рассчитаны с помощью вычислений, прежде чем их можно будет использовать. При использовании vue мне нравится хранить путь к изображению на сервере в прототипе vue:

import config from './config'
Vue.prototype.$serverPath = config.serverPath

Затем мы используем это на странице

<img :src="$serverPath + 'logo.png'" />

Таким образом, вы можете избежать импорта файла конфигурации на каждой странице.Если мы выпустим официальную версию позже, нам нужно будет только изменить файл конфигурации здесь. Однако, если это написано в mpvue, фактический рендеринг будет

<image src="undefinedlogo.png" ></image>

Если вы хотите использовать его на каждой странице, вы можете импортировать его только на каждую страницу или вернуть this.$serverPath в вычисленном

5. При использовании цикла v-for, если вы хотите указать индекс для текущего элемента, под vue, чтобы избежать проблем, я обычно предпочитаю делать это

v-for="item,index in list"

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

v-for="(item,index) in list"

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

Наш входной файл main.js (продолжая название vue, назовем его так, на самом деле, я думаю, его следует называть конфигурационным файлом) можно настроить так, Официальная документация, вероятно, говорит то же самое

Эта часть контента поступает из файла входа приложения и страницы, обычно main.js, вам нужно поместить его в файл входа. export default { config: {} }, это может быть распознано нашим загрузчиком как конфигурация, которую нужно записать в виде файла json.

import Vue from 'vue';
import App from './app';

const vueApp = new Vue(App);
vueApp.$mount();

// 这个是我们约定的额外的配置
export default {
    // 这个字段下的数据会被填充到 app.json ／ page.json
    config: {
        pages: ['static/calendar/calendar', '^pages/list/list'], // Will be filled in webpack
        window: {  // 顶部栏的统一配置
            backgroundTextStyle: 'light',
            navigationBarBackgroundColor: '#455A73',
            navigationBarTitleText: '美团汽车票',
            navigationBarTextStyle: '#fff'
        }
    }
};

В то же время в это время мы будем автоматически заполнять поле страниц в app.json в соответствии с данными страницы записи. Поле страниц также можно настраивать, согласовано, что страницы, начинающиеся с символа ^, будут располагаться вверху массива.

Мы видим, что глобальный стиль верхней панели можно настроить в config.window, но что, если мы хотим указать стиль для каждой страницы? Фактически, Вышеупомянутый способ подходит только для настройки содержимого в app.json, если вы хотите добавить стиль на каждую свою страницу, то вам следует сделать это: Добавьте следующее содержимое в файл записи (main.js), которому принадлежит страница, например, я хочу установить заголовок для страницы userCenter/index, Его нужно добавить в userCenter/main.js

export default {
  config: {
    navigationBarTitleText: '个人中心',
  }
}

УведомлениеОтличие от приведенной выше глобальной конфигурации заключается в том, что содержимое конфигурации navigationBarTitleText является атрибутом config. В глобальной конфигурации это свойство config.window.

Семь, именование компонентов, однажды я написал частичный компонент, почему он называется частичным компонентом, потому что я использую его только на определенной странице, Поэтому для простоты я дал этому компоненту имяlist.vue, а затем сослаться на него в родительском компоненте:

<template>
<!-- 省略其他代码 -->
    <list />
</template>
<script>
  import list from './components/list'
  export default {
    components: {list},
    // 省略其他代码
  }
</script>

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

<template>
<!-- 省略其他代码 -->
    <listA />
</template>
<script>
  import listA from './components/list'
  export default {
    components: {listA},
    // 省略其他代码
  }
</script>

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

8. При первой загрузке компонента содержимое в onShow не может быть выполнено, оно будет отображаться только после того, как его скроют и отобразят, но страница будет отображаться каждый раз при входе. Например, у нас есть следующий код в компоненте

onLoad () {
  console.log('onLoad')
},
onShow () {
  console.log('onShow')
},
mounted () {
  console.log('mounted')
},

Когда страница загружается, мы ожидаем напечатать

onLoad
onShow
mounted

Тогда на самом деле, просто распечатайте

onLoad
mounted

Я поднял этот вопрос с официальнымIssue, но пока не получил ответа

Сказав это, давайте взглянем на метод перехода страниц апплета.Когда апплет переходит с одной страницы (вызов wx.navigateTo) на другую страницу, Он не уничтожит исходную страницу, а перейдет в фоновый режим и выполнит код в onHide на исходной странице, Вот почему путь к странице апплета может состоять только из десяти слоев, потому что страницы, которые вы посетили, обычно хранятся в памяти, что эквивалентно поддержанию активности в Vue. Если вам разрешено переходить на большое количество страниц, это может привести к чрезмерному использованию памяти.

Конечно, мы также можем использовать wx.navigateBack wx.redirectTo wx.reLaunch для уничтожения страницы, эти три метода вызовут функцию onUnload страницы

9. Холст, помещенный в режим прокрутки, не будет прокручиваться вместе со страницей, он вроде бы зафиксирован в определенном положении, но в обычном виде может нормально прокручиваться. Эта проблема на самом деле является проблемой WeChat, и официальные документы объясняют это, но когда я столкнулся с проблемой, я не ожидал, что это проблема официального WeChat, различных Baidu и Google, Я не нашел ничего, связанного с этой проблемой, я даже подозревал, что это проблема с моим собственным кодом, поэтому я создал новый проект, а затем напрямую протестировал официальный пример кода, который дал тот же эффект. Я собираюсь сдаться позже, подумав о других решениях, но я не ожидал, что сегодня в официальном документе -scroll-view组件нижняя часть введениямелкий шрифтвидел в

совет: не используйте компоненты textarea, map, canvas, video в режиме прокрутки

посмотрел дальшеcanvas组件, обнаружил, что есть похожие подсказки

совет: не используйте компонент холста в режимах прокрутки, прокрутки, выбора, подвижного режима.

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

10. На один и тот же подкомпонент ссылаются в 2 разных местах, что приведет к тому, что стили из 2 мест не будут загружены, но если на него есть ссылка только в одном месте, проблем нет. Зачем доводить этот вопрос до конца? Поскольку эта проблема есть только у первых нескольких версий строительных лесов, у последних этой проблемы быть не должно. Я также упомянул об этой проблеме официальному лицу, и официальный ответ состоял в том, чтобы перегенерировать проект с новой версией строительных лесов, но проект почти завершен. В это время я регенерировал и скопировал код.Я чувствовал себя слишком усталым, поэтому я придерживался позиции не бросать и не сдаваться, и, наконец, нашел причину.Это было из-за каркаса более ранней версии. Плагин webpack-mpvue-asset-plugin отсутствует, и этот плагин будет автоматически добавлен в новую версию cli. посмотреть подробноIssue #180

Есть также некоторые проблемы, четко указанные официальным лицом, которые здесь не перечислены.Заинтересованная детская обувь может проверить непосредственноофициальная документация mpvue

Кроме того, я недавно делаю базовый урок по mpvue.Если вас интересует детская обувь, пожалуйста, перейдите на мойgithub mpvue-tutorials, Одна из ваших звезд — моя самая большая мотивация.

Категории