精华内容
下载资源
问答
  • web实现分享功能
    千次阅读
    2022-02-21 15:25:01

    背景

    平时自己作网页小游戏的时候,有小伙伴需要把该游戏链接分享给别的朋友,但是每次都从浏览器那复制太麻烦了。

    方案

    我们在页面中提供一个“分享”按钮,当用户点击它时,我们有js实现把链接存到用户的剪切板中。

    实现

    例如,我们要分享的链接是百度一下[http://www.baidu.com]

    1.新加一个输入控件

    var input=document.createElement("input");
    input.type="text";

    2.把链接加入输入控件中

    input.value="http://www.baidu.com";

    3.把新加的输入控件添加至我们的页面

    document.body.appendChild(input);

    4.调用命令选中该输入控件

    input.select();

    5.调用命令执行复制操作

    document.exeComand("copy");

    6.此时我们的复制工作已完成,我们将此多余的输入控件清除

    document.body.removeChild(input);

    7.大功告成,当用户点击此按钮时,链接就会复制到其剪切板中

    更多相关内容
  • 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>

     

    展开全文
  • 零成本实现Web功能自动化测试--基于Eclipse+Python+Selenium自动化测试技术分享 零成本实现Web功能自动化测试 基于Eclipse+Python+Selenium自动化测试技术
  • H5网页实现微信分享功能

    千次阅读 2021-07-06 01:20:04
    H5网页实现微信分享功能一,首先在公众号管理后台“公众号设置”的“功能设置”里填写JS接口安全域名,域名需要通过ICP备案,没有备案域名可以用SAE、BAE等平台。此外,自定义分享功能需要通过微信认证才能使用,...

    H5网页实现微信分享功能

    一,首先在公众号管理后台“公众号设置”的“功能设置”里填写JS接口安全域名,域名需要通过ICP备案,没有备案域名可以用SAE、BAE等平台。此外,自定义分享功能需要通过微信认证才能使用,没有认证的可以跟关系好的朋友借用权限,在他的JS接口安全域名设置这里填上你的域名和共享同一个开发者ID。

    二,在需要调用JS接口的页面引入微信JSSDK的JS文件 。这个文件在需要分享的页面是必须要引用的,单独特别重申一下,其他方面请阅读官方文档。

    /*

    * 注意:

    * 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

    * 2. 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。

    * 3. 常见问题及完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

    *

    * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决,如仍未能解决可通过以下渠道反馈:

    * 邮箱地址:weixin-open@qq.com

    * 邮件主题:【微信JS-SDK反馈】具体问题

    * 邮件内容说明:用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。

    */

    $(function() {

    var url = location.href.split('#')[0];

    //alert(url);

    $.ajax({

    url : "wap_sign_signature.htm",

    data : {

    "url" : url

    },

    dataType : "json",

    timeout : 5000,

    error : function(XMLHttpRequest, textStatus, errorThrown) {

    if (textStatus == "timeout") { // 请求超时

    } else {

    }

    },

    success : function(data, textStatus) {

    if (textStatus == "success") { // 请求成功

    //alert(data.nonceStr);

    //alert(data.timestamp);

    //alert(data.signature);

    wx.config({

    debug : false,

    appId : 'wxc4cf8e62667f92ea',

    timestamp : data.timestamp,

    nonceStr : data.nonceStr,

    signature : data.signature,

    jsApiList : [ 'onMenuShareAppMessage',

    'onMenuShareTimeline' ]

    });

    }

    }

    });

    });

    /*

    * 注意:

    * 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

    * 2. 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。

    * 3. 完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

    *

    * 如有问题请通过以下渠道反馈:

    * 邮箱地址:weixin-open@qq.com

    * 邮件主题:【微信JS-SDK反馈】具体问题

    * 邮件内容说明:用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。

    */

    // 发送给朋友并返回结果

    /* wx.checkJsApi({

    jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'],

    success: function(res) {

    alert(reg);

    }})

    // 以键值对的形式返回,可用的api值true,不可用为false// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}});

    }) */

    wx.ready(function() {

    /* wx.checkJsApi({

    jsApiList: ['onMenuShareAppMessage'],

    success:function(res){

    alert(res.checkResult.chooseImage);

    }

    }) ; */

    var title = "魔法妈咪学院入学啦!好妈咪快进来!";

    var myurl = "http://diy-haier.highset.cn/index.jsp";

    //分享给朋友

    wx.onMenuShareAppMessage({

    title : title, // 分享标题

    desc : '海尔定制母婴家电,让你魔法加身,搞定养娃的大问题!', // 分享描述

    link : myurl, // 分享链接

    imgUrl : 'http://diy-haier.highset.cn/fx.jpg', // 分享图标

    type : 'link', // 分享类型,music、video或link,不填默认为link

    success : function() {

    // 用户确认分享后执行的回调函数

    },

    cancel : function() {

    // 用户取消分享后执行的回调函数

    }

    });

    wx.onMenuShareTimeline({

    title : title, // 分享标题

    link : myurl, // 分享链接

    imgUrl : 'http://diy-haier.highset.cn/fx.jpg', // 分享图标

    success : function() {

    // 用户确认分享后执行的回调函数

    },

    cancel : function() {

    // 用户取消分享后执行的回调函数

    }

    });

    });

    wx.error(function(res) {

    alert(res.errMsg);

    });

    三、需要一个提供appid的token认证的服务,

    package cn.com.highset.controller;

    import java.util.Map;

    import javax.servlet.http.HttpServletRequest;

    import javax.servlet.http.HttpServletResponse;

    import org.springframework.stereotype.Controller;

    import org.springframework.web.bind.annotation.RequestMapping;

    import org.springframework.web.bind.annotation.RequestMethod;

    import org.springframework.web.bind.annotation.ResponseBody;

    import cn.com.highset.weixin.util.Constants;

    import cn.com.highset.weixin.util.JS_Sign;

    import cn.com.sunnet.wx.api.WeiXinUtil;

    @Controller

    public class WeixinController {

    /**

    * 获取微信签名

    *

    */

    @RequestMapping(value = "wap_sign_signature.htm", method = {

    RequestMethod.GET, RequestMethod.POST })

    @ResponseBody

    public Map WapSignSignatureAction(String url,

    HttpServletRequest request, HttpServletResponse response)

    throws Exception {

    String accesstoken = (String) request.getSession().getAttribute(

    "accesstoken_session");

    if (accesstoken == null || "".equals(accesstoken)) {

    WeiXinUtil util = new WeiXinUtil(Constants.APPID,

    Constants.AppSecret);

    accesstoken = util.getAccessToken();

    request.getSession().setAttribute("accesstoken_session",

    accesstoken);

    request.getSession().setMaxInactiveInterval(7200);

    }

    Map js_data = JS_Sign.getJSSignMapResult(accesstoken,

    url, request);

    return js_data;

    }

    }

    详细代码请参考该项目>>传送门

    展开全文
  • 一种模拟Web应用实现示例功能的方法装置系统 pdf整理.zip
  • 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) {
          }
        }
      },
    })
     

    展开全文
  • java web实现简单聊天室

    千次阅读 2021-03-15 23:13:54
    目标servlet、jsp实现简单聊天室,用户通过浏览器登录后进入聊天室,可发送消息进行群聊,点击聊天信息框中的用户名可实现拍一拍功能。基础知识数据的存取 setAttribute / getAttributerequest请求对象 :有效时间短...
  • <web-view src="https://www.meishahui.com/wap/index.html" bindmessage="h5PostMessage"></web-view>
  • java web实现简单留言板功能

    千次阅读 2021-02-12 16:31:18
    本文实例为大家分享了java web实现简单留言板的具体代码,供大家参考,具体内容如下一、目标用户可以登录并记住密码进入留言板,添加留言,点击留言列表中的标题可显示该条留言全部内容。二、相关知识1、使用Cookie...
  • 欢迎添加微信互相交流学习哦! ... 音乐分享网站的设计与实现 ...随着社会的发展时代的前进,IT行业的发展也是日新月异,对人类的生产和生活方式...本文阐述了音乐分享网站的设计与实现,本系统采用Microsoft Visual S..
  • H5网页实现微信分享分享朋友圈功能,网上的代码基本上都过期了,特基于最新的jweixin-1.6.0版本的微信分享实现,以作备忘。 1.微信分享文档及配置 1.1微信分享官网文档 地址...
  • Vue中使用js-web-screen-shot插件实现截屏功能

    千次阅读 热门讨论 2022-04-28 14:08:38
    最近有个需求,要求类似微信、扣扣实现屏幕截屏功能,在此,使用vue插件实现了此功能,记录如下: 安装截屏插件: npm install js-web-screen-shot --save 页面引入: import ScreenShort from "js-web-screen-shot...
  • QQ好友,QQ空间,微博分享实现起来都是差不多的,就是请求地址需要改一下,参数基本都是一样的。 分享参数信息 /*获取当前网页链接,分享的链接*/ var url = window.location.href; var desc = "分享描述"; var ...
  • 这里我使用了web-view组件来模拟分享功能实现思路: 1.通过WebView组件加载页面。 2.页面中接受必要参数,发送请求。最后将页面挂载到服务器上。 3.点击分享按钮,复制页面网络地址,手动粘贴分享到各个平台...
  • webApp如何实现分享功能(微信端)

    千次阅读 2017-05-27 09:18:20
    webApp实现分享功能首先,在微信的右上角公众号名称->功能设置->js接口安全域名首先引入:微信接口js,http://res.wx.qq.com/open/js/jweixin-1.0.0.js其次,对分享进行一个配置:wx.config({ debug: true, appId:...
  • 一分钟让你实现Android微信分享功能

    千次阅读 2020-09-10 14:36:10
    Android实现微信分享功能(手把手教你实现,让你迅速完成产品经理分配的任务) 1,应公司业务需求需要给APP加一个微信分享功能,首先去微信开放平台注册一下点击进入获取APPID,话不多说上代码。 2,首先在自己的...
  • VS2010开发,MVC3架构。...通过调用微信官方接口实现获取openid,和分享好友功能。底层获取signature和jsapi_ticket,并在服务端进行缓存AccessToken和jsapi_ticket。 注意:请按照index页面上的说明配置。
  • H5页面内实现分享给微信好友功能

    千次阅读 2021-07-06 10:42:31
    实现功能使用JS-SDK:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62 二、在微信公众平台 -- “公众号设置”的“功能设置”里填写“JS接口安全域名”。 三、引入JS文件 四、...
  • 今天分享一下从搭建web服务器,到向服务器发送图片,以及加载图片的整体实现。 因为是Demo演示,所以尽可能的简单、详细且实用,有什么错误敬请指正。 先看一下效果图: 文章参考:Unity向Web服务器上传和下载图片 ...
  • Python Web开发(七):登录实现功能测试

    千次阅读 多人点赞 2022-07-11 19:44:56
    Python Web开发(七):登录实现功能测试
  • 实现H5页面微信分享功能

    千次阅读 2020-11-12 17:27:42
    实现H5页面微信分享功能 一.通过微信打开的H5页面实现微信分享功能 首先在公众号管理后台“公众号设置”的“功能设置”里填写JS接口安全域名,域名需要通过ICP备案,没有备案域名可以用SAE、BAE等平台。此外,...
  • 微信小程序内嵌网页实现分享功能

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

    千次阅读 2020-08-21 03:40:00
    Web实现全景图的交互展示不需要学习其他知识,小白也能实现全景图AR展示一、webVR全景图多种方案实现(aframe,Krpano,three,jquery-vrview等等)二、用krpano之前的一些知识准备三、krpano的购买、下载、注册四、...
  • web网页动态分享facebook和twitter

    千次阅读 热门讨论 2020-07-08 14:40:00
    介绍 facebook分享 http://www.facebook.com/sharer.php?t=${text}u=encodeURIComponent('静态html') twitter分享 ...原理,通过调用第三方的分享地址,第三方回调你传的url,解析里面的meta信息,来显......
  • Python实现简单的web服务器

    千次阅读 2021-09-11 14:29:45
    我们都知道,我们可以通过Pyhton的网络编程实现C/S(Server-Client)端双向通信,不仅如此,我们还可以使用Python编程将数据信息发送至浏览器web页面进行数据信息展示,具体操作如下: 1)使用socket套接字开启服务器...
  • Web前端开发作为前端技术的重要组成,一直占据着重要的地位,整个IT行业内有大量的前端开发从业者,随着移动互联网、大数据和人工智能的发展,目前前端的知识体系也在逐渐丰富...今天我就为你详细解读他们各自都实现...
  • java web 网站,实现网页直接上传文件,强悍支持断点下载功能, 今天公司,做项目的时候突然客户需要,在页面实现上传文件,并且还得支持断点续传的功能,郁闷啊,只得花时间去弄了,一般现在网上说的都是用FTP的...
  • 那本篇将介绍WEB组态的基本功能,及实现它运用了哪些技术。在这个技术快餐时代,肯定是站在巨人的肩旁上,才能更快的实现目标;所以小编也用了互联网WEB前端的一些主流框架。能一目了然的概括功能和技术不。安排, ...
  • 十分愿意与大家分享共同学习。欢迎批评指正! 作者:小吴爱编程 链接:https://juejin.cn/post/6955752139729666078 来源:稀土掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

空空如也

空空如也

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

web实现分享功能