web端进行QQ和微信的分享

之前开发了关于web页面上关于微信和qq的分享,今天闲来无事给大家分享一下我自己的开发心得。

首先是QQ的分享--->我介绍的是自定义按钮分享到QQ,你可以去QQ分享的开发文档直接引用QQ给的实例QQ分享组件简介

function shareToQQ() {
        var url = "https://connect.qq.com/widget/shareqq/index.html";
        var shareUrl = "http://www.baidu.com";
        var title = "分享标题";
        var summary = "分享显示的内容简介";
        var pics = "图片地址";
        var width = "32";
        var height = "32";
        var allUrl = url + "?url=" + encodeURIComponent(shareUrl) + "&title=" + title + "&summary="
                + summary + "&pics=" + pics + "&width=" + width + "&height="
                + height;
        openNewWin({
            url : allUrl,
            target : "_blank",
        });
    }
接下来我们分析下这段js代码

var url = "https://connect.qq.com/widget/shareqq/index.html";//qq分享的url

var shareUrl = "http://www.baidu.com";//这个url是点击分享内容跳转的链接

var title = "分享标题";//分享后显示的标题

var summary = "分享显示的内容简介";//显示在qq分享界面的简介内容

var pics = "图片地址";//分享到QQ显示的图片

var width = "32";

var height = "32";

后面我就不介绍分享成功的样子了,大家自己调试一下就行了

下面是微信的分享---> 因为微信没有给我们提供相应直接分享的借口,但是微信的自带浏览器有分享功能,所以现在基本上所有的应用做关于微信的分享都是通过微信扫描二维码,然后通过微信自带的的浏览器进行分享。所以微信分享主要是我们页面上将我们要分享的链接生成相应的二维码。

因为jQuery有相应的js生成二维码 ,首先我们先下载jQuery.qrcode.min.js jQuery.qrcode

接下来就是使用js生成二维码图片

首先我们应该新建一个div 用来显示二维码,并把div的id设置成qrcodeid

 <div id="qrcodeid"></div>
    //此处生成名片二维码\
        var url = "http://www.baidu.com";
        var the_text = utf16to8(url);
        //alert(the_text);
        $('#qrcodeid').qrcode({
            width : 140,
            height : 140,
            render : "canvas", //设置渲染方式 table canvas
            typeNumber : -1, //计算模式 
            correctLevel : 0,//纠错等级 
            background : "#ffffff",//背景颜色 
            foreground : "#000000",//前景颜色 
            text : the_text,
        });
    }
    function utf16to8(str) { //解决中文乱码
        var out, i, len, c;
        out = "";
        len = str.length;
        for (i = 0; i < len; i++) {
            c = str.charCodeAt(i);
            if ((c >= 0x0001) && (c <= 0x007F)) {
                out += str.charAt(i);
            } else if (c > 0x07FF) {
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            } else {
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            }
        }
        return out;
    }

接下我们就是调节一下二维码的位置就可以了。
其实还有很多其他的分享,我就不一一介绍了。感兴趣的大家就到网上搜索一下。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容

  • 北京2018年4月1日上午,NBA常规赛勇士客战国王的比赛中,发生了令人痛心不已的一幕。比赛进行到第三节还有41...
    Curry_宇阅读 1,172评论 1 1
  • 先引入JS 文件 this.wxShare() 在created里调用 首先登陆微信公众号 JSSDK使用步骤 步...
    寄鱼予海与你阅读 6,678评论 1 3
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_x阅读 15,968评论 3 119
  • 用到的组件 1、通过CocoaPods安装 2、第三方类库安装 3、第三方服务 友盟社会化分享组件 友盟用户反馈 ...
    SunnyLeong阅读 14,601评论 1 180
  • 每个人的心里,都有那么一座城市,温婉而美好,总是在夜里能够牵扯出许多曾经的往事。那座城市里始终住着一个人...
    月枫林阅读 212评论 0 0