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;
    }

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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