向腾讯大佬低头--添加腾讯分享

链接多数在微信、QQ分享,毕竟这个世界都是腾讯的。。所以阅读了部分微信JS-SDK说明文档,将网站优化了一下分享时样式,添加了图片和文字说明。



跟着官方爸爸走:

第一步–绑定域名:

首先你要有一个公众号。。。
(喵喵喵?,没公众号怎么办?我还要单独在注册个公众号?太麻烦了= =)

搜了一大堆没用的文章后,我发现了这个 微信公众平台接口测试帐号申请 ,申请测试账号,就可以直接使用一些接口功能了!~

扫码进入腾讯爸爸的怀抱~

JS接口安全域名修改:

jssdk

第二步–引入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

第三步–通过config接口注入权限验证配置:

    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '', // 在帐号申请页面就有这个,粘过来就行
        timestamp: , // 测试不填也有效果
        nonceStr: '', // 测试不填也有效果
        signature: '',// 测试不填也有效果
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中,我只用了分享功能,所以这里只写这几个了
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone',
        ] 
    });

第四步–通过ready接口处理成功验证:

    wx.ready(function () {
        var share = {
          title: '前端小白的旅程',
          link: 'http://liangyuke.win',
          imgUrl: 'https://avatars1.githubusercontent.com/u/24226643?v=3&s=460',
          desc: '每天多学一点前端知识'
        }
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title: share.title, // 分享标题
            link: share.link, // 分享链接
            imgUrl: share.imgUrl, // 分享图标
            success: function () { 
                // 用户确认分享后执行的回调函数
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
        });
        //分享给朋友
        wx.onMenuShareAppMessage({
            title: share.title, 
            desc: share.desc, // 分享描述
            link: share.link, 
            imgUrl: share.imgUrl, // 分享图标
            type: '', // 分享类型,music、video或link,不填默认为link
            dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
            success: function () { 
                // 用户确认分享后执行的回调函数
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
        });
        //分享到QQ
        wx.onMenuShareQQ({
          title: share.title, // 分享标题
          desc: share.desc, // 分享描述
          link: share.link, // 分享链接
          imgUrl: share.imgUrl, // 分享图标
          success: function () { 
             // 用户确认分享后执行的回调函数
          },
          cancel: function () { 
             // 用户取消分享后执行的回调函数
          }
        });
        //分享到腾讯微博
        wx.onMenuShareWeibo({
          title: share.title, // 分享标题
          desc: share.desc, // 分享描述
          link: share.link, // 分享链接
          imgUrl: share.imgUrl, // 分享图标
          success: function () { 
             // 用户确认分享后执行的回调函数
          },
          cancel: function () { 
              // 用户取消分享后执行的回调函数
          }
        });
        //分享到QQ空间
        wx.onMenuShareQZone({
          title: share.title, // 分享标题
          desc: share.desc, // 分享描述
          link: share.link, // 分享链接
          imgUrl: share.imgUrl, // 分享图标
          success: function () { 
             // 用户确认分享后执行的回调函数
          },
          cancel: function () { 
              // 用户取消分享后执行的回调函数
          }
        });
     });
坚持原创技术分享,您的支持将鼓励我继续创作!