微信分享給朋友及朋友圈js代碼,怎麼編寫微信朋友圈可以分享

本文目錄一覽：

• 1、微信朋友圈JSSDK分享自定義圖片文字
• 2、為什麼修改標題分享微信還是不變，微信分享到朋友圈，朋友JS代碼
• 3、請教如何觸發 js微信分享接口 點擊按鈕，觸發微信分享到朋友圈。
• 4、如何在網頁中通過js代碼將內容分享到朋友圈
• 5、js處理微信分享配置

微信朋友圈JSSDK分享自定義圖片文字

1、在微信公眾號添加安全域名（製作的H5頁面的主域名）；

測試階段，本人是通過修改hosts文件，將對應域名解析為127.0.0.1 ； 然後將電腦和手機連接至同個局域網下。修改手機代理為電腦在局域網內的IP地址；這樣手機就能正常進行測試；

2、引入jssdk   script    src=”

3、配置jssdk，成功後方可使用相關功能，方式如下

wx.config({

debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。

appId: ‘XX’, // 必填，公眾號的唯一標識

timestamp: XX, // 必填，生成簽名的時間戳

nonceStr: xx, // 必填，生成簽名的隨機串

signature: xx, // 必填，簽名，見附錄1  

jsApiList: [‘onMenuShareTimeline’,’onMenuShareAppMessage’] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2

});

第一次接觸時看到網上的文章在此對signature沒有過多的說明，這裡我自己大概說一下，此參數是通過獲取公眾號的id及secret獲取 access _token,然後通過 access _token獲取jsapi_ticket，然後通過時間戳，隨機串，當前頁面url，通過sha1加密生成；（這裡做下說明，此步驟由後台處理後返回給前端即可）；

剛接觸的時候領導認為純前端可實現，這。。。確實可以實現，這裡就不做過多說明了；至於要後端處理的原因大致為兩點1、公眾號id和secret在前端實現不安全  2、 access _token和jsapi_ticket每日有請求次數的限制，過期時間兩小時，所以需要後台在服務器緩存，每兩小時獲取一次；

4、wx.config配置正確即可通過wx.ready來調用相應功能

wx.ready(function() {

wx.onMenuShareTimeline({   //分享朋友圈

title: ‘X’, // 分享標題

link: window.location.href, // 分享鏈接

imgUrl: url, // 分享圖標

success: function() {

// 用戶確認分享後執行的回調函數

console.log(‘分享成功了喲喲喲’)

},

cancel: function() {

// 用戶取消分享後執行的回調函數

}

});

wx.onMenuShareAppMessage({  // 好友分享

title: ”, // 分享標題

desc: ”, // 分享描述

link: window.location.href, // 分享鏈接

imgUrl: ”, // 分享圖標

success: function () {

// 用戶確認分享後執行的回調函數

},

cancel: function () {

// 用戶取消分享後執行的回調函數

}

});

});

總結：其實對於前端要處理的很少，只要從後台獲取signature簽名，調用方法即可實現；具體可看官方文檔；首次接觸的小夥伴不要被嚇到，就是如此簡單；

為什麼修改標題分享微信還是不變，微信分享到朋友圈，朋友JS代碼

最近很多群朋友問我，為什麼我修改網頁裏面標題和描述語，但是我分享在微信朋友圈和朋友以後的標題和描述語還是不變呢？其實大家修改的是網頁標題和描述語，沒有真正修改微信分享接口那部分描述語，所以才不會變的。

script

var imgUrl = “圖片地址”;

var lineLink = “網址”;

var descContent = ‘描述語’;

var shareTitle = ‘標題’;

var appid = ”;

function shareFriend() {

WeixinJSBridge.invoke(‘sendAppMessage’,{

“appid”: appid,

“img_url”: imgUrl,

“img_width”: “200”,

“img_height”: “200”,

“link”: lineLink,

“desc”: descContent,

“title”: shareTitle

}, function(res) {

//_report(‘send_msg’, res.err_msg);

})

}

function shareTimeline() {

WeixinJSBridge.invoke(‘shareTimeline’,{

“img_url”: imgUrl,

“img_width”: “200”,

“img_height”: “200”,

“link”: lineLink,

“desc”: descContent,

“title”: shareTitle

}, function(res) {

//_report(‘timeline’, res.err_msg);

});

}

function shareWeibo() {

WeixinJSBridge.invoke(‘shareWeibo’,{

“content”: descContent,

“url”: lineLink,

}, function(res) {

//_report(‘weibo’, res.err_msg);

});

}

// 當微信內置瀏覽器完成內部初始化後會觸發WeixinJSBridgeReady事件。

