vue wechat title

効果

Vuejs のシングルページ アプリケーションの場合、iOS システムで一部の APP の Web ビューのタイトルを document.title = xxx で変更することはできません。このプラグインは、この問題を解決するためにのみ作成されています (Android と互換性があります)。

テスト済みのアプリ

• 微信
• QQ
• アリペイ
• タオバオ

効果 (上記のリストにあるいずれかのアプリを使用してコードをスキャンし、エクスペリエンスを開きます)

異なるバージョンの使用方法は似ていますが、効果は同じです。デモは Vuejs1.x で作成されています。

直接開く: http://vue-wechat-title.deboy.cn/

インストール

Vuejs 1.x

npm install [email protected] --save

Vuejs 2.x

npm install vue-wechat-title --save

使用法

Vuejs 1.x デモ

Vuejs 2.x デモ

ES6

メイン.js

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

ルート定義（一部のみインターセプト）

 // ...
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 では、ディレクティブのタイトルをグローバルに 1 回だけ使用することをお勧めします。vuex またはルーターで定義できます。複数回使用しないでください。

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

カスタムでロードされた画像アドレスは、デフォルトで空の Base64 画像アドレスになります。これは、Alipay アプリで使用する場合は渡す必要があることに注意してください。/favicon.ico などのファビコン アドレスを渡すことをお勧めします。

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

PR の送信を歓迎します