微信分享接口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必须后台生成传给前端，此时项目代码的分享功能只有放在制定（与微信绑定的）的二级域名下才可以起效