Резюме использования mpvue для разработки апплета github

внешний интерфейс GitHub Апплет WeChat mpvue

предисловие

Я немного бездельничал в последнее время, я вспомнил многолетнее вниманиеmpvueЯ написал небольшую программу, поэтому написал ее спустя чуть больше полумесяца.githubзапущена версия апплета WeChat. Теперь резюмируем встречающиеся ямы.

опыт сканирования кода,

image

адрес проекта, GitHub.com/сыр сонный/я…

image

Мина яма

высота прокрутки

Прокручиваемая область просмотра.

При использовании вертикальной прокрутки вам нужно дать<scroll-view/>Фиксированная высота, высота устанавливается через WXSS.

предоставлено апплетомscroll-viewКомпонент, если вы хотите, чтобы он прокручивался, вы должны предоставить ему фиксированную высоту.

Наше общее требование состоит в том, что предыдущая область фиксирована, а следующая область может быть прокручена Мое решение состоит в том, чтобы получить видимую высоту модели, вычесть высоту предыдущей фиксированной области и назначить ее динамически.scroll-viewОкончательная высота.

// 以 search 页为例
// 滚动区域高度 = 总高度 - 搜索框高度 - tabs 高度
onLoad () {
  wx.getSystemInfo({
    success: (res) => {
      this.height = res.windowHeight // 获取机型可视高度
    }
  })

  let query = wx.createSelectorQuery()
  // 选择id
  query.select('#search').boundingClientRect()

  query.exec(res => {
    let searchH = res[0].height // 获取search框高度
    this.height = this.height - searchH - this.tabsH
  })
}

Яма:wx.createSelectorQuery()не могу понятьdisplay: noneвысота элемента.

Мое решение: вtrendingстраница, чтобы получитьtabsвысоту компонента, а затем сохраните его вvuexв, дайsearchиспользование страницы

Жизненный цикл (одна и та же страница имеет разные параметры)

жизненный цикл апплета

Когда мы заходим на страницу ② со страницы ①, мы обычноonLoadполучить исходные данные,

При возврате со страницы 2 на страницу, если две страницы разные страницы, например① — страница/информация,

② это страница/репозиторий, все в порядке, ① страницаunOnLoad, ② стр.onShow.

Но если① это страница/информация?user=a,② это страница/информация?user=b, затем gg, вернуться со страницы ② на страницу ①, данные страницы ① станут данными страницы ②

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

Но многие из моих потребностей похожи на① это страница/информация?user=aприбыть② это страница/информация?user=b, так кривую спасать страну придумалиvuexПоддерживайте стек маршрутизации со связанными страницами требований.

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

 onLoad () {
    this.reset()
    const options = getQuery()
    user = options.login
    // vuex
    this.reposStack.push(options)

    this.getRepos()
  },
  onShow () {
    const options = getQuery()
    // vuex
    let reposStack = JSON.parse(JSON.stringify(this.reposStack))
    let len = reposStack.length
    let endStack = reposStack[len - 1]
    if (JSON.stringify(endStack) === JSON.stringify(options)) {
      return
    }
    this.reset()
    user = options.login
    this.getRepos()
  },
  onUnload () {
    // vuex
    this.reposStack.slice(0, -1)
  }

Mpvue Pit.

параметр запроса

mpvueв состоянии пройтиthis.$root.$mp.queryПолучить параметры пути внутри компонентов на всех страницах.

Если сminaС точки зрения слов, мы прошли в жизненном циклеonLoad(options), получатьoptionsПараметры пути, передаваемые вmpvueпри условииthis.$root.$mp.query, которые мы можем использовать на всех жизненных циклах.

Но мы знаем, что когда мы возвращаемся с текущей страницы на предыдущую, предыдущая страница не выполняется.onLoad(),

Предполагая, что текущая страница и предыдущая страница совпадаютpage, но если параметры другие, вернуться на предыдущую страницу в это время,

Предыдущая страницаthis.$root.$mp.queryНе превратится в себяqueryон все еще будет стать текущей страницейquery

Пример: ①страница/информация?a=1 => ②страница/информация?b=2

Когда я вернусь из ② в ①, ①this.$root.$mp.queryстанет{b:2}

наверноеmpvueизthis.$root.$mp.queryчерезonLoad(options)получатьoptions, и назначьте его снова. Но он не будет выполнен, когда страница апплета будет возвращенаonLoad

Чтобы избежать проблем, я использовал API апплета напрямую.getCurrentPages(), получить параметры последнего маршрута в стеке маршрутизации

getCurrentPages()Функция используется для получения экземпляра текущего стека страниц, который задается в порядке стека в виде массива, первый элемент — домашняя страница, а последний элемент — текущая страница.

/**
 * 获取当前路径参数
 * 不用mpvue提供的this.$root.$mp.query
 * 因为其进入同一页面，参数不会变化
*/
export function getQuery () {
  /* 获取当前路由栈数组 */
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options

  return options
}

постскриптум

Первые несколько вопросов - мое первое использованиеmpvueСамая большая яма встречается при разработке небольших программ. (Давно ничего не писал, и почерк ужасный.) Но пользуюсьmpvueРазрабатывать небольшие программы, можно разбивать на компоненты, поддерживатьnpm, гораздо удобнее, чем нативная разработка. Опыт еще хороший. Небольшие программы сейчас очень популярны. Это похоже на фронт-энд, чтобы играть. Введите адрес проекта еще раз, и заинтересованные друзья смогут сослаться на него.GitHub.com/сыр сонный/я…

Категории