首先要在后臺獲取的JSconfig傳到頁面
頁面傳遞數據用ajax
后臺nodejs代碼:
~~~
var config = require('./config');
var API = require('wechat-api');
var express = require('express');
var bodyParser = require('body-parser');
var api = new API(config.appid,config.appsecret)
var app = module.exports = express.createServer();
//使用中間件body-parser獲取post參數
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(function (req, res, next) {
//使用wechat-api獲取JSconfig
var param = {
debug: false,
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'],
url: req.body.url
};
/*api.getTicket(function(err,result){
console.log(err);
console.log(result);
});*/
api.getJsConfig(param, function(err,result){
res.send(result);
});
})
app.listen(1338,function(){
console.log('port 1338 is running!');
});
~~~
前臺頁面代碼
~~~
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>微信測試頁面</title>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
$(function(){
//獲取jsconfig
var param_get_js_config = {'cmd':'get_js_config','url':'http://xl.caiqr.com/test.html'};
hander_data_from_wechat_api(param_get_js_config,hander_js_config);
})
//配置JSconfig
function hander_js_config(data){
/*wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。
appId: '', // 必填,公眾號的唯一標識
timestamp: , // 必填,生成簽名的時間戳
nonceStr: '', // 必填,生成簽名的隨機串
signature: 'sM4AOVdWfPE4DxkXGEs8VJAAX0hDsNvepedYVgPudpde87_OEkUJdX4mFJAutu8m3l0Zg2FbxavtkibLqYZHcw',// 必填,簽名,見附錄1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
});*/
wx.config(data);
wx.ready(function(){
// config信息驗證后會執行ready方法,所有接口調用都必須在config接口獲得結果之后,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口,則可以直接調用,不需要放在ready函數中。
wx.checkJsApi({
jsApiList: ['onMenuShareTimeline'], // 需要檢測的JS接口列表,所有JS接口列表見附錄2,
success: function(res) {
alert(JSON.stringify(res));
// 以鍵值對的形式返回,可用的api值true,不可用為false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
wx.onMenuShareTimeline({
title: '分享的標題', // 分享標題
link: 'www.baidu.com', // 分享鏈接
imgUrl: '', // 分享圖標
success: function (res) {
alert('share success');
// 用戶確認分享后執行的回調函數
},
cancel: function (res) {
alert('share fail')
// 用戶取消分享后執行的回調函數
}
});
});
wx.error(function(res){
alert(JSON.stringify(res));
// config信息驗證失敗會執行error函數,如簽名過期導致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數中查看,對于SPA可以在這里更新簽名。
});
}
//傳遞參數請求wechat_api數據,請求成功后的回調函數fn處理得到的數據
function hander_data_from_wechat_api(param,fn) {
console.info(param);
//發送請求獲取wx_js_config
$.ajax({
url: 'http://xl.caiqr.com/wechat',
type: 'POST',
data: param,
datatype: 'json',
success: function (data) {
fn(data);
}
})
}
</script>
</head>
<body>
</body>
</html>
~~~
分享的時候可以設置分享標題拿到分享成功還是失敗的狀態就成功了