微信公眾平台Js API實現微信分享

 

 

今天上班第一天，Boss讓實現微信分享后，要知道用戶是否分享成功，分享成功后就給用戶一個surprise(游戲禮包)。

 

通過查看API，做簡單記錄：

1.編寫一個簡單的jsp頁面，加入如下JS代碼：

// 開發階段，開啟WeixinApi的調試模式
WeixinApi.enableDebugMode();

// 初始化WeixinApi，等待分享
WeixinApi.ready(function(Api) {

    // 微信分享的數據
    var wxData = {
        "appId": "", // 服務號可以填寫appId
        "imgUrl" : 'http://www.baidufe.com/fe/blog/static/img/weixin-qrcode-2.jpg',
        "link" : 'http://www.baidufe.com',
        "desc" : '大家好，我是Alien，Web前端&Android客戶端碼農，喜歡技術上的瞎倒騰！歡迎多交流',
        "title" : "大家好，我是趙先烈"
    };

    // 分享的回調
    var wxCallbacks = {
        // 收藏操作不執行回調，默認是開啟(true)的
        favorite : false,

        // 分享操作開始之前
        ready : function() {
            // 你可以在這里對分享的數據進行重組
            alert("准備分享");
        },
        // 分享被用戶自動取消
        cancel : function(resp) {
            // 你可以在你的頁面上給用戶一個小Tip，為什么要取消呢？
            alert("分享被取消，msg=" + resp.err_msg);
        },
        // 分享失敗了
        fail : function(resp) {
            // 分享失敗了，是不是可以告訴用戶：不要緊，可能是網絡問題，一會兒再試試？
            alert("分享失敗，msg=" + resp.err_msg);
        },
        // 分享成功
        confirm : function(resp) {
            // 分享成功了，我們是不是可以做一些分享統計呢？
            alert("分享成功，msg=" + resp.err_msg);
        },
        // 整個分享過程結束
        all : function(resp,shareTo) {
            // 如果你做的是一個鼓勵用戶進行分享的產品，在這里是不是可以給用戶一些反饋了？
            alert("分享" + (shareTo ? "到" + shareTo : "") + "結束，msg=" + resp.err_msg);
        }
    };

    // 用戶點開右上角popup菜單后，點擊分享給好友，會執行下面這個代碼
    Api.shareToFriend(wxData, wxCallbacks);

    // 點擊分享到朋友圈，會執行下面這個代碼
    Api.shareToTimeline(wxData, wxCallbacks);

    // 點擊分享到騰訊微博，會執行下面這個代碼
    Api.shareToWeibo(wxData, wxCallbacks);

    // iOS上，可以直接調用這個API進行分享，一句話搞定
    Api.generalShare(wxData,wxCallbacks);
});

 

2.運行JSP頁面。

3. 將運行的JSP頁面的網址復制，到http://cli.im/生成二維碼。

4.登錄微信，打開掃一掃，JSP頁面就會在微信中打開。

5.然后就可以測試微信的分享功能了（具體還可以實現些什么功能可以參考API）。

 注意的地方：

• 1）、WeixinApi.js路徑是否引用正確
• 2）、WeixinApi.ready是否正確執行了？（可以在里面加一個alert，簡單粗暴可依賴）
• 3）、開啟WeixinApi.enableDebugMode方便問題定位
• 4）、WeixinApi.ready執行，但是就是不執行分享時的代碼時，請確認端口是不是80端口（我就在這上面耗了很長時間，悲催啊）。

微信API目前只支持80端口   需要其他端口支持需要使用端口映射

源碼地址：https://github.com/zxlie/WeixinApi

 

最后做出來了有個疑問：就是有些手機微信打開可以實現，但是又有些手機微信打開不能實現，這個很郁悶，不知道為什么。希望知道的能不吝賜教。