微信JSSDK1.4.0分享功能以及分享接口的坑

• 步骤一：绑定域名
  • 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
• 步骤二：引入JS文件

  • 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

    如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。

• 步骤三：通过config接口注入权限验证配置

   

  • 所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

  • 踩坑：根据微信官方文档，onMeneShareTimeline、onMenuShareAppMessage、onMenuShareQQ、onMenuShareQZone接口即将废弃。建议使用1.4.0版本之后的分享接口：updateAppMessageShareData、updateTimelineShareData、onMenuShareWeibo。但是在config的jsApiList列表中，在加上1.4.0的接口名称时，一定要将对应的老版本的接口名称加上，否则新的接口不起作用。

  • wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '{$data.appId}', // 必填，公众号的唯一标识
        timestamp: '{$data.timeStamp}', // 必填，生成签名的时间戳
        nonceStr: '{$data.nonceStr}', // 必填，生成签名的随机串
        signature: '{$data.signature}',// 必填，签名
        jsApiList: [
                     'checkJsApi',//检测接口权限
    	             'updateTimelineShareData',//1.4.0的分享接口，注意：使用新版本的分享功能，一定要在该列表加上对应的老版本功能接口，否则新接口不起作用
    	             'updateAppMessageShareData',//1.4.0的分享接口,注意：使用新版本的分享功能，一定要在该列表加上对应的老版本功能接口，否则新接口不起作用
    	             'onMenuShareAppMessage',//老版本分享接口。
    	             'onMenuShareTimeline'//老版本分享接口。
                    ] // 必填，需要使用的JS接口列表
    });
    
    wx.checkJsApi({
    	    jsApiList: [ 'updateTimelineShareData',
    	                    'updateAppMessageShareData',
    	                    'onMenuShareAppMessage',
    	                    'onMenuShareTimeline'
                        ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
    	    success: function(res) {
    	    // 以键值对的形式返回，可用的api值true，不可用为false
    	    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    	    	alert(JSON.stringify(res));
    	    },
    	    error:function(res){
    	    	alert(res);
    	    }
    	    
    });
    //分享功能
    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
    		var shareData = {
    	        title: '分享标题', // 分享标题
    	        desc: '分享描述', // 分享描述
    	        link: 'http://www.baidu.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    	        imgUrl: 'http://www.baidu.com/static/addHtml/images/iterationTheme/common/logo_new.png', // 分享图标
    	        success: function (res) {
    	          // 设置成功
    	        },
    	        error:function(res){
    	        }
    		};
            //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
    	    wx.updateAppMessageShareData(shareData);
            //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
    	  	wx.updateTimelineShareData(shareData);
    	});
    	wx.error(function(res){
    	    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    	    alert(res.errMsg);
    	});

    wx.config的参数在后台生成。以下是生成config参数的后台代码

  • //获取config的方法
    public function getWxConfig($wxtype = WXPAY_RETAIL){
    		$wxpay = new Wxpay($wxtype);
    		$config = $wxpay->getWxConfig();//获取微信的配置数据
    		$accessToken = $this->getAccessToken($config['appid'],$config['appsecret']);//获取微信的access_token方法
    		$ticket = $this->getJsapiTicket($wxtype);//获取ticket方法
    		$url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
    		$config = $wxpay->getWxPayJsConfig($accessToken,$ticket,$url);//根据access_token、ticket、当前访问链接获取config配置
    		return $config;
    	}
    
    //获取access_token
     public function getAccessToken($appid = '',$secret = ''){
           if(empty($appid)) $appid = $this->_appid;
        	if(empty($secret)) $secret = $this->_appsecret;
            $cacheName = md5($appid.$secret.'pur_access_token');
            if(empty($accessToken)){
                $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}";
                $curl = new Curl();
                $result = $curl->get($url);
                $wxLogic = new WxpayLogic();
                $result = json_decode($result,true);
                $wxLogic->setLog($result,'获取access_token:');
                if(isset($result['access_token'])){
                    $accessToken = $result['access_token'];
                    Cache::set($cacheName, $accessToken,$result['expires_in']-100);
                }else{
                    throw new Exception($result['errmsg']);
                }
            }
            return $accessToken;
        }
    
    /**
    	 * @return mixed
    	 * @desc:获取js所使用的jsapi_ticket
    	 */
    	function getJsapiTicket($wxpayType = WXPAY_RETAIL)
    	{
    		$cachName = md5($wxpayType.'JSAPI_TICKET');
    		$jsapiTicket = cache($cachName);
    		if (empty($jsapiTicket)) {
    			$wxpay = new Wxpay($wxpayType);
    			$config = $wxpay->getWxConfig();
    			$accessToken = $this->getAccessToken($config['appid'],$config['appsecret']);
    			$ticketUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$accessToken}&type=jsapi";
    			//http_reqest是我自己封装的curl请求的函数
    			$curl = new Curl();
    			$ticketResult = $curl->get($ticketUrl);
    			$this->setLog($ticketResult,'ticket:');
    			$ticketArr = json_decode($ticketResult, true);
    			 if($ticketArr['errcode'] != 0){
    				throw new Exception($ticketArr['errmsg']);
    			} 
    			$jsapiTicket = $ticketArr['ticket'];
    			cache($cachName, $jsapiTicket, 7000);
    		}
    		return $jsapiTicket;
    	}
    
    //获取config参数
    public function getWxPayJsConfig($accessToken,$jsapiTicket,$url){
    		$appId = \WxPayConfig::APPID;
    		$timeStamp = time();
    		$nonceStr = \WxPayApi::getNonceStr();
    		$params = [
    				'jsapi_ticket' => $jsapiTicket,
    				'noncestr' => $nonceStr,
    				'timestamp' => $timeStamp,
    				'url' => $url,
    		];
    		
    		$signature = $this->MakeSign($params);
    		return ['appId'=>$appId,'timeStamp'=>$timeStamp,'nonceStr'=>$nonceStr,'signature'=>$signature,'url'=>$url,'ticket'=>$jsapiTicket];
    	}