Implementación del almacenamiento en caché de páginas vue y comparación de algunos efectos con los nativos.

Prefacio

Como desarrollador móvil, creo que todo el mundo tiene más o menos experiencia con aplicaciones desarrolladas con HTML y aplicaciones desarrolladas con API nativas. Tienen sus propias ventajas y desventajas. Hoy nos referiremos al efecto de la aplicación nativa e implementaremos una aplicación con efectos nativos similares utilizando el marco vue.js.

Descripción del Proyecto

Implementación de proceso de devolución en línea para miembros de Lianhua. Puntos de función principales: selección de tienda, posicionamiento, carga de imágenes y consultas postventa. Plan de implementación: vue.js

Vista previa del efecto

Dificultades encontradas durante el proyecto y soluciones.

1. El salto de inserción de página nativa es una animación que ingresa de derecha a izquierda, y la operación pop es una animación que desaparece de izquierda a derecha. A continuación se explica cómo utilizar el enrutador y la transición de vue para lograr este efecto.

• Todas las páginas se administran a través de vue-router y se agrega una animación a router-view.

<transition :name="transitionName">
      <keep-alive>
        <router-view  class="Router"></router-view>
      </keep-alive>
</transition>

• ¿Cómo saber si la página actual es una operación push o una operación pop? Escuche el evento popstate del navegador. Marque si la página actual es una operación pop escuchando el evento popstate en el archivo de entrada. Si es una operación pop, agregue un atributo isBack a la ruta actual.

window.addEventListener('popstate', function (e) {
  router.isBack = true
}, false)

• Escuche el atributo isBack de la ruta y configure la animación push o la animación pop para la página actual. En este punto, se ha logrado este efecto de animación.

watch: {
   $route(to, from) {
        // 切换动画
        let isBack = this.$router.isBack
        if (isBack) {
          this.transitionName = 'slide-left'
        } else {
          this.transitionName = 'slide-right'
        }
        this.$router.isBack = false
   }
}

2. Problemas de destrucción y almacenamiento en caché de páginas:
la operación push de la aplicación nativa almacenará en caché la página cargada y la operación pop destruirá la página. Los saltos H5 se administran mediante vue-router. Si no se realiza ningún procesamiento de caché especial en la página, la página h5 destruirá la página actual y volverá a crear una nueva página al presionar. Esta experiencia obviamente no es tan buena como la experiencia nativa. Introduzcamos cómo Utilice el mecanismo de almacenamiento en caché de páginas de Vue para lograr este efecto nativo.

• keep-alive es un componente abstracto proporcionado por Vue, que se utiliza para almacenar en caché los componentes para ahorrar rendimiento. Tiene dos atributos de uso común: incluir y excluir atributos. El atributo de inclusión indica que solo se almacenarán en caché los componentes cuyo atributo de nombre sea xxx (tenga en cuenta que es el nombre del componente, no el nombre de la ruta). El atributo de exclusión indica que, excepto los componentes cuyo atributo de nombre es xxx, todos los demás componentes se almacenarán en caché. Aquí usamos el atributo de inclusión para almacenar en caché la página para la operación de inserción.

1) Paso uno: se debe configurar el atributo de nombre de la página.

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Main',
      component: Main,
      meta: {
      }
    }
  ]
})

2) Paso 2: Supervise la propiedad router.isBack en el archivo de entrada main.js para determinar si es push o pop. Si es push, almacene el nombre de la página en una matriz. Si no, elimine la página del matriz Al mismo tiempo, almacenamos esta matriz a través de vuex. Las páginas almacenadas en esta matriz son las páginas que necesitamos almacenar en caché.

router.beforeEach((to, from, next) => {
  let isBack = router.isBack
  let arr = store.state.keepAlivePages.slice()
  if (isBack) {
    // 从数组中移除
    let index = arr.indexOf(from.name)
    if (index !== -1) {
      arr.splice(index, 1)
    }
  } else {
    // 加入数组,push操作都要加入缓存数组
    let index = arr.indexOf(from.name)
    if (index === -1) {
      arr.push(from.name)
    }
    let indexTo = arr.indexOf(to.name)
    if (indexTo === -1) {
      arr.push(to.name)
    }
  }
  store.commit('SET_KEEPALIVEPAGES', arr)
  next()
})

3) Finalmente, configure las páginas que necesitamos almacenar en caché en la página principal

 <transition :name="transitionName">
      <keep-alive :include="keepAlivePages">
        <router-view class="Router"></router-view>
      </keep-alive>
</transition>

3. ¿Cómo lograr el efecto de retorno de deslizamiento lateral de la interfaz nativa?

