老規矩---demo圖: (注釋:微信分享只支持右上角三個點觸發)
======>
老規矩上菜:
1. 這邊我封裝了 share.js
function allSharefun(param) {
console.log(param)
var tagUrl = location.href;
tagUrl = encodeURIComponent(tagUrl);
console.log(tagUrl)
//注釋: 傳參當前頁面url給自己的后台接口, 獲取 配置的config所需參數
$.get("xxxxx此處自己后台接口?url=" + tagUrl, function(res) {
console.log(res)
console.log(res.result.nonceStr)
if (res.error == '00') {
console.log(res)
wx.config({
debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: 'xxxxxxxxx', // 必填，公眾號的唯一標識
timestamp: res.result.timestamp, // 必填，生成簽名的時間戳
nonceStr: res.result.nonceStr, // 必填，生成簽名的隨機串
signature: res.result.signature, // 必填，簽名
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareQZone',
'onMenuShareWeibo'
] // 必填，需要使用的JS接口列表
});
// config之后會自動調用ready方法
wx.ready(function() {
// 驗證接口是否注冊完成
wx.checkJsApi({
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareQZone',
'onMenuShareWeibo',
"scanQRCode"
],
success: function(res) {
console.log("888");
}
});
wx.onMenuShareTimeline({
title: param.title, // 分享標題
desc: param.content, // 分享描述
link: param.url, // 分享鏈接
imgUrl: param.pic, // 分享圖標
success: function() {
// 用戶確認分享后執行的回調函數
alert('已分享');
},
cancel: function() {
// 用戶取消分享后執行的回調函數
alert('已取消');
}
});
//獲取“分享給朋友”
wx.onMenuShareAppMessage({
title: param.title, // 分享標題
desc: param.content, // 分享描述
link: param.url, // 分享鏈接
imgUrl: param.pic, // 分享圖標
type: 'link', // 分享類型,music、video或link，不填默認為link
dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空
success: function() {
// 用戶確認分享后執行的回調函數
// alert('已分享');
//window.location.href = "https://www.baidu.com";
},
cancel: function() {
// 用戶取消分享后執行的回調函數
// alert('已取消');
}
});
//獲取“分享到QQ”
wx.onMenuShareQQ({
title: param.title, // 分享標題
desc: param.content, // 分享描述
link: param.url, // 分享鏈接
imgUrl: param.pic, // 分享圖標
success: function() {
// 用戶確認分享后執行的回調函數
// alert('已分享');
},
cancel: function() {
// 用戶取消分享后執行的回調函數
// alert('已取消');
}
});
//獲取“分享到QQ空間”
wx.onMenuShareQZone({
title: param.title, // 分享標題
desc: param.content, // 分享描述
link: param.url, // 分享鏈接
imgUrl: param.pic, // 分享圖標
success: function() {
// 用戶確認分享后執行的回調函數
// alert('已分享');
},
cancel: function() {
// 用戶取消分享后執行的回調函數
// alert('已取消');
}
});
//獲取“分享到騰訊微博”
wx.onMenuShareWeibo({
title: param.title, // 分享標題
desc: param.content, // 分享描述
link: param.url, // 分享鏈接
imgUrl: param.pic, // 分享圖標
success: function() {
// 用戶確認分享后執行的回調函數
// alert('已分享');
},
cancel: function() {
// 用戶取消分享后執行的回調函數
// alert('已取消');
}
});
});
wx.error(function(res) {
// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。
// console.log(res,"rrr")
});
// 開始分享
}
})
}
2. share.html頁面 引入 share.js
//引入jssdk
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>
<!-- 需要分享的頁面接入 封裝好的 分享js -->
<script src="share.js"></script>
// 分享的 三要素----------------------------------------------
var shareData = {
url: window.location.href, //當前頁面路徑
title: '分享的標題xxxx',
content: '描述xxxx',
pic: 'xxxxpic' //圖片
}
//調用 share.js中的 函數 並且傳入參數
allSharefun(shareData)3.前提, 你已經配置好微信公眾號的js安全域名等等!!!
需要配置ip白名單和安全域名
注釋!!!!!! 配置域名 不需要加https / http
1 有問題的朋友可以給我留言,
2 更多參考鏈接:https://www.jianshu.com/p/bef8675130cb
3 官網鏈接: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#10
