微信分享朋友鏈接顯示js代碼（微信分享 js）

本文目錄一覽：

• 1、如何在網頁中通過js代碼將內容分享到朋友圈
• 2、微信分享js、iphone、通用版
• 3、請問為什麼微信公眾號頁面模板鏈接複製出現的是JavaScript
• 4、js處理微信分享配置
• 5、請問微信分享鏈接修改標題、縮略圖等按您說的方法把那段js代碼加進去無效是怎麼回事？
• 6、微信分享一個網頁或者發送一個網址鏈接時顯示的左邊圖片和右邊文字是怎麼用代碼實現的？如圖：

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

微信內置的瀏覽器里添加了WeixinJSBridge對象，可以通過引對象將內容分享到朋友圈，所以以下代碼只在微信內置瀏覽器中有效。

var shareToWeixinFriend = function(data, cb)

{

if (typeof WeixinJSBridge == ‘undefined’) {

return false;

}

else {

WeixinJSBridge.invoke(‘shareTimeline’, {

‘img_url’: data.imgurl || ”, // 圖片url地址

‘link’: data.url, // 文章地址，此內容分享到朋友圈後可以點擊跳轉到此地址

‘desc’: data.desc,

‘title’: data.title

}, function(d) {

// 返回res.err_msg取值，d還有一個屬性是err_desc

// share_timeline:cancel 用戶取消

// share_timeline:fail　發送失敗

// share_timeline:confirm 發送成功

WeixinJSBridge.log(d.err_msg);

cb cb(d.err_msg);

});

}

return false;

}

另外在微信內置瀏覽器中可以通過weixin://鏈接直接查看某個微信號的資料

微信分享js、iphone、通用版

不知道這個還行不

/*******************************

* Author:Mr.Think

* Description:微信分享通用代碼

* 使用方法：_WXShare(‘分享顯示的LOGO’,’LOGO寬度’,’LOGO高度’,’分享標題’,’分享描述’,’分享鏈接’,’微信APPID(一般不用填)’);

*******************************/

function _WXShare(img,width,height,title,desc,url,appid){

//初始化參數

img=img||”;

width=width||100;

height=height||100;

title=title||document.title;

desc=desc||document.title;

url=url||document.location.href;

appid=appid||”;

//微信內置方法

function _ShareFriend() {

WeixinJSBridge.invoke(‘sendAppMessage’,{

‘appid’: appid,

‘img_url’: img,

‘img_width’: width,

‘img_height’: height,

‘link’: url,

‘desc’: desc,

‘title’: title

}, function(res){

_report(‘send_msg’, res.err_msg);

})

}

function _ShareTL() {

WeixinJSBridge.invoke(‘shareTimeline’,{

‘img_url’: img,

‘img_width’: width,

‘img_height’: height,

‘link’: url,

‘desc’: desc,

‘title’: title

}, function(res) {

_report(‘timeline’, res.err_msg);

});

}

function _ShareWB() {

WeixinJSBridge.invoke(‘shareWeibo’,{

‘content’: desc,

‘url’: url,

}, 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){

_ShareTL();

});

// 分享到微博

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

_ShareWB();

});

}, false);

}

請問為什麼微信公眾號頁面模板鏈接複製出現的是JavaScript

出現的內容是javascript:;也就是javascript:void(0);的縮寫，一般是下面這種寫法

a href=”javascript:void(0);”a標籤a標籤a標籤/a

表示點擊這個a標籤不進行任何操作

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 處理失敗相關信息：

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

請問微信分享鏈接修改標題、縮略圖等按您說的方法把那段js代碼加進去無效是怎麼回事？

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

微信分享一個網頁或者發送一個網址鏈接時顯示的左邊圖片和右邊文字是怎麼用代碼實現的？如圖：

圖片是你網頁中第一張圖，不過該圖不能小於 300*300，要不就不顯示了，至於右邊的文字，是取你的頁面標題及 Description 的內容，如果你Description 沒寫它就默認讀取你的網址了。