精华内容
下载资源
问答
  • jquery 网页分享功能实现

    热门讨论 2011-03-14 19:19:26
    轻松实现网页分享到QQ空间,人人网,百度,开心网等知名网站
  • web-view嵌入网页分享,有二种分享情况 1、小程序分享出当前打开的页面 2、部分页面要求,分享指定页面,而不是当前的页面 以下是代码部分 一、web-view内嵌公众号网页中添加代码 1.引入js <script type=...

    web-view嵌入网页分享,有二种分享情况

               1、小程序分享出当前打开的页面
               2、部分页面要求,分享指定页面,而不是当前的页面

    以下是代码部分

    一、web-view内嵌公众号网页中添加代码

    1.引入js

    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    2.跳转到小程序中页面----在 分享页面是指定页面,而不是分享当前页面的网页中 加入

    var isMiniprogram = false
    // 判断是否是小程序打开
    wx.miniProgram.getEnv((res) => {
         if (res.miniprogram) {//在小程序中
            isMiniprogram = true
         }
    });
    var url=要打开的网页链接url
     
    // 是小程序打开,并且不是小程序已经重新加载过的网址--避免死循环
    if (isMiniprogram && this.$route.query.platform != "miniprogram") {
        url = encodeURIComponent(url);  // 注意需要urlencode
        // 跳转到小程序页面,并在小程序中打开url页
        // 注意要使用wx.miniProgram.redirectTo,其它方法试了不行
        wx.miniProgram.redirectTo({url: '/pages/index/index?return_url='+url+'&share_url=要分享的链接(当要分享的页面不是要打开的页面时使用)&share_title=要分享标题' })

    // 非小程序打开正常跳转
    else {
        window.location.href=url;
    }
    二、小程序中代码处理

    1、index.wxml中代码

        src后加#wechat_redirect,是为了解决:在iOS中JSSDK接口调用无响应的情况

    <!--index.wxml -->
    <view class="container">
      <web-view src="{{web_src}}#wechat_redirect" />
    </view>
    2、index.js中代码

    //获取应用实例
    const app = getApp()
     
    Page({
      data: {
        web_src:'', // 嵌入的网址
        sharetitle:'', // 指定分享的标题
        share_src:'',  // 指定分享的网址
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onLoad: function (options) {
        // 指定分享页面,即分享页,非当前页时
        if (options.return_url) {
          var web_url = decodeURIComponent(options.return_url);
          // 网址中加参数标记是小程序重新载入的
          web_url += web_url.indexOf('?') == -1 ? '?' : '&';
          web_url += 'platform=miniprogram';
     
          var share_url = decodeURIComponent(options.share_url);
        } else {
          var web_url = '网站首页'
          var share_url = web_url;
        }
        
        this.setData({
          web_src: web_url,
          share_src: share_url,
          sharetitle: options.sharetitle ? options.sharetitle : '',
        }, function () {
     
        });
      },
      // 分享
      onShareAppMessage(options) {
        var that = this
        var share_src = that.data.share_src
        // 分享标题-有指定分享标题时就使用指定的,没有使用默认的
        var title = that.data.sharetitle ? that.data.sharetitle : that.data.title;
     
        // 当嵌入网址是重新载入时,更新分享链接为当前网址
        if (options.webViewUrl.indexOf('miniprogram') == -1) {
          share_src = options.webViewUrl
          title = that.data.title;
        }
        var path = '/pages/share/share?return_url=' + encodeURIComponent(share_src);
     
        return {
          title: title,
          path: path,
          success: function (res) {
          }
        }
      },
    })
     

    展开全文
  • web端 网页分享功能实现

    千次阅读 2019-04-24 11:29:19
    思路web端 网页分享功能实现。 我们看微信的分享开发者文档,可以知道使用微信JS-SDK可以实现网页在微信里的分享。 微信JS-SDK说明文档 也就是说 在微信浏览器中打开的网页 才能调用 该分享功能。 但是我们...

    思路
    web端 网页端分享功能的实现

    我们看微信的分享开发者文档,可以知道使用微信JS-SDK可以实现网页在微信里的分享。

    微信JS-SDK说明文档

    也就是说 在微信浏览器中打开的网页 才能调用 该分享功能。

    但是我们是PC端打开的web,网页。怎么实现分享呢。

    因为微信现在已经屏蔽了来自外部的分享链接。

    所以我们的思路 点击分享 按钮后 弹出一个 网页 或者 我们要分享的网页的 二维码

    提示用户使用微信扫描。

    扫描后即会自动在微信里打开该网页了。

    用户就能用 微信内部的分享功能了。

    实现方法
    根据思路 我们要实现 用户点击按钮后 弹出一个带有分享网址信息的二维码。

     

    实现方法有两种:

    方式一
    1. 自己实现点击后弹出div,div上显示二维码图片 二维码图片用谷歌二维码api生成 img src=“” http://chart.apis.google.com/chart?cht=qr&chs=104x104&chld=L|0&chl=http://www.baidu.com

    通过这样的链接可以生成一个二维码

    分析下链接参数:https://chart.googleapis.com/chart? 这是Google Chart API的头部,直接照抄就好了~&cht=qr 这是说图表类型为qr也就是二维码。

    &chs=104×104这是说生成图片尺寸为104×104

    &chld=L|0 L代表默认纠错水平; 0代表二维码边界空白大小,可自行调节。

    &chl=XXXX 这是二维码内容,也就是解码后看到的信息。

    PS:现在谷歌api用不了的话,可以选用其它二维码api,

    列举几个如下:

    一、联图
    API接口地址:http://qr.liantu.com/api.php

    调用方法:http://qr.liantu.com/api.php?text=http://www.baidu.com

    <img title="本文二维码,手机扫一扫,精彩随身带!" style="float:right;cursor:pointer" src="http://qr.liantu.com/api.php?w=68&m=0&text=http://www.baidu.com" alt="百度首页" width="68" height="68"/>

    参数引用
    例子:http://qr.liantu.com/api.php?&bg=ffffff&fg=cc0000&text=x

    参数 描述 赋值

    例子bg 背景颜色 bg=颜色代码,例如:bg=fffffffg

    前景颜色 fg=颜色代码,例如:fg=cc0000gc

    渐变颜色 gc=颜色代码,例如:gc=cc00000el

    纠错等级 el可用值:h\q\m\l,例如:el=hw

    尺寸大小w=数值(像素),例如:w=300m

    静区(外边距)m=数值(像素),例如:m=30

    pt 定位点颜色(外框) pt=颜色代码,例如:pt=00ff00

    inpt 定位点颜色(内点) inpt=颜色代码,例如:inpt=000000

    logo logo图片 logo=图片地址,例如:logo=http://www.liantu.com/images/2013/sample.jpg

    二、JiaThis 
    API接口地址:http://s.jiathis.com/qrcode.php

    调用方法:http://s.jiathis.com/qrcode.php?url=http://www.baidu.com 

    三、快拍 
    API接口地址:http://api.kuaipai.cn/qr

    调用方法:http://api.kuaipai.cn/qr?chl=http://www.baidu.com

    方式二
    使用分享平台的插件。比如ShareSDK 以及很多网站等都在使用的JiaThis等 。

    http://www.jiathis.com/

    使用方法:根据情况选用代码块即可。方式二封装了方式一的思路。

    示例

    现在我们用jiathis的代码为例(保存为html可用):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>   
        <title>微信</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">    
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <!--
        <link rel="stylesheet" type="text/css" href="styles.css">
        -->
      </head>
      <script "text/javascript"> 
    var jiathis_config = { 
        url: "http://www.baidu.com", 
        title: "百度主页分享", 
        summary:"我们试试分享百度主页!" 
    } 
    </script> 
      
      <body>
          
            <span style="font-family: 'Microsoft YaHei', arial, tahoma, 宋体, sans-serif;"><div id="ckepop"></span>  
    <span class="jiathis_txt">分享到:</span>  
    <a class="jiathis_button_weixin">微信</a>   
    <a href="http://www.jiathis.com/share"  class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a>  
    <a class="jiathis_counter_style"></a> </div>   
    <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1" charset="utf-8"></script>  
    <script src="http://v2.jiathis.com/code/jiathis_r.js?move=0"></script> 
    </div>  
                <h1>分享到微信测试</h1>           
      </body>
    </html>

     

    展开全文
  • 使用百度分享api实现网页分享功能

    万次阅读 2018-08-08 10:01:02
    然后我们实现一个简易的分享功能: window._bd_share_config = {  "common" : {  "bdText" : '这是分享的标题',  "bdComment" : '我是通用分享设置,会出现在发送给QQ好友里的描述',  "bdPic" : ...

    百度官方文档:http://share.baidu.com/code/advance#toid

    线上demo:https://my.weblf.cn/xly/demo/web_share.html

    首先先引入外部文件:

    with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];

    这段代码会自动加载一段js与css。

    然后你需要有dom树,

    <div class="bdsharebuttonbox" data-tag="share_1">
    	<a class="bds_mshare" data-cmd="mshare"></a>
    	<a class="bds_qzone" data-cmd="qzone" href="#"></a>
    	<a class="bds_tsina" data-cmd="tsina"></a>
    	<a class="bds_baidu" data-cmd="baidu"></a>
    	<a class="bds_renren" data-cmd="renren"></a>
    	<a class="bds_tqq" data-cmd="tqq"></a>
    	<a class="bds_more" data-cmd="more">更多</a>
    	<a class="bds_count" data-cmd="count"></a>
    </div>

    这里的a标签不用写地址。

    然后我们实现一个简易的分享功能:

    window._bd_share_config = {
                      "common" : {
                       "bdText" : '这是分享的标题',
                       "bdComment" : '我是通用分享设置,会出现在发送给QQ好友里的描述',
                       "bdPic" : "http://test.miniwangdai.com/public/images/invite/wechat.png",//分享的图像地址
                       "bdStyle" : "0",//按钮样式
                       "bdSize" : "32",//按钮大小
                       "bdUrl" : 'https://www.baidu.com',//分享的地址
                       "bdDesc":'给你的好友留一句话吧',
                      },
                      "share" : {},
                    };

    这样最简单的分享功能就做好了。

    效果:

     

     

     

     

     

    展开全文
  • 网页分享功能实现代码

    千次阅读 2015-05-15 09:48:04
    分享到腾讯朋友" charset="400-03-19" id="s_pengyou" href=http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&url=你的网站地址&title=%标题 target="_blank"> src=...
    <body>
    <a title="转发至QQ空间" charset="400-03-8" id="s_qq"
    href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=你的网站地址"
    target="_blank"><img
    src="http://static.youku.com/v1.0.0691/v/img/ico_Qzone.gif" /></a>
    <a title="转发至人人网" charset="400-03-7" id="s_renren"
    href=http://share.renren.com/share/buttonshare.do?link=你的网站地址&title=标题
    target="_blank"><img
    src="http://static.youku.com/v1.0.0691/v/img/ico_renren.gif" /></a>
    <a title="转发至新浪微博" charset="400-03-10" id="s_sina"
    href="http://v.t.sina.com.cn/share/share.php?appkey=2684493555&url=你的网站地址&title=Uid=&source=&sourceUrl="
    target="_blank"><img
    src="http://static.youku.com/v1.0.0691/v/img/ico_sina.gif" /></a>
    <a title="分享到腾讯朋友" charset="400-03-19" id="s_pengyou"
    href=http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&url=你的网站地址&title=%标题
    target="_blank"><img
    src="http://static.youku.com/v1.0.0691/v/img/ico_pengyou.png" /></a>
    <a title="推荐到豆瓣" charset="400-03-17" id="s_douban"
    href=http://www.douban.com/recommend/?url=你的网站地址&title=标题
    target="_blank"><img
    src="http://static.youku.com/v1.0.0691/v/img/ico_dou_16x16.png" /></a> <
    <a title="分享至百事渴望公社" charset="400-03-21" id="s_pepsi"
    href="http://www.pepsi.cn/share.html?link=你的网站地址" target="_blank"><img
    src="http://static.youku.com/v1.0.0691/v/img/ico_pepsi.jpg" /></a>


    <!-- JiaThis Button BEGIN -->
    <div id="ckepop">
    <span class="jiathis_txt">分享到:</span> <a class="jiathis_button_weixin">微信</a>
    <a href="http://www.jiathis.com/share"
    class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis"
    target="_blank">更多</a> <a class="jiathis_counter_style"></a>
    </div>
    <script type="text/javascript"
    src="http://v3.jiathis.com/code/jia.js?uid=1" charset="utf-8"></script>
    </div>
    </body>
    </html>
    展开全文
  • 网页一键分享功能实现

    千次阅读 2018-05-14 09:18:51
    一键分享功能实现 &lt;span class="share"&gt;一键分享 &lt;div style="display: none;background:#E9EBEA" class="share_content"&gt; &lt;!-- baidu Button ...
  • 主要为大家详细介绍了java调用微信接口实现网页分享功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 当需要在页面中查找某个关键字时,一是可以通过浏览器的查找功能实现,二是可以通过前端脚本准确查找定位,本文介绍通过jQuery实现的页面内容查找定位的功能,并可扩展显示查找后的相关信息
  • css3仿QQ网页播放器及分享功能实现            标题       /*css样式里面注释符 px像素*/  *{margin:0px;/*外边距*/ padding:0px;/*内边距*/}/* * 通配符 代表所有的标签 */  body{...
  • 微信小程序内嵌网页实现分享功能

    千次阅读 2019-02-24 18:26:25
    ,然后实现所跳转的地址中每个网页都可以分享出去,分享出去的网页打开不再是回到初始化页面,而是分享的页面! 微信提供分享API是一个叫做 onShareAppMessage(options) 的方法 然后管它什么三七二十一的直接ctrl+C...
  • js baidu插件实现网页分享功能

    千次阅读 2013-09-11 10:49:18
    可以在百度分享中免费定制 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http://www.w3.org/1999/xhtml"> ...
  • 下面小编就为大家带来一篇nodeJS实现简单网页爬虫功能的实例(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 网页上facebook分享功能实现

    千次阅读 2014-01-24 15:03:49
    题外话:直接跳到facebook登录页面的分享按钮: ... 其中的u参数为你要分享的链接。t 参数目前还没弄清楚是干什么的。...facebook分享功能实现: 分享页面设定 1.一个链接: 参数是要分享的页面的链接 a styl
  • 本篇文章主要介绍了VueJs单页应用实现微信网页授权及微信分享功能示例,具有一定的参考价值,有兴趣的可以了解一下
  • 调用微信接口实现网页分享功能

    千次阅读 2018-10-24 12:30:51
    // 获取access_token *注意* 经过实际开发测试,微信分享不支持跨域请求,因此获取access_token的请求必须从服务器发起,否则无法获取到access_token所以以下都是服务端操作 微信接口说明参考地址:...
  • 本文原文地址:桌面网页实现分享功能,分享到QQ空间、新浪微博、人人网 在桌面网页上发现好文章时用户往往选择分享给朋友,而这时我们如何实现分享呢,本文列出了分享到:QQ、QQ空间、新浪微博、人人网 的api和...
  • 网页实现快速分享功能

    千次阅读 2016-12-22 11:14:29
    效果图: 在头部script方法中加入以下: window._bd_share_config = { ...分享到QQ空间"> ...分享到新浪微博"> 分享到腾讯微博"> 分享到人人网"> 分享到微信">
  • 网页分享到微信的实现

    万次阅读 2015-07-09 16:12:39
    web端 网页分享功能实现。 我们看微信的分享开发者文档,可以知道使用微信JS-SDK可以实现网页在微信里的分享。 微信JS-SDK说明文档 也就是说 在微信浏览器中打开的网页 才能调用 该分享功能。 但是我们是PC...
  • 网页中文本朗读功能开发实现分享 文本首发我的博客 - https://blog.cdswyda.com/post/2017120914 前几天完成了一个需求,在网页中完成鼠标指向哪里,就用语音读出所指的文本。如果是按钮、链接、文本输入框,则还...
  • 分享到微信朋友圈 × 打开微信,点击底部的“发现”, 使用“扫一扫”即可将网页分享至朋友圈。
  • rt,想问一下大佬们,前端网页能否单独实现这种功能,如果可以,需要用到哪些知识
  • 在实际开发中,无论是做PC端、WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享功能,现在总算完成了,...
  • 起因 最近有一个活动页需要在移动端浏览器分享网页到微信,QQ。虽然每一个浏览器都有分享到微信的能力,但不是每个都提供接口供网页来调用。及时有提供,浏览器暴露出的api也各不相同,而我写Na...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,178
精华内容 871
关键字:

网页分享功能实现