uniapp微信公众号h5的分享好友和分享朋友圈

效果图：

一、使用微信JS-SDK进行分享

1.安装模块依赖

npm install weixin-js-sdk --save

2.引入模块

mian.js引入并全局挂载

// 引入微信js-sdk
import wxjs from 'weixin-js-sdk'
Vue.prototype.$wxjs = wxjs;

3.通过 config 接口注入权限验证配置（需要后端配合）

getShare() {
	let _this = this;
 
	// js-sdk文档中规定，url的格式要求：
	// 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s): '部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分
	var url = location.href.split('#')[0];
	// alert(url);
 
	uni.$u.http.post('/api/xxx/wxshareapi', {
		url: url,
	}).then(res => {
		uni.hideLoading();
		console.log("==获取分享配置==");
		console.log(res);
		var shareConfig = res.data;
 
		_this.$wxjs.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: shareConfig.appid, // 必填，公众号的唯一标识
			timestamp: shareConfig.time, // 必填，生成签名的时间戳
			nonceStr: shareConfig.nonceStr, // 必填，生成签名的随机串
			signature: shareConfig.signature, // 必填，签名，见附录1
			// surl: res.data.surl, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确
			jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']})
			_this.$wxjs.ready(() => {
			    // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
				_this.$wxjs.updateAppMessageShareData({
					title: '', // 分享标题
					desc: '', // 分享描述
					// 该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
					link: _this.$baseHref + '/pages/xxx/xxx',
					imgUrl: _this.userDetail.face_url, // 分享图标,只支持https
					success(res) {},
					cancel(res) {}
				})
 
				// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
				_this.$wxjs.updateTimelineShareData({
					title: '', // 分享标题
					desc: '', // 分享描述
					// 该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
					link: _this.$baseHref + '/pages/xxx/xxx',
					imgUrl: _this.userDetail.face_url, // 分享图标,只支持https
					success(res) {},
					cancel(res) {}
				})
			})
		}).catch(err => {
			console.log(err);
	})
},

二、打开debug: true后，常见报错处理

1.报错config:fail,invalid signature

注意以下字段的参数是否正确。

 2.updateAppMessafeShareData:the permisiion

填写以下配置即可。

微信 JS 接口签名校验工具