簡單粗暴教你在VUE中引入微信SDK 調用微信分享、朋友圈分享、QQ分享......


寫在前面:
剛做了一個微信端的網頁,用到了微信分享,在網上看了好多的資料,發現好多文檔都寫得雲里霧里,讓人看的頭疼。通過對很多大佬文章的綜合整理,才完成了微信分享的部分。所以我想着自己寫一篇文章,能讓看到我這篇文章的親們能夠清楚的明白在vue上怎么使用微信分享SDK,能夠按照我寫的步驟簡單粗暴的實現
備注:本人還是個菜鳥,剛剛接觸vue 文章中有錯誤或者大家對我有建議,隨意的提出來,我好改正,謝謝大家!

1.安裝sdk

npm install weixin-js-sdk --save

2. 在main.js入口文件中引入微信sdk

import wx from 'weixin-js-sdk'

3.在main.js的生命周期函數(created()或mounted())中引入微信sdk配置代碼那就是全局的,也可以在你想要分享的.vue組件中引入微信sdk配置代碼這樣微信分享只在這個組件有效
4.通過config接口注入權限驗證配置(一般后台會提供接口,獲取接口后對應上就好,這個權限驗證也可以放到一個公用js中這樣不同的組件都可以復用這個配置)

wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。
appId: '', // 必填,公眾號的唯一標識
timestamp: , // 必填,生成簽名的時間戳
nonceStr: '', // 必填,生成簽名的隨機串
signature: '',// 必填,簽名
jsApiList: [] // 必填,需要使用的JS接口列表
});

5.通過ready接口處理成功驗證(如果每個組件要應用不同的分享內容那么這個ready接口就在不同組件的生命周期函數中配置就好)

wx.ready(function () { //需在用戶可能點擊分享按鈕前就先調用
// 自定義“分享給朋友”及“分享到QQ”按鈕的分享內容(1.4.0)最新接口
wx.updateAppMessageShareData({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '', // 分享圖標
success: function () {
// 設置成功
}
// 自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內容(1.4.0)最新接口
wx.updateTimelineShareData({
title: '', // 分享標題
link: '', // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '', // 分享圖標
success: function () {
// 設置成功
}
});


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM