vue wechat title

effect

For Vuejs single-page applications, the title in the webview of some APPs under the iOS system cannot be modified through document.title = xxx. This plug-in is only created to solve this problem (compatible with Android)

Tested APP

• WeChat
• QQ
• Alipay
• Taobao

Effect (please use any APP in the above list to scan the code to open the experience)

The usage methods of different versions are similar but the effect is the same. The demo is written by Vuejs1.x

Open directly: http://vue-wechat-title.deboy.cn/

Install

Vuejs 1.x

npm install [email protected] --save

Vuejs 2.x

npm install vue-wechat-title --save

usage

Vuejs 1.x demo

Vuejs 2.x demo

ES6

main.js

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

Route definition (only intercept part of it)

 // ...
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 recommends using it globally only once. The directive title can be defined in vuex or router. Do not use it multiple times!!

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

Customize the loaded image address. The default is an empty base64 image address. It can be relative or absolute. Note that it must be passed if you want to use it in the Alipay App. It is recommended to pass the favicon address such as: /favicon.ico

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

Welcome to submit PR