微信首页登录html页面,H5页面接入微信授权登录和分享

前期准备

接入微信授权

分静默授权和非静默授权两种

静默授权： 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接口安全域名是不是配对了

比如，不需要带http https 、 测试开发账号配置没有加自己的端口号等错误

the permission value is offline verifying

表现是分享的链接 图片都没起效果

官网上说 access_token的有效期目前为2个小时，需定时刷新， 有可能是后端忘了刷新导致token失效

或者 后端提早刷新了导致前一个分享出错(等2个小时就好了....)