欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

微信公众号内分享功能的实现

分享场景

在微信公众号的前端网页内, 我们以前经常会看到分享到朋友圈或者是关注微信等按钮, Click, 之后会弹出一个提示窗让用户分享或者是关注.
那么, 这个需求如何实现呢?

原理探究

  • 在索引了大部门资料, 和腾讯最新的SDK -> JSSDK的API后, 我可以负责任的告诉大家, 介个是不可以实现的, 微信期望的是通过微信自身的分享按钮来实现的分享.

当前分享形式

那么现在通常是怎样实现的呢? 现行较为主流的方法, 是进入相关页面后通过加载一个提示图片来提示用户( 具体为一个箭头指向右上角的分享, 并辅以文字说明),  这是比较常见的做法.(由于并未找到相关图片, 所以暂不列出).


微信自有分享的实现步骤

  • 接入JSSDK(如果已接入, 可以略去该步骤)

-- 1. 绑定域名 : 公众号设置 -> 功能设置 -> JS接口安全域名
-- 2. 引入JS文件 : 在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.0.0.js
-- 3. 通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息, 否则将无法调用 !!!

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

-- 4. 通过ready接口处理成功验证

wx.ready(function(){
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});

-- 5. 通过error接口处理失败验证

wx.error(function(res){
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});

分享接口

  • 获取"分享"到朋友圈按钮点击状态及自定义分享内容接口

wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});
  • 获取“分享给朋友”按钮点击状态及自定义分享内容接口

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});
  • 获取“分享到QQ”按钮点击状态及自定义分享内容接口*

wx.onMenuShareQQ({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
       // 用户取消分享后执行的回调函数
    }
});
  • 获取“分享到QQ空间”按钮点击状态及自定义分享内容接口

wx.onMenuShareQZone({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});
         
             

小礼物走一走,来简书关注我

赞赏支持
                       微信公众账号开发        
    Web note ad 1    
    登录 后发表评论
     
    末尚  
    4楼 · 2018.04.05 14:34

    个人公众号好像没有分享的权限。需要认证的公众号才行哦

     
    无明  
    3楼 · 2017.09.22 15:26

    请问下贴主:微信内的网页如何实现页内点击调用分享接口呢?

     
    ibabyblue  
    2楼 · 2016.04.06 16:32

    你好!请问关注为知笔记、印象笔记之后,在分享选项后面会出现为知笔记和印象笔记两个选项,这个是如何实现的?



    作者:RenBob
    链接:https://www.jianshu.com/p/72fa6ee01e9c
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


    来自  https://www.jianshu.com/p/72fa6ee01e9c

    普通分类: