vue wechat title

Wirkung

Bei Vuejs-Einzelseitenanwendungen kann der Titel in der Webansicht einiger APPs unter dem iOS-System nicht über document.title = xxx geändert werden. Dieses Plug-In wurde nur zur Lösung dieses Problems erstellt (kompatibel mit Android).

Getestete APP

• WeChat
• QQ
• Alipay
• Taobao

Wirkung (bitte verwenden Sie eine beliebige APP in der obigen Liste, um den Code zu scannen und das Erlebnis zu öffnen.)

Die Verwendungsmethoden verschiedener Versionen sind ähnlich, aber der Effekt ist der gleiche. Die Demo wurde von Vuejs1.x geschrieben

Direkt öffnen: http://vue-wechat-title.deboy.cn/

Installieren

Vuejs 1.x

npm install [email protected] --save

Vuejs 2.x

npm install vue-wechat-title --save

Verwendung

Vuejs 1.x-Demo

Vuejs 2.x-Demo

ES6

main.js

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

Routendefinition (nur einen Teil davon abfangen)

 // ...
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 empfiehlt, es global nur einmal zu verwenden. Der Direktiventitel kann in vuex oder im Router definiert werden.

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

Die benutzerdefinierte geladene Bildadresse ist standardmäßig eine leere Base64-Bildadresse, die relativ oder absolut sein kann. Beachten Sie, dass sie übergeben werden muss, wenn sie in der Alipay-App verwendet wird. Es wird empfohlen, die Favicon-Adresse zu übergeben, z. B.: /favicon.ico

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

Willkommen, um PR einzureichen