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

前期准备

• 微信给开发者提供的测试账号平台
  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接口安全域名是不是配对了
• 比如，不需要带http https 、 测试开发账号配置没有加自己的端口号等错误

the permission value is offline verifying

• 表现是分享的链接 图片都没起效果
• 官网上说 access_token的有效期目前为2个小时，需定时刷新， 有可能是后端忘了刷新导致token失效
• 或者 后端提早刷新了导致前一个分享出错（等2个小时就好了....）