微信H5分享（踩坑）

如果您不去配置的话，效果是下图一，配置之后是图二（有标题、图片、描述）

H5是不能直接分享的，需要借助微信的jssdk微信开放文档来进行配置

（1）首先要去微信公众号平台的公众号设置=>功能设置里配置JS接口安全域名

（2）项目使用

①下载微信sdk包 

vue2
npm install jweixin-module --save


vue3
npm install weixin-js-sdk -S
或
yarn add weixin-js-sdk --save

 ②引入

vue2在使用的页面引入

var wx = require('jweixin-module');

 vue3引入

import wx from "weixin-js-sdk"

 ③页面使用

在使用之前，需要给后端小伙伴返传当前页面的url，来生成签名signature（避坑1:这不还是让后端小伙伴做吧，前端做会报跨域，也用不了）

掉接口拿需要的参数

注入权限验证配置及分享内容

const share = (list) => {
		console.log('list',list);   // 请求到的参数
		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: list.appId, // 必填，公众号的唯一标识
			timestamp: list.timestamp, // 必填，生成签名的时间戳
			nonceStr: list.nonceStr, // 必填，生成签名的随机串
			signature: list.signature, // 必填，签名
			jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
		})
		wx.checkJsApi({
		  jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表
		  success: function(res) {
			  console.log('检查接口权限',res);
		  // 以键值对的形式返回，可用的api值true，不可用为false
		  // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
		  }
		});
		wx.error(function(res) {
			console.log(res, '错误')
		});
		
		wx.ready(function() {
			//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
			wx.updateAppMessageShareData({
				title: data.name, // 分享标题
                // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				link:uni.getSystemInfoSync().platform == 'ios'?uni.getStorageSync('url'):window.location.href, 
				desc: data.name,
				imgUrl: data.images, // 分享图标
				success: function() {
					console.log('设置分享给朋友成功')
				},
				cancel: function(res) {
					console.log('取消分享')
				}
			});
			wx.updateTimelineShareData({
				title: data.name, // 分享标题
                // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				link:uni.getSystemInfoSync().platform == 'ios'?uni.getStorageSync('url'):window.location.href, 
				desc: data.name,
				imgUrl: data.images, // 分享图标
				success: function() {
					console.log('设置分享到朋友圈成功')
				},
				cancel: function(res) {
					console.log('取消分享')
				}
			});
		});
	}

这时候可能你会遇到一个bug（避坑2），在安卓环境下是正常的，但是在iOS环境下，会报invalid signature签名错误，可以先按照文档附录5进行排查错误（一般这种情况不是文档上那些错误），这个问题出现的原因有两点：

①使用了history模式

②ios访问只记录第一次的页面，跳转页面时页面不会改变（刷新及正常），android 正常

在调试过程中，传入window.location.href 时传入的总是第一次进入的页面，即使你打印或使用vconsole调试 虽然是当前的但是都没用（这点比较坑人）

const isIOS = function () {
  var isIphone = navigator.userAgent.includes('iPhone')
  var isIpad = navigator.userAgent.includes('iPad')
  return isIphone || isIpad
}
if (!window.entryUrl) {
  window.entryUrl = location.href.split('#')[0]
}
 
const url = isIOS() ? window.entryUrl : location.href.split('#')[0]

然后用这个url调接口拿参数就好了

注意：如果分享不成功，可能得在公众号里打开链接，才会成功