java版微信分享功能(支持分享给好友/分享到朋友圈)

article/2025/10/15 4:17:51

点击上方[全栈开发者社区]右上角[...][设为星标⭐]

640?

先上官方文档:http://mp.weixin.qq.com/wiki/home/index.html

做之前建议先过遍文档,文档都说的清晰明了。

如果已经看过文档,那我们一起整理下JSSDK的流程步骤: 

绑定域名

        登陆微信公众号,根据下列路径找到添加页面:

        微信公众号 - 公众号设置 - 功能设置 - JS接口安全域名

        添加步骤:

            1.下载txt文件(MP_verify_0HU5eN6Tzfwovxxx.txt),放到项目根目录下;

            2.添加项目访问域名地址,点击保存。在需要调用JS接口的页面引入js文件(页面不支持https的换成http://):

            https://res.wx.qq.com/open/js/jweixin-1.0.0.js

config接口权限验证

wx.config({	debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。	appId: '', // 必填,公众号的唯一标识	timestamp: , // 必填,生成签名的时间戳	nonceStr: '', // 必填,生成签名的随机串	signature: '',// 必填,签名	jsApiList: [] // 必填,需要使用的JS接口列表	
});

 这里着重说下jsApiList参数:

        将要用到的接口用引号形式写进去,逗号隔开('','');

        这里添加的js接口名称要跟下面的wx.ready()里面的接口顺序对应。

         js接口名称见官方文档。

通过ready接口处理成功验证:

wx.ready(function(){	// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。	
});

 备注:

      里面的js接口顺序一定要按照config()接口中的参数jsApiList中的js接口顺序排列。

通过error接口处理失败验证:

wx.error(function(res){	// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。	
});

Over...

    额,当然,只是前端的流程步骤结束了。接下来我们看后台(java)是怎么处理config()接口中需要的那些参数的。

    这里需要用到公众号的几个参数:   appid、secret 。

    直接上后台代码:

public class WeixinShareController extends Controller{	public void index(){	// 微信appid	String appid = "xxx";	// 微信secret	String secret = "xxx";	// 初始化access_token	String access_token = "";	//  获取URL 这里的URL指的是需要分享的那个页面地址,建议这里不要写成固定地址,而是获取当前地址.	String url = getPara("url");	// 创建通过Api获取Token的链接与参数	String requestTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET";	requestTokenUrl = requestTokenUrl.replace("APPID", appid);	requestTokenUrl = requestTokenUrl.replace("SECRET", secret);	JSONObject jsonObjectToken = CommonUtil.httpsRequest(requestTokenUrl, "GET", null);	if(StrKit.notNull(jsonObjectToken)){	// 创建日期赋值为当前日期	createDate = new Date().getTime()/1000;	// 获取Token值	access_token = jsonObjectToken.getString("access_token");	// 获取Token有效期值	expires_in = jsonObjectToken.getLong("expires_in");	}	String requestUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";	requestUrl = requestUrl.replace("ACCESS_TOKEN", access_token);	// 获取凭证	JSONObject jsonObject = CommonUtil.httpsRequest(requestUrl, "GET", null);	if(StrKit.notNull(jsonObject)){	try {	String ticket = jsonObject.getString("ticket");	String noncestr = WebUtils.getRandom(7);	long timestamp = new Date().getTime()/1000;	String param = "jsapi_ticket="+ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;	String signature = DigestUtils.shaHex(param);	WeixinShare weixinShare = new WeixinShare();	weixinShare.setWxNoncestr(noncestr);	weixinShare.setWxTimestamp(timestamp);	weixinShare.setWxSignature(signature);	setAttr("weixinShare",weixinShare);	setAttr("appid",appid);	} catch (Exception e) {	e.printStackTrace();	setAttr("errorMessage","服务器异常!");	}	}	renderJson();	}	
}

前端代码:

    这里建议ur参数不要写成固定地址,用提供的获取当前路径的方法获取,可以保证该js的重用:

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

代码:

$(function(){	var title        = $("#title").val();	var desc      = $("#desc").val();	var name      = $("#program_name").val();	var imgUrl       = $("#imgurl").val();	var path   = $("#path").val();	var url    = location.href.split('#')[0];	var signature,timestamp,noncestr,appid;	/*微信分享*/	$.ajax({	url:path+"/weixinshare",	type:'GET',	data:{	url : url	},	success:function (data) {	signature = data.weixinShare.wx_signature;	timestamp = data.weixinShare.wx_timestamp;	noncestr = data.weixinShare.wx_noncestr;	appid = data.appid;	wx.config({	debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。	appId: appid, // 必填,公众号的唯一标识	timestamp: timestamp, // 必填,生成签名的时间戳	nonceStr: noncestr, // 必填,生成签名的随机串	signature: signature,// 必填,签名	jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填,需要使用的JS接口列表	});	wx.ready(function(){	//分享给朋友	wx.onMenuShareAppMessage({	title: title, // 分享标题	desc: desc, // 分享描述	link: path, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致	imgUrl:imgUrl, // 分享图标s	type: 'link', // 分享类型,music、video或link,不填默认为link	dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空	success: function () {	// 用户确认分享后执行的回调函数	
//                 alert("OK");	},	cancel: function () {	// 用户取消分享后执行的回调函数	
//                 alert("fail");	}	});	//分享给朋友圈	wx.onMenuShareTimeline({	title: title, // 分享标题	link: path, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致	imgUrl: imgUrl, // 分享图标	success: function () {	// 用户确认分享后执行的回调函数	},	});	});	},	error:function(error){	console.log(error);	}	});   	
})

以上就是整个功能的全部代码了。

原文链接:https://blog.csdn.net/IbelieveSmile/article/details/80176563

留言打卡30天,祝贺第一批坚持打卡的小伙伴们满月啦,继续努力!smiley_57.png

觉得本文对你有帮助?请分享给更多人

关注「全栈开发者社区」加星标,提升全栈技能

本公众号会不定期给大家发福利,包括送书、学习资源等,敬请期待吧!

如果感觉推送内容不错,不妨右下角点个在看转发朋友圈或收藏,感谢支持。

好文章,我在看❤️


http://chatgpt.dhexx.cn/article/sZ4RAPAk.shtml

相关文章

Android中实现微信分享的功能

在android开发中微信分享功能还是经常用到的,比如把文字,图片,网页类型,小程序类型的文件等分享给微信好友,朋友圈等。官方文档 那么接下来就来说说如何去实现吧 一.添加依赖 implementation com.tencent.mm.opensdk:…

H5链接分享到微信

在开发中最长遇到的一个需求就是微信分享&#xff0c;那么怎么实现呢&#xff0c;我使用uni-app写的 首先需要一个引导分享的图片 <view v-show"yd" class"boxContent" click"getclose(text)"><image class"yd" src"/s…

微信小程序学习 onShareAppMessage转发分享

最近在做仿抽奖助手小程序&#xff0c;遇上分享的一个问题。抽奖助手分享出来的商品缩略图很清晰且格式更好&#xff0c;而我们分享出来的是页面的默认截图&#xff0c;感觉不好看。其实它这个地方用的是图片&#xff0c;增加一个imageUrl即可。 onShareAppMessage(options) 在…

H5微信分享、自定义微信分享

在一个h5页面添加微信&#xff0c;分享给微信好友、朋友圈、腾讯微博 下面来实现 。 需要&#xff1a; 1、需要一个企业版的微信公众号&#xff08;认证过的&#xff09; 2、一台服务器 企业版的微信公众号原因&#xff1a; 在微信公众平台的接口权限内可以看到&#xff…

使用shareSDK实现微信多图分享到朋友圈Url分享到朋友圈URL分享到好友 问题记录

问题概述 其实第三方分享很早就有了&#xff0c;这个按理说这个应该没什么难度&#xff0c;为啥记录一下呢&#xff0c;因为项目中同时出现了 朋友圈多图分享&#xff08;多张URL集合&#xff09;&#xff0c;朋友圈URL分享&#xff0c;群和个人URL&#xff0c;图片分享。基本…

iOS ShareSDK实现分享——微信分享

最近领导让添加ios 微信分享视频的功能&#xff0c;之前做的只有微信分享本地图片的功能。 查看官网并没有找到答案&#xff0c;后来在其官网论坛中http://bbs.mob.com/thread-20938-1-1.html 这里面发现新版的sdk&#xff08;v3.2.1&#xff09;中才添加的微信分享本地文件&a…

微信分享功能

最近在做手机端页面&#xff0c;需要一个分享功能&#xff0c;其实自身分享是可以的&#xff0c;但是为了分享出的内容丰富&#xff0c;比如缩略图了&#xff0c;描述了等等&#xff0c;如下图所示&#xff1a; 步骤一&#xff1a;绑定域名 先登录微信公众平台进入“公众号…

Android app分享文件到微信

两种实现方案&#xff1a; 1.使用WXFileObject构造分享方法发送到微信&#xff1b; 2.调用系统分享方法&#xff0c;把文件直接发送到微信&#xff1b; 那么下面来分别看看怎么实现&#xff1a; 〇、准备工作 首先&#xff0c;需要在AndroidManifest.xml中配置FileProvider信…

ShareSDK关于微信分享问题

转自&#xff1a;http://www.eoeandroid.com/thread-310281-1-1.html 发现用sharesdk&#xff0c;做其他平台分享很快&#xff1b;如新浪微博、腾讯微博、有道云笔记、开心网、Google等等&#xff0c;几句代码就搞定&#xff1b; 但是微信有点麻烦&#xff0c;下面我把…

uniapp实现录音喊话功能

直接先上代码&#xff1a; const recorderManager uni.getRecorderManager() onShow() {this.test()},methods: {test() {uni.getSetting({success: (res) > {console.log(res.authSetting, res.authSetting[scope.record]);if (res.authSetting[scope.record] false) {…

h5调用android录音,html5网页录音插件Recorder

插件描述&#xff1a;html5 js 录音 mp3 wav ogg webm amr 格式&#xff0c;支持pc和Android、ios部分浏览器、和Hybrid App(提供Android IOS App源码)&#xff0c;微信也是支持的&#xff0c;提供H5版语音通话聊天示例 Recorder用于html5录音 支持大部分已实现getUserMedia的移…

利用RecordRTC.js实现H5录音功能

前言&#xff1a; 最近遇到 要语音转文字 的需求&#xff0c;语音转文字肯定要先搞定录音功能&#xff0c;在网上找了好久没找到具体的 RecordRTC.js 插件的使用方法&#xff0c;最后只能对着 github 上开源代码小试了一下&#xff0c;录音功能好使所以就记录一下叭 一、Reco…

vue录音+js-audio-recorder

小小记录一下项目中用到的录音功能 1.下载插件 npm i js-audio-recorder 2.展示代码 <template><div style"padding: 20px;"><div style"font-size:14px"><h3>录音时长&#xff1a;{{ recorder && recorder.duration.…

html 苹果微信录音js,微信js-sdk 录音功能的示例代码

需求描述 制作一个H5页面&#xff0c;打开之后可以录音&#xff0c;并将录音文件提交至后台 微信录音最长时长为1min 代码如下 // isVoice&#xff1a; 0-未录音 1-录音中 2-录完音 // 点击录音/录音中 按钮展示 点击录音 // isListen // 0-未试听/试听结束 1-试听中 2-暂停试听…

已解决:H5移动端网页实现录音功能,js实现录音功能,包括安卓webview接口也可以使用

遇到一个需求&#xff0c;需要做一个手机网页录音的功能&#xff0c;嵌入到webview中去&#xff0c;用安卓原生录音倒是可以&#xff0c;但是想着尽量去安卓化开发&#xff0c;就想着用纯的js前端代码去实现录音功能。 在 Web 应用程序中&#xff0c;JavaScript 是运行在浏览器…

网页录音时的麦克风权限问题解决

来源 | https://www.html.cn/web/html/19184.html 在我们进行网页制作时可能会遇到需要录音的情况&#xff0c;而在进行网页录音时又有可能会遇到麦克风权限问题导致无法录音&#xff0c;本文就来为大家介绍一下如何解决麦克风权限问题。 在本地中打开的时候&#xff0c;谷歌、…

获取摄像头和麦克风权限_js获取浏览器摄像头和麦克风权限

前言 项目中会使用到摄像头或麦克风设备&#xff0c;这就需要我们获取浏览器的摄像头和麦克风权限&#xff0c;权限是无法通过js操控的&#xff0c;必须由浏览器用户设置。 下面我来告诉大家如何获取浏览器的摄像头或麦克风的权限&#xff0c;使浏览器弹出询问窗口。 一、我们想…

(前端)录音功能实现 js-audio-recorder

1. 创建 import Recorder from js-audio-recorder const parameter {sampleBits: 16, // 采样位数&#xff0c;支持 8 或 16&#xff0c;默认是16sampleRate: 8000, // 采样率&#xff0c;支持 11025、16000、22050、24000、44100、48000&#xff0c;根据浏览器默认值&#x…

Android webview录音权限和音频自动播放

项目背景&#xff1a;我们通过layabox&#xff0c;制作了H5页面&#xff0c;可以在微信中&#xff0c;手机浏览器中使用&#xff0c;现在需要将H5页面集成到Android的APP中。 遇到的问题&#xff1a; 1.遇到的第一个问题&#xff0c;是获取录音权限的问题&#xff0c;我已经给…

html 苹果微信录音js,基于JS开发微信网页录音功能的实例代码

具体代码如下所示&#xff1a; wx.ready(function () { var startRecordflag false var startTime null //btnRecord 为录音按钮dom对象 btnRecord.addEventListener(touchstart, function (event) { event.preventDefault(); startTime newDate().getTime(); // 延时后录音…