1.先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”
2.在需要調用JS接口的頁面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
3.所有需要使用JS-SDK的頁面必須先注入配置信息,
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。
appId: '', // 必填,公眾號的唯一標識
timestamp: , // 必填,生成簽名的時間戳
nonceStr: '', // 必填,生成簽名的隨機串
signature: '',// 必填,簽名,見附錄1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
});
4.
wx.ready(function(){
// config信息驗證后會執行ready方法,所有接口調用都必須在config接口獲得結果之后,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口,則可以直接調用,不需要放在ready函數中。
wx.onMenuShareAppMessage({
title: '拼單邀請',
desc: '拼單邀請',
link: link,
trigger: function (res) {
// 不要嘗試在trigger中使用ajax異步請求修改本次分享的內容,因為客戶端分享操作是一個同步操作,這時候使用ajax的回包會還沒有返回
},
success: function (res) {
alert('分享給朋友成功');
},
cancel: function (res) {
alert('你沒有分享給朋友');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
其他的朋友圈什么的參照sdk
});
5. 碰到的問題 : 以前這些都做好了 然后我在微信web開發者工具上測試是可行的,但是在微信上測試title和鏈接都顯示的當前網頁沒有生效,本來以為是緩存問題,后來看到成功的回調被執行了,就
wx.config({
debug: false,改為true alert出返回值,然后知道是link參數錯誤,,, link要符合 JS接口安全域名。修改后可行
6.最后分享一個公共的weichat.js
(function(){
window.weiChatConfig = function(actionUrl,href_local, callback){
$.ajax({
type : 'POST',
async : false,
url : actionUrl,//url:'${pageContext.request.contextPath}/jsApi',
data : {"url":href_local},//location.href.split("#")[0]
datatype : 'json',
success : function(msg1){
var msg = eval("("+msg1+")");
wx.config({
debug : false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。
appId : msg.appId, // 必填,公眾號的唯一標識
timestamp : parseInt(msg.timestamp), // 必填,生成簽名的時間戳
nonceStr : msg.nonceStr, // 必填,生成簽名的隨機串
signature : msg.signature,// 必填,簽名,見附錄1
jsApiList : [
'onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ',
'onMenuShareWeibo','startRecord','stopRecord',
'onVoiceRecordEnd','playVoice','pauseVoice',
'stopVoice','onVoicePlayEnd','uploadVoice',
'downloadVoice','chooseImage','previewImage',
'uploadImage','downloadImage','translateVoice',
'getNetworkType','openLocation','getLocation',
'hideOptionMenu','showOptionMenu','hideMenuItems',
'showMenuItems','hideAllNonBaseMenuItem','showAllNonBaseMenuItem',
'closeWindow','scanQRCode','chooseWXPay',
'openProductSpecificView','addCard','chooseCard','openCard'
] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
});
wx.ready(function() {
if ( typeof callback === 'function' ) {
callback();
}
});
}
});
}
/**
* 分享到朋友圈
* @param {Object} shareData
*/
window.shareTimeLine = function(shareData){
wx.onMenuShareTimeline({
title: shareData.title, // 分享標題
link: shareData.link, // 分享鏈接
imgUrl: shareData.imgUrl, // 分享圖標
success: function () {
// 用戶確認分享后執行的回調函數
},
cancel: function () {
// 用戶取消分享后執行的回調函數
}
});
}
/**
* 分享給朋友
* @param {Object} shareData
*/
window.shareAppMsg = function(shareData){
wx.onMenuShareAppMessage({
title: shareData.title, // 分享標題
desc: shareData.desc, // 分享描述
link: shareData.link, // 分享鏈接
imgUrl: shareData.imgUrl, // 分享圖標
type: '', // 分享類型,music、video或link,不填默認為link
dataUrl: '', // 如果type是music或video,則要提供數據鏈接,默認為空
success: function () {
// 用戶確認分享后執行的回調函數
},
cancel: function () {
// 用戶取消分享后執行的回調函數
}
});
}
/**
* 分享到QQ
* @param {Object} shareData
*/
window.shareQQ = function(shareData){
wx.onMenuShareQQ({
title: shareData.title, // 分享標題
desc: shareData.desc, // 分享描述
link: shareData.link, // 分享鏈接
imgUrl: shareData.imgUrl, // 分享圖標
success: function () {
// 用戶確認分享后執行的回調函數
},
cancel: function () {
// 用戶取消分享后執行的回調函數
}
});
}
/**
* 分享到騰訊微博
* @param {Object} shareData
*/
window.shareWeibo = function(shareData){
wx.onMenuShareWeibo({
title: shareData.title, // 分享標題
desc: shareData.desc, // 分享描述
link: shareData.link, // 分享鏈接
imgUrl: shareData.imgUrl, // 分享圖標
success: function () {
// 用戶確認分享后執行的回調函數
},
cancel: function () {
// 用戶取消分享后執行的回調函數
}
});
}
window.shareAll = function(shareData){
shareTimeLine(shareData);
shareAppMsg(shareData);
shareQQ(shareData);
shareWeibo(shareData);
}
/**
* 微信支付
*/
window.wxpayjsapi = function(wxorder){
wx.chooseWXPay({
timestamp : wxorder.timeStamp, // 支付簽名時間戳
nonceStr : wxorder.nonceStr, //支付簽名隨即字符串,<=32
package : wxorder.package, //統一支付接口返回的prepay_id參數值,格式:prepay_id=xxxx
signType : wxorder.signType, //簽名方式,默認為'SHA1',新版為'MD5'
paySign : wxorder.paySign, //支付簽名
success : function (res) {
// 支付成功后的回調函數
if(res.indexof("ok") > 0){
alert("支付成功");
} else if(res.indexof("cancel") > 0){
alert("支付過程中用戶取消");
} else if(res.indexof("fail") > 0){
alert("支付失敗");
}
}
});
}
})();
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
weiChatConfig(webRoot+'weichatApi/jsConfig/config.json',location.href.split("
#")[0]);
//通過config接口注入權限驗證配置
//weichatApi/jsConfig/config.json 是控制器返回wx.config的相關參數
</script>
