官方文档
http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
为了兼容原来的代码,重写WeixinApi的js,只处理分享的部分….
/** * ! 微信内置浏览器的Javascript API,功能包括: * * 1、分享到微信朋友圈 2、分享给微信好友 3、分享到腾讯微博 4、隐藏/显示右上角的菜单入口 5、隐藏/显示底部浏览器工具栏 6、获取当前的网络状态 * 7、调起微信客户端的图片播放组件 8、关闭公众平台Web页面 * * @author zhaoxianlie(http://www.baidufe.com) * * @author caihaibin 1.只重写分享部分,兼容原代码 */ var WeixinApi = (function() { "use strict"; /** * 分享到微信朋友圈 * * @param {Object} * data 待分享的信息 * @p-config {String} appId 公众平台的appId(服务号可用) * @p-config {String} imageUrl 图片地址 * @p-config {String} link 链接地址 * @p-config {String} desc 描述 * @p-config {String} title 分享的标题 * * @param {Object} * callbacks 相关回调方法 * @p-config {Boolean} async ready方法是否需要异步执行,默认false * @p-config {Function} ready(argv) 就绪状态 * @p-config {Function} dataLoaded(data) 数据加载完成后调用,async为true时有用,也可以为空 * @p-config {Function} cancel(res) 取消 * @p-config {Function} fail(res) 失败 * @p-config {Function} confirm(res) 成功 * @p-config {Function} all(res) 无论成功失败都会执行的回调 */ function weixinShareTimeline(data, callbacks) { callbacks = callbacks || {}; var theData = data; wx.onMenuShareTimeline({ title : theData.title, desc : theData.desc, link : theData.link, imgUrl : theData.imgUrl, trigger : function(res) { callbacks.ready && callbacks.ready(res); }, success : function(res) { callbacks.confirm && callbacks.confirm(res); }, cancel : function(res) { callbacks.cancel && callbacks.cancel(res); }, fail : function(res) { callbacks.fail && callbacks.fail(res); } }); } /** * 发送给微信上的好友 * * @param {Object} * data 待分享的信息 * @p-config {String} appId 公众平台的appId(服务号可用) * @p-config {String} imageUrl 图片地址 * @p-config {String} link 链接地址 * @p-config {String} desc 描述 * @p-config {String} title 分享的标题 * * @param {Object} * callbacks 相关回调方法 * @p-config {Boolean} async ready方法是否需要异步执行,默认false * @p-config {Function} ready(argv) 就绪状态 * @p-config {Function} dataLoaded(data) 数据加载完成后调用,async为true时有用,也可以为空 * @p-config {Function} cancel(res) 取消 * @p-config {Function} fail(res) 失败 * @p-config {Function} confirm(res) 成功 * @p-config {Function} all(res) 无论成功失败都会执行的回调 */ function weixinSendAppMessage(data, callbacks) { callbacks = callbacks || {}; var theData = data; wx.onMenuShareAppMessage({ title : theData.title, desc : theData.desc, link : theData.link, imgUrl : theData.imgUrl, trigger : function(res) { callbacks.ready && callbacks.ready(res); }, success : function(res) { callbacks.confirm && callbacks.confirm(res); }, cancel : function(res) { callbacks.cancel && callbacks.cancel(res); }, fail : function(res) { callbacks.fail && callbacks.fail(res); } }); } /** * 分享到腾讯微博 * * @param {Object} * data 待分享的信息 * @p-config {String} imageUrl 图片地址 * @p-config {String} link 链接地址 * @p-config {String} desc 描述 * @p-config {String} title 分享的标题 * * @param {Object} * callbacks 相关回调方法 * @p-config {Boolean} async ready方法是否需要异步执行,默认false * @p-config {Function} ready(argv) 就绪状态 * @p-config {Function} dataLoaded(data) 数据加载完成后调用,async为true时有用,也可以为空 * @p-config {Function} cancel(res) 取消 * @p-config {Function} fail(res) 失败 * @p-config {Function} confirm(res) 成功 * @p-config {Function} all(res) 无论成功失败都会执行的回调 */ function weixinShareWeibo(data, callbacks) { callbacks = callbacks || {}; var theData = data; wx.onMenuShareWeibo({ title : theData.title, desc : theData.desc, link : theData.link, imgUrl : theData.imgUrl, trigger : function(res) { callbacks.ready && callbacks.ready(res); }, success : function(res) { callbacks.confirm && callbacks.confirm(res); }, cancel : function(res) { callbacks.cancel && callbacks.cancel(res); }, fail : function(res) { callbacks.fail && callbacks.fail(res); } }); } /** * 分享到腾讯微博 * * @param {Object} * data 待分享的信息 * @p-config {String} imageUrl 图片地址 * @p-config {String} link 链接地址 * @p-config {String} desc 描述 * @p-config {String} title 分享的标题 * * @param {Object} * callbacks 相关回调方法 * @p-config {Boolean} async ready方法是否需要异步执行,默认false * @p-config {Function} ready(argv) 就绪状态 * @p-config {Function} dataLoaded(data) 数据加载完成后调用,async为true时有用,也可以为空 * @p-config {Function} cancel(res) 取消 * @p-config {Function} fail(res) 失败 * @p-config {Function} confirm(res) 成功 * @p-config {Function} all(res) 无论成功失败都会执行的回调 */ function onMenuShareQQ(data, callbacks) { callbacks = callbacks || {}; var theData = data; wx.onMenuShareQQ({ title : theData.title, desc : theData.desc, link : theData.link, imgUrl : theData.imgUrl, trigger : function(res) { callbacks.ready && callbacks.ready(res); }, success : function(res) { callbacks.confirm && callbacks.confirm(res); }, cancel : function(res) { callbacks.cancel && callbacks.cancel(res); }, fail : function(res) { callbacks.fail && callbacks.fail(res); } }); } /** * 调起微信Native的图片播放组件。 这里必须对参数进行强检测,如果参数不合法,直接会导致微信客户端crash * * @param {String} * curSrc 当前播放的图片地址 * @param {Array} * srcList 图片地址列表 */ function imagePreview(curSrc, srcList) { if (!curSrc || !srcList || srcList.length == 0) { return; } WeixinJSBridge.invoke('imagePreview', { 'current' : curSrc, 'urls' : srcList }); } /** * 显示网页右上角的按钮 */ function showOptionMenu() { WeixinJSBridge.call('showOptionMenu'); } /** * 隐藏网页右上角的按钮 */ function hideOptionMenu() { WeixinJSBridge.call('hideOptionMenu'); } /** * 显示底部工具栏 */ function showToolbar() { WeixinJSBridge.call('showToolbar'); } /** * 隐藏底部工具栏 */ function hideToolbar() { WeixinJSBridge.call('hideToolbar'); } /** * 返回如下几种类型: * * network_type:wifi wifi网络 network_type:edge 非wifi,包含3G/2G * network_type:fail 网络断开连接 network_type:wwan 2g或者3g * * 使用方法: WeixinApi.getNetworkType(function(networkType){ * * }); * * @param callback */ function getNetworkType(callback) { if (callback && typeof callback == 'function') { WeixinJSBridge.invoke('getNetworkType', {}, function(e) { // 在这里拿到e.err_msg,这里面就包含了所有的网络类型 callback(e.err_msg); }); } } /** * 关闭当前微信公众平台页面 */ function closeWindow() { WeixinJSBridge.call("closeWindow"); } /** * 当页面加载完毕后执行,使用方法: WeixinApi.ready(function(Api){ // 从这里只用Api即是WeixinApi * }); * * @param readyCallback */ function wxJsBridgeReady(readyCallback) { if (readyCallback && typeof readyCallback == 'function') { var Api = this; // 当在微信中时,才进行签名处理. if (Api.inWeixin) { /** * 需要引用jquery weixinjs_url 获取当前url的签名参数 */ $.post('http://xxxxxxxx/weixinjs/index', { weixinjs_url : location.href }, function(result) { wx.config(result.obj); }, 'json'); } var wxReadyFunc = function() { readyCallback(Api); }; wx.ready(wxReadyFunc); return; } } return { version : "1.6", ready : wxJsBridgeReady, shareToTimeline : weixinShareTimeline, shareToWeibo : weixinShareWeibo, shareToFriend : weixinSendAppMessage, shareToQq : onMenuShareQQ, showOptionMenu : showOptionMenu, hideOptionMenu : hideOptionMenu, showToolbar : showToolbar, hideToolbar : hideToolbar, getNetworkType : getNetworkType, imagePreview : imagePreview, closeWindow : closeWindow, // 在微信内才进行签名判断. inWeixin : navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger" }; })();
jssdk.php
替换
JSSDK::getSignPackage()
public function getSignPackage() { $jsapiTicket = $this->getJsApiTicket (); $url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; // 通过外部参数进行目标的url的签名 if ($_REQUEST ['weixinjs_url']) { $url = $_REQUEST ['weixinjs_url']; } $timestamp = time (); $nonceStr = $this->createNonceStr (); // 这里参数的顺序要按照 key 值 ASCII 码升序排序 $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url"; $signature = sha1 ( $string ); $signPackage = array ( "appId" => $this->appId, "nonceStr" => $nonceStr, "timestamp" => $timestamp, "url" => $url, "signature" => $signature, "rawString" => $string ); return $signPackage; }
服务器端签名
public function actionIndex() { if ($_SERVER ['HTTP_ORIGIN']) header ( "Access-Control-Allow-Origin: " . $_SERVER ['HTTP_ORIGIN'] ); header ( "Access-Control-Allow-Credentials: true" ); $title = '微信签名相关'; lib ( "weixin/js/jssdk.php" ); $jssdk = new JSSDK ( "xxxxxxxx", "xxxxxxx" ); $signPackage = $jssdk->GetSignPackage (); $result = array ( 'appId' => $signPackage ["appId"], 'timestamp' => $signPackage ["timestamp"], 'nonceStr' => $signPackage ["nonceStr"], 'signature' => $signPackage ["signature"], 'jsApiList' => array ( 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo' ) ); sjson ( true, $title, '', $result ); }
调用方式
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <!-- 重写后的 js--> <script src="http://xxxxxx/js/WeixinApi.js"></script> <!-- 原来代码不用进行调整,方便修复.如果代码有问题,也可以对WeixinApi.js进行统一修改 -->