導航:首頁 > 編程語言 > 微信分享到朋友圈js代碼

微信分享到朋友圈js代碼

發布時間:2023-05-01 13:35:06

❶ 為什麼修改標題分享微信還是不變,微信分享到朋友圈,朋友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代碼將內容分享到朋友圈

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

2
點擊「功能設置」,然後點擊「設置」。

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

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

5
獲取令牌。在伺服器端完成,代碼如下:
function wx_get_token() {
$token = S('access_token');
if (!$token) {
$res = file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' .'你的AppID'.'&secret=' .'你的AppSecret');
$res = json_decode($res, true);
$token = $res['access_token'];
// 注意:這里需要將獲取到的token緩存起來(或寫到資料庫中)
// 不能頻繁的訪問https://api.weixin.qq.com/cgi-bin/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_-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("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=%s&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":"-I98-_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=%s&noncestr=%s×tamp=%s&url=%s",
$wxticket, $wxnonceStr, $timestamp,
'要分享的url(從http開始,如果有參數,包含參數)'
);
$wxSha1 = sha1($wxOri);

END
步驟2 添加JS代碼
生成簽名後,就可以使用js代碼了。在你的html中,進行如下設置即可。
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></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、白名單及安全域名後,開始處理網頁授權。
網頁授權這一塊兒內容主要是後端需要處理的內容較多,前端還是很簡單的,僅需要跳入微信鏈接即可。為什麼要走這一步呢因為有些操作,例如微信支付、播放微信錄音、獲取微信地址、微信卡券、商品、小店等等許多功能必須在微信瀏覽器匯總打開操作才可以,因此需要跳入微信瀏覽器及微信鏈接來處理後續操作。當配置後,鏈接便只有在微信瀏覽器中打開才會生效了,不然會提示:

鏈接如下:

https://open.weixin.qq.com/connect/oauth2/authorize?appid={$appId}&redirect_uri=={$URL}&response_type=code&scope=snsapi_base#wechat_redirect

參數分解

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

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

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

大致分為五個步驟:

在步驟 1.3 中已經配置。

在需要調用JS介面的頁面引入如下JS文件: https://res.wx.qq.com/open/js/jweixin-1.6.0.js

備註:支持使用 AMD/CMD 標准模塊載入方法載入

配置需要如下幾個參數:

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

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

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

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

簽名演算法
所有JS介面列表

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

例如我們要分享到朋友圈,配置則如下:

注意:不要出現 誘導分享

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

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

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

一個非常簡單的方法,網路分享代碼組件裡面有個微信分享到朋友圈。如下圖

1網路搜索「網路分享代碼」。

2選擇你需要的代碼模式。一般選擇簡單的模式就可以了,太復雜的用戶體驗不好。

3可以直接復制代碼,或者進行下一步繼續選擇自己喜歡的模式。

4放到文章公共模板中。注意,不要只放在首頁,否則統計數據的時候只能顯示首頁的數據。

5點擊圖標就可以彈出二維碼。

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

1、在微信公眾號添加安全域名(製作的H5頁面的主域名);

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

2、引入jssdk   script    src='http://res.wx.qq.com/open/js/jweixin-1.0.0.js'

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代碼將內容分享到朋友圈

步驟一:綁定域名 先登錄微信公眾平台進入「公眾號設置」的「功能設置」指纖里填寫「JS介面安全域名」。唯尺仿 備註:登錄後可在「開發者中心」查看對應的介面困敗許可權。 步驟二:引入JS文件 在需要調用JS介面的頁面引入如下JS文件,(支持https)

❼ 兩步實現微信小程序分享朋友圈

小程序默認不能分享朋友圈,開發者需主動設置「分享到朋友圈」。頁面允許被分享到朋友圈,需滿足兩個條件:

    首先,頁面需設置允許「發送給朋友」。具體參考 Page.onShareAppMessage 介面文檔

    滿足條件 1 後,頁面需設置允許「分享到朋友圈」,同時可自定義標題、分享圖等。具體參考 Page.onShareTimeline 介面文檔

滿足上述兩個條件的頁面,可被分享到沒做朋友圈。

### 條件1:(在js中添加onShareAppMessage)

onShareAppMessage: function (ops) {

    wx.showShareMenu({

      withShareTicket: true,

      menus: ['shareAppMessage', 'shareTimeline']

    })

}

### 條件2:枯弊衡(在js中添加onShareTimeline)

  onShareTimeline: function () {

    return {

      title: '卜孝分享的標題',

      query: {

        // key: 'value' //要攜帶的參數

      },

      imageUrl: ''  //分享圖,默認小程序的logo

    }

  },

### 點擊小程序右上方三個點分享朋友圈,效果如下:

❽ 為什麼修改標題分享微信還是不變,微信分享到朋友圈,朋友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在網頁上進行朋友圈分享,我q292546783,非常感謝

調用微信官方提供的API:

<script src="<a href="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>" target="_blank">http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script></a>
<script type="text/javascript">
//if(!(/MicroMessenger/i.test(navigator.userAgent)))
//{
// document.body.innerHTML="請在微信打開此鏈接";
//}
// 注意:所有的JS介面只能在公眾號綁定的域名下調用,公眾號開發者需要先登錄微信公眾平台進入「公眾號設置」的「功能設置」里填寫「JS介面安全域名」。
/帆世旁/ 如果發現在 Android 不能分享自定義內容,請到官網下載最新的包覆蓋安裝,Android 自定義分享介面返蘆需升級至 6.0.2.58 版本及以上。
// 完整 JS-SDK 文檔地址:<a href="http://mp.weixin.qq.com/wiki/7/.html" target="_blank">http://mp.weixin.qq.com/wiki/7/.html</a>
wx.config({
debug: false,
appId: '微-信,公眾號提供的AppId',
timestamp: '這里是時間戳',
nonceStr: 'GoodBlessYou',
signature: '這里是簽名',
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
});
wx.ready(function () {
// 2.2 監聽「分享到朋友圈」按鈕點擊、自定義分享內容及分享結果介面
wx.onMenuShareTimeline({
態橡title: '標題',
link: '分享鏈接',
imgUrl: '分享的圖片鏈接',
trigger: function (res) {
// alert("分享到朋友圈按鈕點擊");
},
success: function (res) {
},
cancel: function (res) {
// alert('已取消');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
});
</script>

APPID 和AppSecret通過微信提供的這兩個參數,再通過一些演算法獲取signature ,時間戳是自己獲取

❿ 請教如何觸發 js微信分享介面 點擊按鈕,觸發微信分享到朋友圈。

前提是你的公眾號已打開onMenuShareTimeline許可權
wx.config({
debug: true,
appId: "你的回APPID",
timestamp: "xxx",
nonceStr: "xxx",
signature: "xxx",
jsApiList: [ 'onMenuShareTimeline', ] //onMenuShareTimeline你要的方法答
});

閱讀全文

與微信分享到朋友圈js代碼相關的資料

熱點內容
桌面雲配置文件分離 瀏覽:505
iphone5如何升級4g網路 瀏覽:5
團購是在哪個app 瀏覽:897
打開多個word文檔圖片就不能顯示 瀏覽:855
騰訊新聞怎麼切換版本 瀏覽:269
app安裝失敗用不了 瀏覽:326
桌面文件滑鼠點開會變大變小 瀏覽:536
手機誤刪系統文件開不了機 瀏覽:883
微信兔子甩耳朵 瀏覽:998
android藍牙傳文件在哪裡 瀏覽:354
蘋果6s軟解是真的嗎 瀏覽:310
c語言代碼量大 瀏覽:874
最新網路衛星導航如何使用 瀏覽:425
以下哪些文件屬於圖像文件 瀏覽:774
zycommentjs 瀏覽:414
確認全血細胞減少看哪些數據 瀏覽:265
文件有哪些要求 瀏覽:484
cad打開時會出現兩個文件 瀏覽:65
什麼是轉基因網站 瀏覽:48
手柄設備有問題代碼43 瀏覽:921

友情鏈接