document.addEventListener(‘WeixinJSBridgeReady’, function onBridgeReady() {

// 發送給好友

WeixinJSBridge.on(‘menu:share:appmessage’, function(argv){

shareFriend();

});

// 分享到朋友圈

WeixinJSBridge.on(‘menu:share:timeline’, function(argv){

shareTimeline();

});

// 分享

WeixinJSBridge.on(‘menu:share:weibo’, function(argv){

shareWeibo();

});

}, false);

/script

請教如何觸發 js微信分享接口 點擊按鈕，觸發微信分享到朋友圈。

前提是你的公眾號已打開onMenuShareTimeline權限

wx.config({

debug: true,

appId: “你的APPID”,

timestamp: “xxx”,

nonceStr: “xxx”,

signature: “xxx”,

jsApiList: [ ‘onMenuShareTimeline’, ] //onMenuShareTimeline你要的方法

});

如何在網頁中通過js代碼將內容分享到朋友圈

登錄你的微信平台，點擊「公眾號設置」。

2

點擊「功能設置」，然後點擊「設置」。

3

設置JS接口安全域名。這裡填寫的是一級域名，不帶www和http。最多可以設置三個域名。設置完後點擊確定。（多說一句，相比以前的分享沒有任何域名限制，這裡設置安全域名，目的是為了當發現此公眾平台發現誘導分享行為時，可以根據此域名追溯到所有分享出去的鏈接，以及通過這些鏈接增加的粉絲。這樣，微信就可以牢牢控制了你的微信平台，一旦發現違規，讓分享鏈接失效，刪除掉誘導行為增加的粉絲，是瞬間就可以完成的。因此，微信平台的開發者，一定要合理來使用分享功能，不要因小失大。等到你的微信平台被封，估計哭都來不及）

4

在開發者中心中獲取你的AppID和AppSecret，接下來在獲取令牌時，需要這兩個信息。

5

獲取令牌。在服務器端完成，代碼如下：

function wx_get_token() {

$token = S(‘access_token’);

if (!$token) {

$res = file_get_contents(‘;appid=’ .’你的AppID’.’secret=’ .’你的AppSecret’);

$res = json_decode($res, true);

$token = $res[‘access_token’];

// 注意：這裡需要將獲取到的token緩存起來（或寫到數據庫中）

// 不能頻繁的訪問，每日有次數限制

// 通過此接口返回的token的有效期目前為2小時。令牌失效後，JS-SDK也就不能用了。

// 因此，這裡將token值緩存1小時，比2小時小。緩存失效後，再從接口獲取新的token，這樣

// 就可以避免token失效。

// S()是ThinkPhp的緩存函數，如果使用的是不ThinkPhp框架，可以使用你的緩存函數，或使用數據庫來保存。

S(‘access_token’, $token, 3600);

}

return $token;

}

注意：返回的access_token長度至少要留夠512位元組。接口返回值：

{“access_token”:”ACCESS_TOKEN”,”expires_in”:7200}

{“access_token”:”vdlThyTfyB0N5eMoi3n_aMFMKPuwkE0MgyGf_0h0fpzL8p_hsdUX8VGxz5oSXuq5dM69lxP9wBwN9Yzg-0kVHY33BykRC0YXZZZ-WdxEic4″,”expires_in”:7200}

6

獲取jsapi的ticket。jsapi_ticket是公眾號用於調用微信JS接口的臨時票據。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。

function wx_get_jsapi_ticket(){

$ticket = “”;

do{

$ticket = S(‘wx_ticket’);

if (!empty($ticket)) {

break;

}

$token = S(‘access_token’);

if (empty($token)){

wx_get_token();

}

$token = S(‘access_token’);

if (empty($token)) {

logErr(“get access token error.”);

break;

}

$url2 = sprintf(“;type=jsapi”,

$token);

$res = file_get_contents($url2);

$res = json_decode($res, true);

$ticket = $res[‘ticket’];

// 注意：這裡需要將獲取到的ticket緩存起來（或寫到數據庫中）

// ticket和token一樣，不能頻繁的訪問接口來獲取，在每次獲取後，我們把它保存起來。

S(‘wx_ticket’, $ticket, 3600);

}while(0);

return $ticket;

}

接口返回值：

{“errcode”:0,”errmsg”:”ok”,”ticket”:”sM4AOVdWfPE4DxkXGEs8VMKv7FMCPm-I98-klC6SO3Q3AwzxqljYWtzTCxIH9hDOXZCo9cgfHI6kwbe_YWtOQg”,”expires_in”:7200}

7

簽名，將jsapi_ticket、noncestr、timestamp、分享的url按字母順序連接起來，進行sha1簽名。

noncestr是你設置的任意字符串。

timestamp為時間戳。

$timestamp = time();

$wxnonceStr = “任意字符串”;

