微信分享接口SDK簡介使用

很久沒做移動端活動了，想不少人都參與過微信里面的活動，既然活動就少不了分享。那我就行一個前端的角度說說如何實現微信分享的吧。

對應微信分享，現在已有公共接口，微信的開發者文檔SDK：https://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html

首先要引用官方的jweixin-1.0.0.js，然后便可啟用接口，下面就以分享到微信好友，朋友圈，QQ好友，QQ空間為例

 

var link = window.location.href.replace('weixin-share.html','');
            var shareData = {
                    imgUrl: link +"img/share.jpg",   // 分享圖標
                    link:link + 'weixin-share.html?inviteCode='+localStorage.inviteCode,// 分享鏈接
                    desc: '流量告急不用慌，每邀1人送1次，瘋狂邀請瘋狂送，流量之王就是你！',// 分享描述
                    title: '邀請送，500M流量瘋狂送！',// 分享標題
                    success: function () {
                        if(localStorage.lastname){
                            alert("分享成功");
                        }

                      },
                      cancel: function () {
                          // 用戶取消分享后執行的回調函數
                      }
                };
            if (typeof wx != 'undefined') {
                wx.config({
                    debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
                    appId: 'wx4601e3fa5832f936', // 必填，公眾號的唯一標識
                    timestamp:'1472778330' , // 必填，生成簽名的時間戳
                    nonceStr: 'HZSMK123', // 必填，生成簽名的隨機串
                    signature: 'fb0a612086e3bb8c2fb6c462c8a45722fce8409b',// 必填，后台生成，與url有關簽名，見附錄1
                    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','hideMenuItems','onMenuShareQQ','onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
                });
                wx.ready(function(){
                    // 分享到朋友圈
                    wx.onMenuShareTimeline(
                            shareData
                    );
                    // 分享給朋友
                    wx.onMenuShareAppMessage(
                            shareData
                    );
                    // 分享到QQ
                    wx.onMenuShareQQ(
                        shareData
                    );
                    // 分享到QQ空間
                    wx.onMenuShareQZone(
                        shareData
                    );
                    // 隱藏菜單項
                    wx.hideMenuItems({
                        menuList: [
                                   'menuItem:exposeArticle', //舉報
                                   'menuItem:setFont',
                                   'menuItem:refresh',
                                   'menuItem:copyUrl', //復制鏈接
                                   'menuItem:originPage',
                                   'menuItem:readMode',
                                   'menuItem:openWithQQBrowser',
                                   'menuItem:openWithSafari',
                                   'menuItem:share:email'
                                   ] // 要隱藏的菜單項，只能隱藏“傳播類”和“保護類”按鈕，所有menu項見附錄3
                    });

                });
            }

 

 

 

說明一下appId必須是對外有效的公眾號唯一id,signature必須后台生成傳給前端，此時項目代碼的分享功能只有放在制定（與微信綁定的）的二級域名下才可以起效