vue wechat title

ผล

สำหรับแอปพลิเคชันหน้าเดียวของ Vuejs ชื่อใน webview ของบางแอปภายใต้ระบบ iOS ไม่สามารถแก้ไขได้ผ่าน document.title = xxx

แอปที่ทดสอบแล้ว

• วีแชท
• คิวคิว
• อาลีเพย์
• เถาเป่า

เอฟเฟกต์ (โปรดใช้แอปใด ๆ ในรายการด้านบนเพื่อสแกนโค้ดเพื่อเปิดประสบการณ์)

วิธีการใช้งานของเวอร์ชันต่างๆ จะคล้ายกัน แต่เอฟเฟกต์จะเหมือนกัน การสาธิตนี้เขียนโดย Vuejs1.x

เปิดโดยตรง: http://vue-wechat-title.deboy.cn/

ติดตั้ง

วูจส์ 1.x

npm install [email protected] --save

วูจส์ 2.x

npm install vue-wechat-title --save

การใช้งาน

การสาธิต Vuejs 1.x

การสาธิต Vuejs 2.x

อีเอส6

main.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 แนะนำให้ใช้ทั่วโลกเพียงครั้งเดียวเท่านั้น สามารถกำหนดชื่อคำสั่งใน 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 เช่น: /favicon.ico

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

ยินดีส่ง PR