微信公众号开发授权和分享模块脚本封装

用户1055830

发布于 2018-05-28 17:43:52

8590

发布于 2018-05-28 17:43:52

文章被收录于专栏：飞扬的花生

在引用jquery和微信JSSDK的基础上封装一个脚本实现大量的H5网页分享授权

1.脚本

/*分享模块*/
var shareData = {
    title: '分享主标题',//分享标题
    desc: '分享副标题',//分享描述
    link: location.href,//分享链接，默认是当前页
    imgUrl: 'http://wx.qqauto.cn/html/2018/1/images/theme1.png'//分享图片,必须绝对路径
};

function WxShare(options) {
    //默认参数       
    shareData = $.extend(shareData, options);
    wx.onMenuShareTimeline({
        title: shareData.title, // 分享标题
        desc: shareData.desc, // 分享描述
        link: shareData.link, // 分享链接
        imgUrl: shareData.imgUrl, // 分享图标
        success: function () {
        },
        cancel: function () {
        }
    });
    wx.onMenuShareAppMessage({
        title: shareData.title, // 分享标题
        desc: shareData.desc, // 分享描述
        link: shareData.link, // 分享链接
        imgUrl: shareData.imgUrl, // 分享图标
        success: function () {
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
}
;

(function ($) {
    var jurl = location.href;
    if (jurl.indexOf('#'))
        jurl = jurl.split('#')[0];
    //jurl = encodeURIComponent(jurl);   

    $.ajax({
        url: '/CommonAPI/JSSDKHelper/15',
        data: { url: jurl },
        async: false,
        success: function (d) {
            if (d && d.success) {
                wx.config({
                    debug: false,
                    appId: d.appId,
                    timestamp: d.timestamp,
                    nonceStr: d.nonceStr,
                    signature: d.signature,
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
                });
                wx.ready(function () {
                    WxShare();
                });
            }
        }
    });
})(jQuery)

/*授权模块*/
var _Mvar = {
    myGroup: '11',
    gid: 479,
    id: 15,
    // gid: 6,
    // id: 13,
    wxNum: "",
    username: "",
    phone: "",
    nickname: "",
    headimgurl: "",
    domain: '',
    data: '',
    msg: '可能是网络原因，请刷新页面重试!',
    cantest: '',
    jsoncallback: '',
    go: 0,
    uid: 0,
    cantest: '',
    wxid: '',
    wxName: '',
    myid: '',
    shareText: '福州万国长城哈弗猜车',
    shareText1: '',
    shareText2: '',
    prize: '万精',
    chance: 0,
    times: 0,
    num: 0,
    isShare: 0,
    loadImg: 'http://wx.qqauto.cn/html/upcoin/power/22/images/img2.png'
};


function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null)
        return unescape(r[2]);
    return null;
}

_Mvar.wxNum = getQueryString("uid");
var hostname = location.hostname;
var myUrl = "http://" + hostname + location.pathname + "?uid=" + _Mvar.wxNum + '&gid=' + _Mvar.gid;
function init2() {
    $.ajax({
        type: "get",
        url: "http://wx.qqauto.cn/CommonApi/OAuth2?id=" + _Mvar.id + "&gid=" + _Mvar.gid + "&myUrl=" + encodeURIComponent(myUrl) + "&_r=" + Math.random(),
        dataType: "json",
        async: false,
        success: function (data) {
            if (data.success == true) {
                _Mvar.wxid = data.wxnum;
                _Mvar.nickname = data.nickname;
                _Mvar.headimgurl = data.headimg;
            } else {
                window.location.href = data.msg;
            }
        },
        timeout: 15000,
        error: function (xhr, type) {
            alert("网络异常，请刷新重试。");
        }
    });
}
var isLocal = hostname && hostname.indexOf('wx.qqauto.cn') > -1;
if (isLocal)
    init2();
else {
    _Mvar.domain = 'http://192.168.5.43:8022',
   _Mvar.cantest = 'can',
   _Mvar.wxid = '',
   _Mvar.jsoncallback = '?jsoncallback=?';
    _Mvar.nickname = '花生';
    _Mvar.gid = 14;
    _Mvar.id = 13;
}

2.创建测试DEMO

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script language="javascript" type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="/Scripts/yhz.js"></script>

</head>
<body>
    <button id="btn1">修改主副标题</button>
    <button id="btn2">修改链接地址Link</button>
</body>
</html>
<script>
    $(function () {
        //修改主副标题
        $("#btn1").click(function () {
            shareData.title = "哈哈哈哈";
            shareData.desc = "嘿嘿";
            WxShare(shareData);
        })
        //修改链接为百度
        $("#btn2").click(function () {
            shareData.link = location.href + "?test=2";
            WxShare(shareData);
        })
    })
</script>

3.分享

ps:引用的层级

  <script src="/Scripts/jquery-1.10.2.js"></script>
    <script language="javascript" type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="/Scripts/yhz.js"></script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-04-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery