微信H5分享到朋友圈，转发朋友功能随记[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

最近刚做了一个微信公众号H5项目，里面包含一个分享到朋友圈和分享给好友的功能。配置白名单以及公众号js安全域名这些就不赘述了，接下来简单介绍下实现这个功能的几个前端步骤

因为是微信网页开发，项目里如果有用到一些分享，音频，视频的功能就必须接入它的SDK工具包，详情可以到官方文档里看一下

第一步绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

第二步引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

我这里是用的 npm 的方式引入，npm引入方式

	npm i weixin-js-sdk -D

或者

	npm i weixin-js-sdk --save-dev

使用

	const wx = require("weixin-js-sdk");

第三步通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

使用

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

这里的timestamp，nonceStr，signature参数涉及的签名算法应由后端去进行获取，再通过接口调用返回给前端。详情请看签名文档，有对获取签名算法逻辑介绍。jsApiList的接口列表在附录3

本项目是uni-app开发，所以config的方法是在生命周期onReady里调用的

第四步通过ready接口处理成功验证

这一步主要就是使用api了，我只用到了分享功能并且需要获取到分享的状态，所以jsApiList里就只添加了 “onMenuShareAppMessage”, “onMenuShareTimeline” 这两个api。虽然分享接口里这两个是属于即将弃用的api，但是”updateAppMessageShareData”, “updateTimelineShareData” 无法获取状态，所以就暂时没有用。等什么时候官方停止使用 “onMenuShareAppMessage”, “onMenuShareTimeline” 了之后再替换 ?

这一部分的代码大概就是这个样子

wx.ready(function () { 
   
	//需在用户可能点击分享按钮前就先调用
	// 分享给朋友
	wx.onMenuShareAppMessage({ 
   
		title, // 分享标题
		// desc: '朋友分享', // 分享描述
		link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		imgUrl, // 分享图标
		success: () => { 
   
			// 设置成功
			uni.showToast({ 
   
				title:"分享成功",
				icon: "none"
			})
		}
	})
	// 分享到朋友圈
	wx.onMenuShareTimeline({ 
   
		title, // 分享标题
		// desc: '朋友分享', // 分享描述
		link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		imgUrl, // 分享图标
		success:  () => { 
   
			// 设置成功
			uni.showToast({ 
   
				title:"分享成功",
				icon: "none"
			})
		}
	})
});

Tip：

由于这几个函数的嵌套调用，在使用官方示例时要注意 this 的一个指向问题
在进行第二步获取签名算法时，向后端发送的url地址参数不能写死，应根据当前页面的实际地址来进行调用 url: `${window.location.href.split("#")[0]}
在第四步调用分享 api 时的link参数应注意，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致，即如果本项目是属于非微信公众号内的h5项目，要分享公众号内某篇推文的链接，那么不能直接拿公众号链接过来使用，后端应做一个地址的重定向，转到本项目域名下，并且所有涉及到地址的参数都应动态获取，不能写死。
在做分享功能测试时，如果以链接的形式进行调试，在微信PC端以及开发者工具上能正常分享链接，而在手机上则只有本页面的链接地址。那么此时可以用登录的链接去换取一个二维码，进行扫码进入之后再进行分享调试功能测试，看是否正常。这个问题的原因应该是微信官方对于这种明文链接有做限制或者说场景值有限制，具体还没有找到问题的答案。

在这里插入图片描述
这是我进行测试的结果
第一次成功的分享是调用登录链接在微信PC端访问了分享页面进行了好友分享，成功；
第二次失败的分享是在手机端掉用登录链接访问了分享页面进行了好友分享，就只有当前分享的链接
第三次和第四成功的分享是我用登录链接换取的二维码，通过二维码扫码进入分享页面进行分享，成功。