zoukankan      html  css  js  c++  java
  • 手机浏览器实现分享给好友或是朋友圈 斧头帮

    话不多说,上代码.注意:只支持UC浏览器和QQ浏览器.电脑测试的时候可以下载手机模拟器(玩儿手游的那种就OK),然后下载浏览器的微信后,打开浏览器输入:10.0.2.2:端口号/具体的页面地址.安卓浏览器的本地地址是10.0.2.2,PC端的事127.0.0.1.所以在这里要输入10.0.2.2

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
    + path + "/";
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Pragrma", "no-cache");
    response.setDateHeader("Expires", 0);
    %>
    <html>
    <head>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="front/css/common.css" />
    <link rel="stylesheet" href="front/css/header.css" />
    <link rel="stylesheet" href="front/css/dr-info.css" />
    <script src="front/js/jquery.min.js"></script>
    <script src="front/js/lunbo.js"></script>
    <script src="front/js/mshare.js"></script>
    <script src="static/js/main.js"></script>
    </head>
    <body>
    <button data-mshare="0">点击弹出原生分享面板</button> 
    <button data-mshare="1">点击触发朋友圈分享</button> 
    <button data-mshare="2">点击触发发送给微信朋友</button> 
    <script> 
    var mshare = new mShare({ 
    title: '百度首页', 
    url: 'www.baidu.com', 
    desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.', 
    img: 'http://placehold.it/150x150' 
    }); 
    $('button').click(function () { 
    // 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接弹出原生 
    mshare.init(+$(this).data('mshare')); 
    }); 
    </script> 
    </body>
    </html>
    
    下面是js:
    
    
    
    /** 
    * 此插件主要作用是在UC和QQ两个主流浏览器 
    * 上面触发微信分享到朋友圈或发送给朋友的功能 
    */ 
    'use strict'; 
    var UA = navigator.appVersion; 
    
    /** 
    * 是否是 UC 浏览器 
    */ 
    var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0; 
    
    /** 
    * 判断 qq 浏览器 
    * 然而qq浏览器分高低版本 
    * 2 代表高版本 
    * 1 代表低版本 
    */ 
    var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0; 
    
    /** 
    * 是否是微信 
    */ 
    var wx = /micromessenger/i.test(UA); 
    
    /** 
    * 浏览器版本 
    */ 
    var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0; 
    var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0; 
    
    /** 
    * 获取操作系统信息 iPhone(1) Android(2) 
    */ 
    var os = (function () { 
    var ua = navigator.userAgent; 
    
    if (/iphone|ipod/i.test(ua)) { 
    return 1; 
    } else if (/android/i.test(ua)) { 
    return 2; 
    } else { 
    return 0; 
    } 
    }()); 
    
    /** 
    * qq浏览器下面 是否加载好了相应的api文件 
    */ 
    var qqBridgeLoaded = false; 
    
    // 进一步细化版本和平台判断 
    if ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) { 
    qq = 0; 
    } else { 
    if (qq && qqVs < 5.4 && os == 2) { 
    qq = 1; 
    } else { 
    if (uc && ((ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2))) { 
    uc = 0; 
    } 
    } 
    } 
    
    /** 
    * qq浏览器下面 根据不同版本 加载对应的bridge 
    * @method loadqqApi 
    * @param {Function} cb 回调函数 
    */ 
    function loadqqApi(cb) { 
    // qq == 0 
    if (!qq) { 
    return cb && cb(); 
    } 
    
    var script = document.createElement('script'); 
    script.src = (+qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share'; 
    
    /** 
    * 需要等加载过 qq 的 bridge 脚本之后 
    * 再去初始化分享组件 
    */ 
    script.onload = function () { 
    cb && cb(); 
    }; 
    
    document.body.appendChild(script); 
    } 
    
    
    /** 
    * UC浏览器分享 
    * @method ucShare 
    */ 
    function ucShare(config) { 
    // ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID'] 
    // 关于platform 
    // ios: kWeixin || kWeixinFriend; 
    // android: WechatFriends || WechatTimeline 
    // uc 分享会直接使用截图 
    
    var platform = ''; 
    var shareInfo = null; 
    
    // 指定了分享类型 
    if (config.type) { 
    if (os == 2) { 
    platform = config.type == 1 ? 'WechatTimeline' : 'WechatFriends'; 
    } else if (os == 1) { 
    platform = config.type == 1 ? 'kWeixinFriend' : 'kWeixin'; 
    } 
    } 
    
    shareInfo = [config.title, config.desc, config.url, platform, '', '', '']; 
    
    // android 
    if (window.ucweb) { 
    ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo); 
    return; 
    } 
    
    if (window.ucbrowser) { 
    ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo); 
    return; 
    } 
    } 
    
    
    /** 
    * qq 浏览器分享函数 
    * @method qqShare 
    */ 
    function qqShare(config) { 
    var type = config.type; 
    
    //微信好友 1, 微信朋友圈 8 
    type = type ? ((type == 1) ? 8 : 1) : ''; 
    
    var share = function () { 
    var shareInfo = { 
    'url': config.url, 
    'title': config.title, 
    'description': config.desc, 
    'img_url': config.img, 
    'img_title': config.title, 
    'to_app': type, 
    'cus_txt': '' 
    }; 
    
    if (window.browser) { 
    browser.app && browser.app.share(shareInfo); 
    } else if (window.qb) { 
    qb.share && qb.share(shareInfo); 
    } 
    }; 
    
    if (qqBridgeLoaded) { 
    share(); 
    } else { 
    loadqqApi(share); 
    } 
    } 
    
    /** 
    * 对外暴露的接口函数 
    * @method mShare 
    * @param {Object} config 配置对象 
    */ 
    function mShare(config) { 
    this.config = config; 
    
    this.init = function (type) { 
    if (typeof type != 'undefined') this.config.type = type; 
    
    try { 
    if (uc) { 
    ucShare(this.config); 
    } else if (qq && !wx) { 
    qqShare(this.config); 
    } 
    } catch (e) {} 
    } 
    } 
    
    // 预加载 qq bridge 
    loadqqApi(function () { 
    qqBridgeLoaded = true; 
    }); 
    
    if (typeof module === 'object' && module.exports) { 
    module.exports = mShare; 
    } else { 
    window.mShare = mShare; 
    }
  • 相关阅读:
    use paramiko to connect remote server and execute command
    protect golang source code
    adjust jedi vim to python2 and python3
    install vim plugin local file offline
    add swap file if you only have 1G RAM
    datatables hyperlink in td
    django rest framework custom json format
    【JAVA基础】网络编程
    【JAVA基础】多线程
    【JAVA基础】String类的概述和使用
  • 原文地址:https://www.cnblogs.com/guanjunhui/p/8694562.html
Copyright © 2011-2022 走看看