• Al juzgar el deslizamiento del gesto, se puede lograr el efecto de retorno del deslizamiento lateral, pero todavía hay cierta brecha en el efecto en comparación con el deslizamiento lateral nativo. Cabe señalar que la respuesta del gesto en la página principal puede afectar el deslizamiento del Control deslizante, podemos evitar la respuesta del gesto mediante el modificador @ touchmove.stop para no afectar el problema de deslizamiento del Control deslizante.

<template>
  <div id="app" v-on:touchstart="bodyTouchStart" v-on:touchmove="bodyTouchMove" v-on:touchend="bodyTouchEnd">
    <transition :name="transitionName">
      <keep-alive :include="keepAlivePages">
        <router-view class="Router" :style="routerHeightStyle"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

methods: {
      bodyTouchStart(event) {
        this.touchStartPoint = event.targetTouches[0].pageX
        this.touchStartPointY = event.targetTouches[0].pageY
      },
      bodyTouchMove(event) {
        // 实时计算distance
        this.distance = event.targetTouches[0].pageX - this.touchStartPoint
        this.distanceY = event.targetTouches[0].pageY - this.touchStartPointY
      },
      bodyTouchEnd() {
        // 滚动视图可能会导致左滑，所以要判断y方向的距离
        if (this.distance > 100 && Math.abs(this.distanceY) < 50) {
          this.$refs.navigation.clickBack()
        } else {
        }
        this.distance = 0
      }
}

4. ¿Cómo implementar una barra de navegación global? ¿Y funciones como el título de la barra de navegación y la visualización del botón de retorno?

• Al definir el enrutamiento, necesitamos definir algunos campos configurables a través de meta, como si mostrar la barra de navegación, el título de la barra de navegación, si mostrar el botón de retorno, si mostrar la barra de pestañas, etc.

{
    path: '/',
    name: 'Home',
    meta: {
      title: '推荐', // 导航栏标题
      showTabbar: true, // 是否显示Tabbar
      showBack: false
    },
    component: resolve => require(['../views/home.vue'], resolve)
},

• Luego configure la barra de navegación y otras configuraciones en la página principal (generalmente App.vue)

<template>
  <div id="app" v-on:touchstart="bodyTouchStart" v-on:touchmove="bodyTouchMove" v-on:touchend="bodyTouchEnd">
    <!--nav-->
    <navigation
                ref="navigation"
                v-if="!$route.meta.hiddenNav"
                :title="navTitle"
                :showBack="showBack"
                :background="$route.meta.navBackground"
                :showLine="$route.meta.showLine"></navigation>
    <transition :name="transitionName">
      <keep-alive :include="keepAlivePages">
        <router-view  class="Router" :style="routerHeightStyle"></router-view>
      </keep-alive>
    </transition>
    <tabBar v-show="$route.meta.showTabbar"></tabBar>
  </div>
</template>

• Cabe señalar que en la demostración anterior, el título de la barra de navegación es una variable navTitle ¿Por qué se debe obtener el valor a través de la variable? Esto se debe a que existe tal escenario: por ejemplo, al ingresar a la página de detalles del producto, el título de la barra de navegación es el nombre del producto devuelto por el servidor. En este caso, la página se ha renderizado y la configuración del título a través de meta no tiene efecto. Entonces, el plan actual es usar notificaciones para pasar el título y luego asignarlo.

mounted() {
      // 动态改变详情页面的title
      this.bus.$on('changeDetailTitle', (title) => {
        this.$set(this.$route.meta, 'title', title)
        this.navTitle = title
      })
}

Descripción general

El efecto de experiencia de la aplicación nativa es de hecho mejor que el de H5, pero a través de la optimización de varios efectos anteriores, nuestro proyecto H5 ahora puede estar más cerca del efecto de experiencia nativa, especialmente el almacenamiento en caché de la página es de gran importancia.

Finalmente, se adjuntan los renders. Por favor, presten atención al contenido de la página después del pop. ¿Es muy similar a la original...?

24.gif

 

Llévate un regalito y sígueme en Jianshu.

Si no entiende nada, puede seguir mi cuenta pública personal de WeChat para comunicarse. Para obtener más información sobre el front-end y experiencia de aprendizaje, siga la cuenta oficial y también hay tutoriales en vídeo disponibles.

Autor: Darren151666
Enlace: https://www.jianshu.com/p/55cc606c3f9f
Fuente: Jianshu
Los derechos de autor de Jianshu pertenecen al autor. Para cualquier forma de reimpresión, comuníquese con el autor para obtener autorización e indique la fuente.