微信公众号网页开发-分享朋友或朋友圈_微信公众号网页分享

！！！看到最后！！！

一 、获得网页授权 微信网页开发-网页授权

1. 拿到URL

const appid = '你的服务号的appid';
const redirect_uri = encodeURI('你网页的域名地址(开发者需要先到公众平台官网中的「设置与开发」-「功能设置」-「网页授权域名」的配置选项中，修改授权回调域名。上面文档里有写)');
const URL= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
1
2
3

2. 在微信开发工具打开

3. 调试分享，根据文档一步一步来 微信网页开发-JS-SDK说明文档

1. 在项目安装 pnpm install weixin-js-sdk --save；
2. 引入 import wx from ‘weixin-js-sdk’；
3. 代码如下

const code = searchParams.get('code') || '';


// 判断当前环境是否是在ios
const isIOS = function() {
     var isIphone = navigator.userAgent.includes('iPhone');
     var isIpad = navigator.userAgent.includes('iPad');
     return isIphone || isIpad;
}
// 调用用户授权
const getWxCode = () => {
        let ourl = window.location.href.split('#')[0];
        const appid= 'appid';
        const redirect_uri = encodeURI(ourl);
        const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=&connect_redirect=1#wechat_redirect`
        window.location.href = url
    }

// 加载时就调用
useEffect(() => {
	// 注：我是通过页面地址有没有code值去判断是否从分享链接进的详情
	const userData = sessionStorage.getItem('userData '); // 这是我在进列表的时候保存的用户信息
	if(userData) {
		// 列表进来
		// 进行权限验证
		getJsapiTicket()
		// 自己业务代码......
	} else if(code) {
		// 分享链接进来-已授权
		// 进行权限验证
		getJsapiTicket()
		// 自己业务代码......
	} else {
		// 分享链接进来-未授权，需要重新授权
		getWxCode()
	}
}, [])

// 权限验证
const getJsapiTicket = () => {
   let ourl = window.location.href.split('#')[0];
   if(isIOS() && !code){ // 注: 用户正常进入(即从列表进入详情)ourl需要用localStorage存储的数据
       // 解决ios微信内部分享单页面记录初始url，如果用location.href，签名会匹配错误
       ourl = localStorage.getItem('shurl') || ''
   }
   tosharewx(ourl)
}

// 进行config接口注入权限验证配置
const tosharewx = (ourl) => {
	getJsapiTicket({
		url: ourl
	}).then(res => {
		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: res.data.appid, // 必填，公众号的唯一标识
			timestamp: res.data.timestamp, // 必填，生成签名的时间戳，由开发者生成的当前时间戳
			nonceStr: res.data.nonceStr, // 必填，生成签名的随机串，由开发者随机生成
			signature: res.data.signature, // 必填，签名
			// 必填，需要使用的JS接口列表
			jsApiList: [
				'updateAppMessageShareData',
				'updateTimelineShareData',
			]
		})
		wx.ready(() => {
			//分享给朋友接口--如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行
			//分享给微信朋友或者QQ好友
	           wx.updateAppMessageShareData({ 
	               title: '标题', // 分享标题
	               desc: '描述', // 分享描述
	               link: 'url', // 分享链接
	               imgUrl: 'imgUrl' // 分享图标
	               success: function () {
	                 // 设置成功
	                 // console.log('分享成功')
	               },
	               cancel: function cancel() {
	                   console.log('已取消');
	               },
	               fail: function fail(res) {
	                   // console.log('分享失败', res)
	               }
	           })
	           // 分享给朋友圈或者QQ空间
	           wx.updateTimelineShareData({ 
	               title: '标题', // 分享标题
	               link: 'url', // 分享链接
	               imgUrl: 'imgUrl', // 分享图标
	               success: function () {
	                 // 设置成功
	                 // console.log('分享成功')
	               },
	               cancel: function cancel() {
	                   console.log('已取消');
	               },
	               fail: function fail(res) {
	                   // console.log('分享失败', res)
	               }
	           })
		});
		wx.error(err => {
			console.log(err, '接口验证失败');
		});
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

4. 分享成功

   

二、遇到问题，敲重点！！！

问题1：拿到配置好用户授权的URL=https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect地址，进入详情页面进行分享时不管是在ios还是在安卓上一直是一个链接，并不是自己设置好的卡片，如图

后面在社区看到一个类似的问题H5分享链接不显示自定义标题和图片？看到了官方的这个回答，如下图

解决：从这三个入口进就能正常分享了，如下图

问题2：在ios上分享的时候，一直报 errMsg: “updateAppMessageShareData:fail, the
permission value is offline verifying”，安卓正常；官方对签名失败的排查说明如下图，发现最后还是url问题。
解决：ios是要传刚进入的页面url（项目启动的第一个页面地址）， 安卓就实时取url可以了

•