руководство mpvue "наступить на яму"

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

mpvue — это фреймворк для разработки небольших программ с использованием Vue.js. Фреймворк основан на ядре Vue.js, а общий фреймворк и синтаксис vue согласованы, а общий опыт разработки — хороший. Но чем глубже вы идете, тем больше вы найдете некоторые проблемы.

1. Проблемы, вызванные многократным открытием одной и той же страницы

Во-первых, есть такой спрос, со стороны主页 -> 我的关注 -> 别人的主页,主页Этот модуль открывается дважды

tim 20180906170054
Я погладую грудь, чтобы сказать: нет проблем!
5b7642e297f95b96f760e1ebd1a5fe8

В этом требовании нет ничего плохого, т. е. когда мы начинаем с别人的主页 -> 我的关注 -> 主页, моя информация стала информацией человека, которого я только что открыл, этой ТМ...

c1c9222bc38d90488d68e69edd57ed5

Не паникуйте, некоторые вещи нужно "нащупать"

4413457d05dbb078781964138ddc0f3

Когда mpvue маршрутизирует страницу A -> страницу A -> назад, данные фактически разделяют объект. Я не знаю, почему mpvue спроектирован таким образом. Перед официальным решением этой проблемы здесь цитируется решение @maimake.

Сначала создайте файл взлома /src/util/Hack.js

const pageDatas = {}

export default {
  install(_Vue) {
    // 添加全局方法或属性
    _Vue.prototype.$isPage = function isPage() {
      return this.$mp && this.$mp.mpType === 'page'
    }
    
    _Vue.prototype.$pageId = function pageId() {
      let pid = null
      try {
        pid = this.$isPage() ? this.$mp.page.__wxWebviewId__ : null
      } catch (e) { }
      return pid
    }
    
    // 注入组件
    _Vue.mixin({
      
      methods: {
        stashPageData() {
          return { data: { ...this.$data } }
        },
        restorePageData(oldData) {
          Object.assign(this.$data, oldData.data)
        },
      },
      
      onLoad() {
        if (this.$isPage()) {
          // 新进入页面
          Object.assign(this.$data, this.$options.data())
        }
      },
      
      onUnload() {
        if (this.$isPage()) {
          // 退出页面，删除数据
          delete pageDatas[this.$pageId()]
          this.$needReloadPageData = true
        }
      },
      
      onHide() {
        if (this.$isPage()) {
          // 将要隐藏时，备份数据
          pageDatas[this.$pageId()] = this.stashPageData()
        }
      },
      
      onShow() {
        if (this.$isPage()) {
          // 如果是后退回来的，拿出历史数据来设置data
          if (this.$needReloadPageData) {
            const oldData = pageDatas[this.$pageId()]
            if (oldData) {
              this.restorePageData(oldData)
            }
            this.$needReloadPageData = false
          }
        }
      },
      
    })
  },
}

Представлено в main.js /src/main.js

import Vue from 'vue'
import App from './App'
import Hack from './utils/Hack'


Vue.config.productionTip = false
App.mpType = 'app'
Vue.use(Hack)

const app = new Vue(App)
app.$mount()

После проверки оказалось, что все в порядке, но это лишь временное решение.

2. scroll-viewНекоторые проблемы с компонентами

На самом деле, я не рекомендую использовать этот компонент, и это не проблема с mpvue, но сам этот компонент не очень прост в использовании.

  • Проблема в том, что событие не может быть запущено При использовании некоторых из следующих событий в mpvue он не будет запускаться
  • bindscrolltolower
  • bindscrolltoupper
  • bindscroll

Решение угадайте какое? просто поставьbindудали, хахаха

  • scrolltolower
  • scrolltoupper
  • scroll

Однако, когдаscroll-viewна 100% высотеbindscrolltolowerПовторно он не выполняется.Решение состоит в том, чтобы добавить некоторые ограничения на внешний родительский элемент.

<div class="cat-scroll">
    <scroll-view style="height: 100%; width: 100%">
    </<scroll-view>
</div>

.cat-scroll {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow: hidden;
}

Это решает проблему, но после закрытия экрана возникает конфликт с обновлением раскрывающегося списка апплета, в результате чего обновление раскрывающегося списка не выполняется. ВТФ

c1c9222bc38d90488d68e69edd57ed5

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

export default {
    onPullDownRefresh(){
        //  下拉刷新
    },
    onReachBottom(){
        // 上拉加载更多
    }
}

3. Проблема вложенных подшаблонов слотов

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

Эта статья одновременно публикуется на githubGitHub.com/Jon-mill en T…

Категории