0


基于微信公众号开发h5的前端流程

1.首先公众号进行配置,必须要https域名

还有个txt文件,有弹框提示需要下载放在服务器上

前端处理code的代码封装

// 微信公众号授权
export function wxAuthorize(calback) {
    // 非静默授权,第一次有弹框 这里的回调页面就是放在服务器上微信会跳转回来反值如openid的页面
    let redirect_uri =config.redirect_uri || window.location.host; // 重定向地址
    console.log(redirect_uri, '重定向地址')
    let appid = config.appid  // 公众号appid
    let code = getUrlCode().code; // 截取code
    // 获取之前的code
    let oldCode = uni.getStorageSync('wechatCode')
    if (code == null || code === '' || code == 'undefined' || code == oldCode) {
        // 如果没有code,就去请求获取code
        console.log('当前没有code,进入授权页面')
        let uri = encodeURIComponent(redirect_uri)
        // 设置旧的code为0,避免死循环
        uni.setStorageSync('wechatCode', 0)
        const urll =
            `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=State#wechat_redirect`
        console.log(urll, '------------urll-------------------');
        window.location.href = urll
    } else {
        console.log('存在code,使用code换取用户信息',code)
        // 保存最新code
        uni.setStorageSync('wechatCode', code)
        wxCallback(`?code=${code}&state=123`).then(res => {
            // 成功data为token
            calback && calback({success: true,data:res})
        }).catch((err) => {
            if(err.code == '9997'){ //code失效重新进入
                window.location.reload()
            }else if(err.code == '9999'){ // 手机号未绑定
                calback && calback(err)
            }
        })

    }
}

export function getUrlCode() {
    // 截取url中的code方法
    var url = location.search;
    // this.winUrl = url;
    var theRequest = new Object();
    if (url.indexOf('?') != -1) {
        var str = url.substr(1);
        var strs = str.split('&');
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
        }
    }
    console.log(theRequest,'spdspdop')
    return theRequest;
}

export function getParams(url) {
  const searchParams = new URLSearchParams(url.split("?")[1]);
  const params = {};
  for (const [key, value] of searchParams.entries()) {
    params[key] = value;
  }
  return params;
}
标签: 微信 前端

本文转载自: https://blog.csdn.net/baidu_41899377/article/details/139683097
版权归原作者 文仔酱酱酱 所有, 如有侵权,请联系我们删除。

“基于微信公众号开发h5的前端流程”的评论:

还没有评论