jsp-web端进行QQ和微信的分享

Posted 2020-11-14 itdxiaoming

之前开发了关于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>
function createQrcode(){ //此处生成名片二维码 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; }
接下我们就是调节一下二维码的位置就可以了。
其实还有很多其他的分享，我就不一一介绍了。感兴趣的大家就到网上搜索一下。