$wxticket = wx_get_jsapi_ticket();

$wxOri = sprintf(“jsapi_ticket=%snoncestr=%s×tamp=%surl=%s”,

$wxticket, $wxnonceStr, $timestamp,

‘要分享的url(從http開始，如果有參數，包含參數）’

);

$wxSha1 = sha1($wxOri);

END

步驟2 添加JS代碼

生成簽名後，就可以使用js代碼了。在你的html中，進行如下設置即可。

script type=”text/javascript” src=””/script

script type=”text/javascript”

// 微信配置

wx.config({

debug: false,

appId: “你的AppID”,

timestamp: ‘上一步生成的時間戳’,

nonceStr: ‘上一步中的字符串’,

signature: ‘上一步生成的簽名’,

jsApiList: [‘onMenuShareTimeline’, ‘onMenuShareAppMessage’] // 功能列表，我們要使用JS-SDK的什麼功能

});

// config信息驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，config是一個客戶端的異步操作，所以如果需要在 頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready 函數中。

wx.ready(function(){

// 獲取「分享到朋友圈」按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareTimeline({

title: ‘分享標題’, // 分享標題

link:”分享的url,以http或https開頭”,

imgUrl: “分享圖標的url,以http或https開頭” // 分享圖標

});

// 獲取「分享給朋友」按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareAppMessage({

title: ‘分享標題’, // 分享標題

desc: “分享描述”, // 分享描述

link:”分享的url,以http或https開頭”,

imgUrl: “分享圖標的url,以http或https開頭”, // 分享圖標

type: ‘link’, // 分享類型,music、video或link，不填默認為link

});

});

/script

js處理微信分享配置

整理一下通過h5做微信分享相關配置。

登錄微信公眾號， 獲取AppID ， 配置白名單 ，然後 配置JS接口安全域名 。

登錄公眾號後，左側菜單欄選擇：開發 = 基本配置，直接複製開發者ID(AppID)即可：

注意使用公網IP

左側菜單欄選擇：設置 = 公眾號設置：

網頁授權主要是獲取微信openId使用，如果只是用分享操作，本步可以略過。

網頁授權介紹

大致步驟是：

在配置完前面AppId、白名單及安全域名後，開始處理網頁授權。

網頁授權這一塊兒內容主要是後端需要處理的內容較多，前端還是很簡單的，僅需要跳入微信鏈接即可。為什麼要走這一步呢因為有些操作，例如微信支付、播放微信錄音、獲取微信地址、微信卡券、商品、小店等等許多功能必須在微信瀏覽器匯總打開操作才可以，因此需要跳入微信瀏覽器及微信鏈接來處理後續操作。當配置後，鏈接便只有在微信瀏覽器中打開才會生效了，不然會提示：

鏈接如下：

{$appId}redirect_uri=={$URL}response_type=codescope=snsapi_base#wechat_redirect

參數分解

可見，上面需要填入的變量有二，一個是前面回去的AppId，另外一個則是url，需要寫的是與配置域名所對應域名下的url，並且要進行urlEncode編碼處理使用。

在拿到上述完整鏈接後，通過 window.location.href = ${url} 進行網頁授權即可。在授權成功後，頁面會重定向到自己設置的url頁面去，然後在該連接上會有code值，取出即可：

將拿到的code值傳給後端即可，看具體需求決定是否前端使用openId，如果非必要則不在前端獲取保存或者由後端加密後傳給前端使用。

大致分為五個步驟：

在步驟 1.3 中已經配置。

在需要調用JS接口的頁面引入如下JS文件：

備註：支持使用 AMD/CMD 標準模塊加載方法加載

配置需要如下幾個參數：

那這些參數從哪兒來呢？依舊不用擔心，依然是交給後端處理，後端返回時間戳、隨機串及簽名，其他的自己配置即可。

通過後端獲取需要進行一個小交互，將此時的鏈接地址(window.location.href)傳給後端即可。

於是就有了上述的除了最後一個以外的所有參數。最後一個 jsApiList 則是寫分享接口，如我們想要分享到朋友圈、QQ、騰訊微博這3個，那就寫：

可以發現，我們其實多配置了一個 checkJsApi ，這個是一個判斷配置，可以判斷當前客戶端版本是否支持指定JS接口。

簽名算法

所有JS接口列表

接下來就可以寫分享信息配置了。配置信息一般都是通過 wx.ready 處理的:

例如我們要分享到朋友圈，配置則如下：

注意：不要出現 誘導分享

同樣，一般都是通過 wx.error 處理失敗相關信息：

其實微信分享（地理位置、掃一掃、卡券等微信各類接口）都是通過上述步驟配置的，可舉一反三，在面對不同需求時通過微信開發文檔來進行更為複雜的操作。