vue wechat title

efeito

Para aplicativos de página única Vuejs, o título no webview de alguns APPs no sistema iOS não pode ser modificado através de document.title = xxx. Este plug-in foi criado apenas para resolver este problema (compatível com Android).

APLICATIVO testado

• WeChat
• QQ
• Alipay
• Taobao

Efeito (use qualquer APP da lista acima para escanear o código e abrir a experiência)

Os métodos de uso de diferentes versões são semelhantes, mas o efeito é o mesmo. A demonstração foi escrita por Vuejs1.x.

Abra diretamente: 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

Demonstração do Vuejs 1.x

Demonstração do Vuejs 2.x

ES6

principal.js

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

Definição de rota (interceptar apenas parte dela)

 // ...
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 recomenda usá-lo globalmente apenas uma vez. O título da diretiva pode ser definido em vuex ou roteador. Não use-o várias vezes!

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

Personalize o endereço da imagem carregada. O padrão é um endereço de imagem base64 vazio. Pode ser relativo ou absoluto. Observe que deve ser passado se você quiser usá-lo no aplicativo Alipay. /favicon.ico

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

Bem-vindo ao enviar PR