重写WeixinApi.js 兼容原代码

官方文档

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&timestamp=$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进行统一修改
 -->

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注