vue wechat title

efecto

Para las aplicaciones de una sola página de Vuejs, el título en la vista web de algunas aplicaciones en el sistema iOS no se puede modificar a través de document.title = xxx. Este complemento solo se creó para resolver este problema (compatible con Android).

APLICACIÓN probada

• WeChat
• QQ
• alipay
• taobao

Efecto (utilice cualquier aplicación de la lista anterior para escanear el código y abrir la experiencia)

Los métodos de uso de diferentes versiones son similares pero el efecto es el mismo. La demostración está escrita por Vuejs1.x.

Abra directamente: http://vue-wechat-title.deboy.cn/

Instalar

Vuejs 1.x

npm install [email protected] --save

Vuejs 2.x

npm install vue-wechat-title --save

uso

Demostración de Vuejs 1.x

Demostración de Vuejs 2.x

ES6

principal.js

 Vue . use ( require ( 'vue-wechat-title' ) )

Definición de ruta (solo intercepta parte de ella)

 // ...
const routes = [
  {
    name : 'Home' ,
    path : '/home' ,
    meta : {
      title : '首页'
    } ,
    component : require ( '../views/Home.vue' )
  } ,
  {
    name : 'Order' ,
    path : '/order' ,
    meta : {
      title : '订单'
    } ,
    component : require ( '../views/Order.vue' )
  } ,
  {
    name : 'UCenter' ,
    path : '/ucenter' ,
    meta : {
      title : '用户中心'
    } ,
    component : require ( '../views/UCenter.vue' )
  }
]
// ...

App.vue recomienda usarlo globalmente solo una vez. El título de la directiva se puede definir en vuex o enrutador. ¡No lo use varias veces!

 <!-- 任意元素中加 v-wechat-title 指令 建议将标题放在 route 对应meta对象的定义中 -->
< div v-wechat-title =" $route.meta.title " > </ div >
<!--or-->
< router-view v-wechat-title =" $route.meta.title " > </ router-view >

La dirección de imagen cargada personalizada de forma predeterminada es una dirección de imagen base64 vacía, que puede ser relativa o absoluta. Tenga en cuenta que debe pasarse si se utiliza en la aplicación Alipay. Se recomienda pasar la dirección de favicon como: /favicon.ico.

 < div v-wechat-title =" $route.meta.title " img-set =" /static/logo.png " > </ div >

Bienvenido a enviar PR