H5实现微信分享

1、注册config。(config参数由后端接口提供)
2、info 分享的内容 。(包括链接,标题,图片)
3、debug模式是否开启。
4、处理非微信内部浏览器分享。

function wechatShare(config, info, debug, click) {
	// config 配置分享的参数
	// info 分享的内容
	// debug 调试模式开启 or 关闭
	// click 处理非微信浏览器分享
	
	//分享配置 
	wx.config({
		debug: debug ? debug : false,
		appId: config.appid,
		timestamp: config.timestamp,
		nonceStr: config.nonceStr,
		signature: config.signature,
		jsApiList: [
			'checkJsApi',
			'onMenuShareTimeline',
			'onMenuShareAppMessage',
			'onMenuShareQQ',
			'onMenuShareWeibo',
			'onMenuShareQZone',
			'hideMenuItems',
			'showMenuItems',
			'hideAllNonBaseMenuItem',
			'showAllNonBaseMenuItem',
			'updateAppMessageShareData',
			'updateTimelineShareData'
		]
	});
	//点击后的分享

	if(click) {
		// 处理非微信内部浏览器分享
		
	} else {
		//分享内容
		wx.ready(function() {
			wx.checkJsApi({
			    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'], // 
			    success: function(res) {
			    // 以键值对的形式返回,可用的api值true,不可用为false
			    
			    }
			});
			// 
			//在微信浏览器内的分享
			// 分享到朋友圈
//			wx.onMenuShareTimeline({
//				title: info.title,
//				desc: info.desc,
//				link: info.link,
//				imgUrl: info.imgUrl,
//			}, function(res) {
//				alert("分享朋友圈成功");
//			});
//			// 分享给好友
//			wx.onMenuShareAppMessage({
//				title: info.title,
//				desc: info.desc,
//				link: info.link,
//				imgUrl: info.imgUrl,
//			}, function(res) {
//				alert("分享好友成功");
//			});

			//
			wx.error(function(res) {
				console.log(res.errMsg);
			});
			//
			wx.updateAppMessageShareData({ 
		        title: info.title, // 分享标题
		        desc: info.desc, // 分享描述
		        link: info.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		        imgUrl: info.imgUrl, // 分享图标
		        success: function () {
		          // 设置成功
		        }
		    })
			
			wx.updateTimelineShareData({ 
		        title: info.title, // 分享标题
		        link: info.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		        imgUrl: info.imgUrl, // 分享图标
		        success: function () {
		          // 设置成功
		        }
		    })
		});
	}

}
实现微信浏览器进行H5分享,可以通过以下步骤实现: 1. 引入微信JS-SDK库:在H5页面的<head>标签添加以下代码: ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 这样就可以在页面使用微信的JavaScript API了。 2. 配置微信分享参数:在页面正文添加以下代码: ```html <script> // 通过ajax请求服务器端获取微信分享所需要的参数 $.ajax({ url: 'your_server_url', data: { // 在服务器端生成签名所需要的参数,如当前页面的URL等 }, success: function(response) { // 服务器返回的数据包括签名等信息 wx.config({ debug: false, // 开启调试模式,可在开发阶段进行调试 appId: response.appId, timestamp: response.timestamp, nonceStr: response.nonceStr, signature: response.signature, jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 需要使用的分享接口列表 }); // 配置成功后进行分享 wx.ready(function() { wx.onMenuShareAppMessage({ title: '分享标题', // 分享标题 desc: '分享描述', // 分享描述 link: '分享链接', // 分享链接 imgUrl: '分享图标', // 分享图标 success: function () { // 用户完成分享后的回调函数 }, cancel: function () { // 用户取消分享后的回调函数 } }); // 可以添加更多分享接口... }); }, error: function(xhr, status) { // 处理请求失败的情况 } }); </script> ``` 以上代码首先通过ajax请求服务器端获取微信分享所需要的参数,包括appId、timestamp、nonceStr、signature等。然后通过wx.config方法进行配置,指定需要使用的分享接口。wx.ready方法可以添加多个分享接口的配置,如onMenuShareTimeline等。配置成功后,用户点击分享按钮即可进行分享操作。 以上就是在H5页面实现微信浏览器分享的方法。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值