微信h5获取用户openid，将code发送给后台从而得到用户openid，解决redirect_uri参数错误

想要在h5页面获取用户code从而得到用户openid的方式有两种，scope=snsapi_base(静默方式，会重定向到当前页并将code返回在url上)或者scope=snsapi_userinfo(非静默方式，会弹出用户授权页面，用户确认授权才会重定向url)两种方式，两者的区别是，前者只能拿到用户oppenid，后者可以拿到用户的其他信息，当然我这里做的功能比较简单，只需要知道用户是否关注该公众号，使用的是第一种方式，本文两种方式都会介绍到。

在html页面中一定要  引入微信的js文件，否则无法使用wx.的方式进行需要的设置及操作，这点很重要

微信开发官方文档：https://developers.weixin.qq.... 

1.根据微信公众号官方文档提供的方法得到用户：appId，timestamp，nonceStr，signature，使用

    wx.config({
        debug: false,
        appId: appId,
        timestamp:timestamp,
        nonceStr:nonceStr,
        signature:signature,
        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] //这里根据自己需求设置，可以在    微信公众号文档查找相关设置，这里不过多介绍
    });
 
    getUserInfo(appId,window.location.href) //获取用户code
 
    //wx.confg设置成功后，即可通过
    wx.ready(function(){
        wx.onMenuShareTimeline({
            imgUrl:"", //绝对路径
            desc:"", //描述
        }) //这个是设置h5页面分享的一些参数，比如非公众号发布文档分享的小图片和描述等等，这只是举个例子，与获取用户code无关，可以忽略
    })
})

2.wx.config设置之后，就可以走获取用户code了，官方文档：https://developers.weixin.qq.... 

设置网页授权接口，设置——公众号设置——功能设置，微信后台后期如果更新，不在这个位置，可以在开发——接口权限中找到相应配置即可更改

代码：

    function getUserInfo(appId,redUrl){
        //公众号appid
        //redirect_uri 重定向的url，一般情况下会设置为当前url
        //response_type=code 默认值为code
        //scope=snsapi_base/snsapi_userinfo 静默/非静默方式
        
        let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURI(redUrl)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
        //window.location.href = url //这里有一个问题，如果直接跳转，会一直不停的跳转，我们只需要他跳转一次，得到code即可，所以需要在获取到code之后停止跳转
 
        //因为重定向跳转之后的url中一定带有code=字样，所以我就将他作为停止跳转，如果有更好的方法欢迎指出
            if(window.location.href.indexOf('code=') != -1){
                const obj = new URLSearchParams(window.location.search)
                let params = {}
                for (const iterator of obj) { params[iterator[0]] = iterator[1]}
            }else{
                window.location.href = url
            }
    }
 
/*
*这里的url我用了encodeURI方式转换了一下，微信官方文档没有提到需要使用这个方法转换一下url
*encodeURI方法转换url很重要，因为一开始没有使用encodeURI转换，一直报错redirect_uri域名错误，找了很久才发现是这个问题导致的
* 网上也有很多教程显示说是url与公众号后台设置的网页授权url不一致，都是瞎扯，明明设置的一样也会提示这个错误，完全是因为没有使用encodeURI方法转换url导致的
* 微信官方网页授权设置文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
*/

如果在调用getUserInfo的方法出现redirect_uri参数错误字样，一定就是redirect_uri的url没有使用  encodeURI  方法，这个很重要

我这里配置的是  www.XXXX.cn

redirect_uri的url是：http://www.XXXX.cn/XXXX.html 或者 http://www.XXXX.cn/XXXX/XXXX.... 都可以正常得到openid

 

会得到一个重定向的url，code=后面的参数就是用户code

如果使用非静默方式，会先弹出授权页面，点击确定后会返回静默方式的url，将得到的code发送给后台，后台会给你返回用户openid，即可完成授权功能