精华内容

下载资源

问答

我要提问

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.大功告成，当用户点击此按钮时，链接就会复制到其剪切板中
html javascript

更多相关内容
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">
    
  </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自动化测试技术分享
2022-04-15 13:20:41

零成本实现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
2022-05-07 07:07:04

一种模拟Web应用实现示例功能的方法装置系统 pdf整理.zip

收起
微信小程序web-view内嵌公众号网页分享功能实现
千次阅读 2020-03-16 16:06:13

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接口调用无响应的情况


<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请求对象：有效时间短...

收起
用webview内嵌h5页面，webviw实现分享微信支付功能 , h5传参跳转web-view 微信小程序
千次阅读 多人点赞 2020-12-01 20:28:34

<web-view src="https://www.meishahui.com/wap/index.html" bindmessage="h5PostMessage"></web-view>

收起

webview
java web实现简单留言板功能
千次阅读 2021-02-12 16:31:18

本文实例为大家分享了java web实现简单留言板的具体代码，供大家参考，具体内容如下一、目标用户可以登录并记住密码进入留言板，添加留言，点击留言列表中的标题可显示该条留言全部内容。二、相关知识1、使用Cookie...

收起

java留言功能
基于web的音乐分享网站的设计与实现
千次阅读 2021-03-17 21:27:45

欢迎添加微信互相交流学习哦！ ... 音乐分享网站的设计与实现 ...随着社会的发展时代的前进，IT行业的发展也是日新月异，对人类的生产和生活方式...本文阐述了音乐分享网站的设计与实现，本系统采用Microsoft Visual S..

收起

asp.net
H5网页实现微信分享，分享朋友圈功能（分享带图片，附源码）
万次阅读 多人点赞 2021-08-14 18:33:32

H5网页实现微信分享，分享朋友圈功能，网上的代码基本上都过期了，特基于最新的jweixin-1.6.0版本的微信分享实现，以作备忘。 1.微信分享文档及配置 1.1微信分享官网文档地址...

收起

微信分享 h5微信分享 h5分享朋友圈
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...

收起

javascript
Web网页如何实现QQ好友，QQ空间，微博分享
千次阅读 2019-11-04 22:14:51

QQ好友，QQ空间，微博分享实现起来都是差不多的，就是请求地址需要改一下，参数基本都是一样的。分享参数信息 /*获取当前网页链接，分享的链接*/ var url = window.location.href; var desc = "分享描述"; var ...

收起
学习笔记——uni-app实现简单分享功能
千次阅读 2021-09-27 13:04:52

这里我使用了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，首先在自己的...

收起

java android 移动开发
.NET调用微信JS-SDK实现获取openid和分享功能
热门讨论 2015-07-29 16:54:42

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文件四、...

收起
【Unity3D日常开发】Unity3D中实现向Web服务器上传图片以及下载图片功能
千次阅读 2022-01-07 09:53:11

今天分享一下从搭建web服务器，到向服务器发送图片，以及加载图片的整体实现。因为是Demo演示，所以尽可能的简单、详细且实用，有什么错误敬请指正。先看一下效果图：文章参考：Unity向Web服务器上传和下载图片 ...

收起

unity
Python Web开发（七）：登录实现及功能测试
千次阅读 多人点赞 2022-07-11 19:44:56

Python Web开发（七）：登录实现及功能测试

收起

python django
实现H5页面微信分享功能
千次阅读 2020-11-12 17:27:42

实现H5页面微信分享功能 一.通过微信打开的H5页面实现微信分享功能 首先在公众号管理后台“公众号设置”的“功能设置”里填写JS接口安全域名，域名需要通过ICP备案，没有备案域名可以用SAE、BAE等平台。此外，...

收起

javascript
微信小程序内嵌网页实现分享功能
千次阅读 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
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套接字开启服务器...

收起

python 服务器
解读：Web前端这8大常见技术都能实现哪些功能呢？
千次阅读 2020-01-09 16:30:24

Web前端开发作为前端技术的重要组成，一直占据着重要的地位，整个IT行业内有大量的前端开发从业者，随着移动互联网、大数据和人工智能的发展，目前前端的知识体系也在逐渐丰富...今天我就为你详细解读他们各自都实现...

收起

编程语言 web前端程序员
java web 网站，实现网页直接上传文件，强悍支持断点下载功能
热门讨论 2012-09-17 12:02:17

java web 网站，实现网页直接上传文件，强悍支持断点下载功能，今天公司，做项目的时候突然客户需要，在页面实现上传文件，并且还得支持断点续传的功能，郁闷啊，只得花时间去弄了，一般现在网上说的都是用FTP的...

收起
WEB组态（电力、能源、工业）技术分享 - 功能框架与技术
千次阅读 2021-02-28 11:07:39

那本篇将介绍WEB组态的基本功能，及实现它运用了哪些技术。在这个技术快餐时代，肯定是站在巨人的肩旁上，才能更快的实现目标；所以小编也用了互联网WEB前端的一些主流框架。能一目了然的概括功能和技术不。安排， ...

收起
Java Web实现登录注册（超详细附代码）
千次阅读 2021-12-23 21:41:49

十分愿意与大家分享共同学习。欢迎批评指正! 作者：小吴爱编程链接：https://juejin.cn/post/6955752139729666078 来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

收起

java 后端 kafka 程序人生

1 2 3 4 5 ... 20

收藏数 178,298

精华内容 71,319

热门标签

关键字：

web实现分享功能