Vue專案配置微信分享

2022-03-08 10:27:23 字數 2049 閱讀 2141

// index.html

<

script

src=""

>

script

>

二、封裝wxshare.js

//

assets => js => 新建 wxshare.js

export function

wxshare (={})

} wx.ready(() => )

wx.error(res =>)

}

//

created(),

methods: )}}

四、使用使用一:配置統一的分享內容

//

main.js

import from './assets/js/wxshare';

//為vue的原型物件新增該方法,則所有vue例項都能繼承該方法

vue.prototype.$wxshare = wxshare

//

//配置全域性的分享

created(),

methods: )

this

.$wxshare();}}

使用二: 每個模組都有固定的配置內容(在路由中配置固定的分享內容)

//

//配置全域性的分享

created(),

methods: )}}

//

router/index.js

import from '@/assets/wxshare';

//商品詳情

},router.aftereach(route

=>)

})

使用三:頁面中單獨修改分享內容 (如非同步資料修改分享內容)

// 特定配置的頁面

//在vue例項的created鉤子中

created()

})},// 或者 非同步載入資料

created())

})},

【實現】實現某乙個頁面配置單獨的分享內容,其他頁面內容一致

//

wxshare.js

export function wxshare ( ={})

}wx.ready(() => )

wx.error(res =>)

}

//

//配置全域性的分享

created(),

methods: )

this

.$wxshare();}}

詳情頁單獨配置

//

detail.vue

created() ).then(

res =>);}}

);},

執行效果:首頁分享

詳情頁分享

【注意】需要注意的是從詳情頁返回至首頁再次分享,配置的分享標題、、鏈結仍然為詳情頁的內容

【處理】 在詳情頁銷毀之前將配置的內容重置

vue 微信分享

4 處理過程 1 在index.html中載入jssdk 注意 所有需要使用js sdk的頁面必須先注入配置資訊,否則將無法呼叫 wx.config wx.error function res wx.ready function 5.例子 1 share.js let getshareconfig ...

vue中微信分享

一 分享js 呼叫方法時傳進來的引數 let info const wxshare function info wx.ready function cancel function title title,分享標題 desc desc,描述 link link,分享鏈結 imgurl imgurl,分...

vue專案history模式下微信分享相關問題

import wx from utils wx import from api export function requireconfig then res 驗證分享 export function requireshare title,desc,link,imgurl wx.ready funct...