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

      在引用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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的SOD蜜

电脑静音工作,又听不到12306的来票音乐,纠结啊 !但春节前工作多任务重,不能安心工作,就动手做个“无声购票弹窗”工具吧!

当你在办公室里面工作,周围有老板、领导,但又着急买春节的火车票怎么办? 开着电脑声音,出票火车鸣笛声没听到,QQ聊天工具等不和谐的声音放出来了怎么办? 为了不让...

31060
来自专栏落影的专栏

iOS开发笔记(二)

前言 开发做笔记是好习惯,总结分享是巩固记忆。 遇到问题,思考其背后的原因、原理。 AFNetworking 1、progress回调block,不在主线程;...

35070
来自专栏python学习之旅

python appium笔记(二):元素定位

#这里的示例是用android来说明的,xpath应该是通用的,resource-id不太清楚,没配过IOS的环境

25910
来自专栏挖掘大数据

Cobub无码埋点关键技术实现流程(附图)

随着大数据时代的到来,数据采集也已经变的越来越重要。前端埋点作为一个比较成熟的数据接入手段被广泛应用着。目前埋点分为两种方式,有码与无码埋点。有码埋点比较容易理...

27160
来自专栏谈补锅

phonegap + Framework7 之 ios 推送跳转测试

先说说项目情况:使用phonegap创建的ios项目,然后在使用html + css开发网页中又使用了一个框架Framework7(Framework7是一个...

14830
来自专栏落影的专栏

iOS开发笔记(八)---- 键盘、静态库、动画、Crash定位

41890
来自专栏iOS122-移动混合开发研究院

PureLayout,使用纯代码写AutoLayout

? ? ? ? ? ? 为iOS和OS X的自动布局最终的API -- 令人印象深刻的简单,非常强大。 PureLayout延伸的UIView /NSView...

32570
来自专栏码生

ReactNative 面试题

今天有一个 ReactNative 的面试。 时间紧迫,临时写了几个问题,初级面试问题。 都是关键字

98930
来自专栏潇涧技术专栏

Mou and StackEdit and Mathjax

本文记录使用Mou和Stackedit中出现的一些问题,使其能够正常渲染带数学公式的文章

10410
来自专栏流柯技术学院

用Fiddler模拟低速网络环境

但当有人反应说「你的网页好慢」 甚至当网路速度慢,会造成你的网页跳出什么啊哩不哒的bug时要如何重现呢?

14620

扫码关注云+社区

领取腾讯云代金券