!!!看到最后!!!
一 、获得网页授权 微信网页开发-网页授权
- 拿到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`;
- 在微信开发工具打开
3. 调试分享,根据文档一步一步来 微信网页开发-JS-SDK说明文档
- 在项目安装 pnpm install weixin-js-sdk --save;
- 引入 import wx from ‘weixin-js-sdk’;
- 代码如下
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:拿到配置好用户授权的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可以了