h5手机端微信自定义分享

梦里梦外; 2023-06-08 03:24 22阅读 0赞

一、绑定域名

首先要确保微信公众号后台的域名和自己代码里分享链接的域名要保持一致

二、引入微信端js文件

三、根据微信sdk获取微信分享的配置参数：appId、生成签名的时间戳、生成签名的随机串、签名，一般这些参数的获取都是通过后台进行生成的，前端直接获取即可。

// 微信分享
    $.ajax({
    	type : "get",    //请求类型
    	contentType:'application/json',
    	url : '',//请求的 URL地址
    	dataType : "json",//返回的数据类型
    	success:(data)=> {
    		if(data.result_code == 0){
    			console.log(data);
    			var appId=data.jsapiParam.appId; //微信公众号的appId
    			var timestamp = data.jsapiParam.timestamp; //根据js-sdk生成的时间戳
    			var nonceStr = data.jsapiParam.nonceStr; //根据js-sdk生成的随机字符串
    			var signature = data.jsapiParam.signature; //跟局js-sdk生成的签名
                // 微信分享配置函数
                wx.config({
    	            debug: false, // 调试模式
    	            appId: appId, //必填，微信公众号的appId
    	            timestamp: timestamp, // 必填，生成签名的时间戳
    	            nonceStr: nonceStr, // 必填，生成签名的随机串
    	            signature: signature,// 必填，签名
    	            jsApiList: ['onMenuShareAppMessage',
    		            'onMenuShareTimeline',
    		            'onMenuShareWeibo',]// 必填，需要使用的JS接口列表
                });
    		}else{
    			console.log(data.result_message)
    		}
    		
    	},
    	error:function (data) {
    		console.log(data)
    	}
    	
    })

四、通过config接口注入权限验证配置

// 微信分享配置函数
    wx.config({
    	debug: false, // 调试模式
    	appId: appId, //必填，微信公众号的appId
    	timestamp: timestamp, // 必填，生成签名的时间戳
    	nonceStr: nonceStr, // 必填，生成签名的随机串
    	signature: signature,// 必填，签名
    	jsApiList: ['onMenuShareAppMessage',
    		'onMenuShareTimeline',
    		'onMenuShareWeibo',]// 必填，需要使用的JS接口列表
    });

可以通过设置debug:true进行调试，以便完成测试和分享。

五、配置微信分享样式

// 微信分享
    var obj = {
    	title: this.activityData.name, // 分享标题
    	desc: this.activityData.introduce, // 分享描述
    	link:'',	//链接地址
    	imgUrl: this.activityData.imageUrl, // 分享图标
    	success: function () {
    		alert('分享成功')
    	},
    	cancel:function(){
    		alert('取消分享')
    	}
    };

六、微信分享事件（具体的分享途径请查看微信官方文档：[微信公众号开发文档链接][Link 1]）

wx.ready(function () {
    	// 分享给朋友
    	wx.onMenuShareAppMessage(obj);
    	// 分享到朋友圈和qq空间
    	wx.onMenuShareTimeline(obj);
    	// // 分享到微博
    	wx.onMenuShareWeibo(obj);
    })

[Link 1]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html