zoukankan      html  css  js  c++  java
  • 微信内置分享

    在详情页ajax获取成功以后在回调函数中
    var shareData = {
         title: '',//分享标题
         desc: '',//分享描述
         imgUrl:'',//分享图片
    }
         getShare(shareData);
     

    分享html页面中需要添加两个js文件

    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    

    sha1加密文件https://files.cnblogs.com/files/luoshang/sha1.min.js

    前两个步骤前端会有跨域,但微信依然给的json;不好处理最好后台处理

    //获取后台取得微信的 ticket 进行签名生成
    function getShare(shareData){   
     var data = ({});
        $.ajax({
            type: "post",
            url: '',
            dataType: 'json',
            data: {
                "data": JSON.stringify(data)
            },
            success: function(data) {
                var timestamp = (new Date).getTime();//时间戳
                var nonceStr = data.nonceStr;//随机串
                var ticket = data.ticket;
                var Url = location.href.split('#')[0];//获取分享页面URL
                var jsapi_ticket = 'jsapi_ticket=' + ticket + '&noncestr=' + nonceStr + '&timestamp=' + timestamp + '&url=' + Url;
                var signature = sha1(jsapi_ticket);//sha1加密生成签名
           if(shareData.imgUrl){
              shareData.imgUrl = location.origin + shareData.imgUrl;//文章图片
            }else{
              shareData.imgUrl = location.origin + "";//默认图片
            }
                share(timestamp, nonceStr, signature, Url,shareData)
            },
            beforeSend: function(e) {},
            error: function(e) {
                var t = JSON.stringify(e)
            }
        });
    }
    function share(timestamp, nonceStr, signature, Url,shareData) {
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: '', // 必填,公众号的唯一标识
            timestamp: timestamp, // 必填,生成签名的时间戳
            nonceStr: nonceStr, // 必填,生成签名的随机串
            signature: signature, // 必填,签名,见附录1
            jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'chooseWXPay','onMenuShareQZone']
            // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        });
        wx.ready(function() {
        //分享朋友圈
            wx.onMenuShareTimeline({
                title: shareData.title,
                link: Url,
                imgUrl: shareData.imgUrl,
                success: function() {
                    // 用户确认分享后执行的回调函数
                    alert('分享到朋友圈成功');
                },
                cancel: function() {
                    // 用户取消分享后执行的回调函数
                    alert('你没有分享到朋友圈');
                }
            });
        //分享给好友
            wx.onMenuShareAppMessage({
                title:  shareData.title,
                desc:  shareData.desc,
                link: Url,
                imgUrl:  shareData.imgUrl,
                success: function(res) {
                    alert('分享成功');
                },
                cancel: function(res) {
                    alert('你没有分享');
                },
                fail: function(res) {
                    alert(JSON.stringify(res));
                }
            });
        //分享到QQ
            wx.onMenuShareQQ({
                title:  shareData.title,
                desc:  shareData.desc,
                link: Url,
                imgUrl:  shareData.imgUrl,
                success: function() {
                    alert('分享成功'); // 用户确认分享后执行的回调函数
                },
                cancel: function() {
                    alert('你没有分享'); // 用户取消分享后执行的回调函数
                }
            });
        //分享到空间
            wx.onMenuShareQZone({
                title:  shareData.title,
                desc:  shareData.desc,
                link: Url,
                imgUrl:  shareData.imgUrl,
                success: function() {
                    alert('分享成功');// 用户确认分享后执行的回调函数
                },
                cancel: function() {
                    alert('你没有分享');// 用户取消分享后执行的回调函数
                }
            });
        });
    }

    微信 JS 接口签名校验工具

    https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

    QQ内置网页中的分享功能:

    只要js引入然后设置一下这个值就可以了

    QQ分享文档地址:http://open.mobile.qq.com/api/component/share

    setShareInfo({
                     title  : wxShareConfig.title,
                     summary: wxShareConfig.desc,
                     pic    : wxShareConfig.imgUrl,
                     url    : wxShareConfig.link
                 });

    特别提醒:

    微信分享以及相关的页面api功能调用,必须要先在公众号后台配置安全域名,具体位置参考微信开发文档

  • 相关阅读:
    shell编程
    git
    Flask-SQLAlchemy
    pipreqs
    命令行操作flask
    SQLAlchemy中scoped_session实现线程安全
    打印信息
    键盘事件
    安卓手机APP压力monkey测试
    手机APP功能测试经验分享2016.06.06
  • 原文地址:https://www.cnblogs.com/luoshang/p/7305976.html
Copyright © 2011-2022 走看看