使用JSSDK集成微信分享遇到的一些坑


h5項目中需要集成微信分享,以實現自定義標題、描述、圖片等功能。結果遇到了很多坑。

 

准備工作

務必詳細閱讀微信JS-SDK說明文檔

需要后端支持

強烈建議下載使用微信web開發者工具

按文檔配置好公眾號

 

JSSDK使用步驟

步驟一:綁定域名

先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

備注:登錄后可在“開發者中心”查看對應的接口權限。

這里注意:JS接口安全域名一定要填寫正確,區分子域名,且主域名需要通過備案!沒有滿足這一步,無法繼續測試。

 

步驟二:引入JS文件

在需要調用JS接口的頁面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js

請注意,如果你的頁面啟用了https,務必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否則將無法在iOS9.0以上系統中成功使用JSSDK

如需使用搖一搖周邊功能,請引入 jweixin-1.1.0.js

備注:支持使用 AMD/CMD 標准模塊加載方法加載。

 

步驟三:通過config接口注入權限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息,否則將無法調用(同一個url僅需調用一次,對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性,所以使用pushState來實現web app的頁面會導致簽名失敗,此問題會在Android6.2中修復)。

wx.config({
    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。
    appId: '', // 必填,公眾號的唯一標識
    timestamp: , // 必填,生成簽名的時間戳
    nonceStr: '', // 必填,生成簽名的隨機串
    signature: '',// 必填,簽名,見附錄1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
});

debug模式建議打開,可以提示錯誤信息。

注意,集成分享 jsApiList 里需要有:

"onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareWeibo","onMenuShareQZone"

 

這里建議使用后端配置好,例如在PHP里:

if(isWeiXin()){
    $js = new Js(NORMAL_WECHAT_APP_ID, NORMAL_WECHAT_SECRET);
    
    $array['wx_js'] = $js;
    
    $array['wx_js_config'] = $js->config(array('onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone',
        'chooseImage', 'previewImage','uploadImage', 'downloadImage', 
        'hideOptionMenu', 'showOptionMenu','hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem'
    ), false, false);
}

至於后端具體怎么生成這個 wx_js_config ,本文不做講解。  wx_js_config  里內容就是:

{"appId":"wxc121************","timestamp":"1460772222","nonceStr":"rand_57119d7e75995","signature":"df203**2030c6e93f584eb37d12e715d97******","jsApiList":["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareWeibo","onMenuShareQZone","chooseImage","previewImage","uploadImage","downloadImage","hideOptionMenu","showOptionMenu","hideMenuItems","showMenuItems","hideAllNonBaseMenuItem","showAllNonBaseMenuItem"]};

 

示例

 

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>

    if(isWeiXin()){

        //wx_js_config
        var wx_js_config = '<?php echo $wx_js_config;?>'; //從后端獲取wx_js_config

    }
    
    /*微信分享*/
    function WeixinShare(title, desc, link, imgUrl){
        if(!isWeiXin()){
            return false;
        }

        if(!title){
            title = document.getElementsByTagName('title')[0].text;
        }
        
        if(!desc){
            desc = '這是描述';
        }
        
        if(!link){
            link = window.location.href;
        }
        
        if(!imgUrl){
            oImg = document.getElementsByTagName('img');
            if(oImg[0]){
                imgUrl = oImg[0].getAttribute('data-src') ? oImg[0].getAttribute('data-src') : oImg[0].src;
            }
        }
        
        console.log(title, desc, link, imgUrl);

        wx.config(JSON.parse(wx_js_config));//需傳入對象,這里大家很容易忽略!!!
        
        wx.ready(function(){
            
            var config = {
                title: title,
                desc: desc,
                link: link,
                imgUrl: imgUrl,
                type: 'link', 
                dataUrl: '',
                success: function () { 
                    $.tip('分享成功');
                },
                cancel: function () { 
                    $.tip('分享失敗');
                }
            };/*分享給朋友*/
            wx.onMenuShareAppMessage(config);
            
            /*分享到QQ*/
            wx.onMenuShareQQ(config);
            
            /*分享到騰訊微博*/
            wx.onMenuShareWeibo(config);
            
            /*分享到QQ空間*/
            wx.onMenuShareQZone(config);
            
      /*分享到朋友圈*/
      config.title = desc; /*分享到朋友圈沒有desc字段,取title*/
      wx.onMenuShareTimeline(config);
        }); 

        wx.error(function(res){
            console.log("錯誤信息 === ");
            console.log(res);
        });
    }


    WeixinShare();
</script>

 

這里使用 wx.config() 時很容易遇到坑,尤其是從后端傳數據過來時。對於PHP,下面兩種方式是可以的:

注意方式一是沒有引號的,加了引號就變成字符串了。

 

 wx.config() 配置成功,在微信web開發者工具里可以看到權限列表顯示正常的:

 

JS-SDK一欄會提示:

如果配置失敗,這里appid是空的,而且  wx.ready(function(){}) 里面的方法也不會執行成功。

 

isWeixin方法的內容是:

function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }else{
        return false;
    }
}

 

 
        

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM