朋友圈分享的js代碼,js微信分享朋友圈

本文目錄一覽：

• 1、為什麼修改標題分享微信還是不變，微信分享到朋友圈，朋友JS代碼
• 2、網頁內容 轉發到微信朋友圈 代碼
• 3、如何在網頁中通過js代碼將內容分享到朋友圈
• 4、微信朋友圈JSSDK分享自定義圖片文字
• 5、如何在網頁中通過js代碼將內容分享到朋友圈？

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

手機瀏覽網頁的JS代碼么？用火狐瀏覽器試試，在地址欄里的原URL前加 view-source: 即可查看源代碼。電腦網頁的，直接右鍵源代碼就好了，然後複製你想要的代碼，發送大朋友圈

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

布驟一：綁定域名

先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

備註：登錄後可在“開發者中心”查看對應的接口權限。

步驟二：引入JS文件

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

步驟三：通過config接口注入權限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

步驟四：通過ready接口處理成功驗證

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

驟五：通過error接口處理失敗驗證

wx.error(function(res){// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這裡更新簽名。

接口調用說明

所有接口通過wx對象(也可使用jWeixin對象)來調用，參數是一個對象，除了每個接口本身需要傳的參數之外，還有以下通用參數：

success：接口調用成功時執行的回調函數。

fail：接口調用失敗時執行的回調函數。

complete：接口調用完成時執行的回調函數，無論成功或失敗都會執行。

cancel：用戶點擊取消時的回調函數，僅部分有用戶取消操作的api才會用到。

trigger: 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支持Menu中的相關接口。

備註：不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回

以上幾個函數都帶有一個參數，類型為對象，其中除了每個接口本身返回的數據之外，還有一個通用屬性errMsg，其值格式如下：

調用成功時：”xxx:ok” ，其中xxx為調用的接口名

用戶取消時：”xxx:cancel”，其中xxx為調用的接口名

調用失敗時：其值為具體錯誤信息

基礎接口判斷當前客戶端版本是否支持指定JS接口

wx.checkJsApi({ jsApiList: [‘chooseImage’], // 需要檢測的JS接口列表，所有JS接口列表見附錄2, success: function(res) {// 以鍵值對的形式返回，可用的api值true，不可用為false // 如：{“checkResult”:{“chooseImage”:true},”errMsg”:”checkJsApi:ok”}  }});