前期准备
- 微信给开发者提供的测试账号平台
https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index - 微信 JS 接口签名校验工具
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign - 微信开发者工具
接入微信授权
- 分
静默授权和非静默授权两种-
静默授权：scope=snsapi_base，没有弹窗，只能获取用户的openId。 -
非静默授权：scope=snsapi_userinfo，有弹框弹出需要用户手动点击确认授权。可以获取openId，用户的头像、昵称等
-
授权步骤如下：
- 判断URL有没有code
- 有是已经授权，无是未授权
- 未授权，跳转微信授权链接 这里采用静默授权
https://open.weixin.qq.com/connect/oauth2/authorize?appid=${DefaultConfig.appId}&redirect_uri=${url}&response_type=code&scope=${DefaultConfig.loginWay}&state=#wechat_redirect注意： redirect_uri是授权成功，跳转的地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code
- 本地开发测试，在测试公众号的网页授权回调配置 当前电脑的IP就行了
function login() {
let url = encodeURIComponent(DefaultConfig.redirectUriWx); // 注意一定要encodeURIComponent
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${DefaultConfig.appId}&redirect_uri=${url}&response_type=code&scope=${DefaultConfig.loginWay}&state=#wechat_redirect`
}
跳转url.jpg
实现微信分享
1、后端需要实现对签名的获取
2、前端在页面初始化完毕的时候加载微信sdk的配置就行了
// 请求后端拿到签名
let wxConfig = await getWXSignature(encodeURIComponent(window.location.href.split('#')[0]))
let shareInfo = await getShareInfo()
// 更新配置
wx.config({
debug: false,
appId: DefaultConfig.appId,
timestamp: wxConfig.data.data.timestamp,
nonceStr: wxConfig.data.data.noncestr,
signature: wxConfig.data.data.signature,
jsApiList: [
'updateAppMessageShareData', // 分享给朋友
'updateTimelineShareData' // 朋友圈
]
});
wx.error(() => {
// console.log(66644)
})
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({
title: shareInfo.data.data.title, // 分享标题
desc: shareInfo.data.data.desc, // 分享描述
link: DefaultConfig.shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareInfo.data.data.imageUrl, // 分享图标
success: function () {
}
})
wx.updateTimelineShareData({
title: shareInfo.data.data.title,
link: DefaultConfig.shareLink,
imgUrl: shareInfo.data.data.imageUrl,
success: function () {
}
})
});
-
在测试公众号的网页的js接口安全域名配置如下
域名.jpg
线上配置 贴图
online.jpg
跳转到小程序
- 页面可投放到小程序（具体咋弄没研究过）
- 项目有个购买链接，如果是微信分享打开就跳转到H5购买页，小程序打开就直接跳转小程序购买页
// 小程序环境
export function isMiniProgram() {
let win: any = window
return (navigator.userAgent.match(/micromessenger/i) && navigator.userAgent.match(/miniprogram/i)) || win.__wxjs_environment === 'miniprogram';
}
// iPhone环境
export function isIPhone() {
let userAgent = window.navigator.userAgent
return userAgent.includes('iPhone') && /MicroMessenger/i.test(userAgent)
}
// ==========================================
// 判断是否是小程序环境
if (isMiniProgram()) {
// 具体地址和链接形式，找负责小程序的相关同志去要
let url = `/main/webview/index?link=${encodeURIComponent(购买链接)}`
// 跳转主要是这个api
wx.miniProgram.navigateTo({url})
} else {
window.location.href = 购买链接
}
错误处理
63002,invalid signature
- 先把后端返回来的签名复制到
微信 JS 接口签名校验工具，看看后端生成的签名是否正确 - 仔细检查一下js接口安全域名是不是配对了
- 比如，不需要带
httphttps、 测试开发账号配置没有加自己的端口号等错误
the permission value is offline verifying
- 表现是分享的链接 图片都没起效果
- 官网上说 access_token的有效期目前为2个小时，需定时刷新， 有可能是后端忘了刷新导致token失效
- 或者 后端提早刷新了导致前一个分享出错（等2个小时就好了....）
