微信分享 JSSDK的使用

2022-05-24 23:45:14 字數 2985 閱讀 5527

假如下面是我們請求介面的資料:

1

12 }

一切準備就緒之後,我們來根據不同頁面的使用方式一一分解:

先說引入的問題:

// 首先,在index.html頁面先引入jssdk檔案

156//

當然,你也可以用最簡單的方式引入789

//我個人比較喜歡第一種。

下面就開始使用了,先來乙個**初級版本的方式:

// 方式一,所有**直接寫在頁面裡面上,分享出去後,使用者直接點選分享的鏈結就回到當前這個頁,不需要拼接link,有動態引數

1

//獲取jssdk需要的資料

2 let jssdk =data.jssdk;3//

配置功能

4wx.config();

15wx.ready(function () ,

24cancel: function ()

27});

2829 title: "我們的戰場我們的團,快來為" + self.headerdata.class + "王者榮譽而戰!", //

分享標題

30 desc: "哥們兒,咱很沒一起排位了,hey兄弟們!咱該怒砍一血了!",

31 link: location.href, //

分享鏈結

32 imgurl: "", //

分享圖示

33success: function () ,

36cancel: function ()

39});

40});

41//

self.headerdata.class 為需要動態傳入的引數,獲取資料的時候直接取出來就行。

// 方式二,所有**直接寫在頁面裡面上,需要拼接link,一般放在首頁或對外分享的主頁面,沒有動態引數

1

//獲取jssdk需要的資料

2 let jssdk =data.jssdk;3//

配置功能

4wx.config();

15 var hostname = '';

16 var pathname = 'fe-sport/#/home';

17wx.ready(function() ,

26cancel: function()

29});

3031

32 title: "王者榮耀正在招團長,快來一戰成名!", //

分享標題

33 desc: "hey,兄弟,好久不見!11月7日,王者戰場見。",

34 link: process.env.node_env === 'development' ? hostname + 'dev/' + pathname : hostname + pathname, //

分享鏈結

35 imgurl: "", //

分享圖示

36success: function() ,

39cancel: function()

42});

43 });

// 方式三,將分享的**單獨剝離出來成乙個js檔案,然後在需要的地方引入這個js檔案。(推薦)

// utils.js檔案中有如下**

1

const sharejs =function(jssdk, options) );

13 var defaults =, //

分享成功觸發

19 cancel: function() {} //

分享取消觸發,需要時可以呼叫20}

21 options =object.assign({}, defaults, options);

22wx.ready(function() ,

32cancel: function()

35});

3637 title: thatopts.title, //

分享標題

38 desc: thatopts.desc, //

分享描述

39 link: thatopts.link, //

分享鏈結

40 imgurl: thatopts.imgurl, //

分享圖示

41success: function() ,

44cancel: function()

47});

48});49}

5051

52 module.exports =;

// 在home.vue頁面中使用

1

1 let tolink =location.href;

2 let titledetail = "我們的戰場我們的團,快來為" + self.headerdata.class + "王者榮譽而戰!";

3 let destdetail = "哥們兒,咱很久沒一起排位了,hey兄弟們!咱該怒砍一血了!";4//

根據不同的情況來修改分享後顯示的文案。

5if(frompath.substr(-1) == "/")

1011 let myjssdk =jssdk;

12 let optiondata =;

18 sharejs(myjssdk, optiondata);

有了上面的這些**之後,下一次再遇到這類需求時,我就更得心應手了。

jssdk分享設定 微信分享 JSSDK的使用

分享功能的 一般會放在beforecreate或mounted鉤子中,如下 then else 分享成功觸發 cancel function 分享取消觸發,需要時可以呼叫 options object.assign defaults,options wx.ready function from ut...

微信jssdk分享筆記

注 由於jssdk授權介面的呼叫可能會影響本地介面的正常呼叫,如果頁面剛剛載入成功的時候需要向服務端請求其他資料介面,一定要讓資料介面呼叫完成後再呼叫拿jssdk授權配置資訊的介面。a 原生html頁面中使用script標籤引入以下檔案 b vue專案 安裝 npm install weixin j...

微信jssdk實現分享到微信

可以看到我的賬號是訂閱號而且是未認證的 因為我專案中用的賬號是公司的號,我現在只是以我自己的號 簡單說一下。你自己需要的賬號是已經認證的 據說要花300元,好貴。然後看一下左邊選單的介面許可權裡面的分享介面是否已經授權了 同樣的我的是未獲得的 因為我是以我的為例子的 我實際上用的是公司的號不是我自己...