uniapp微信公众号H5获取code进行登录

简介: uniapp微信公众号H5获取code进行登录

目前在做H5商城,需要公众号的菜单跳进小程序,前端需要获取到公众号的code传给后端来确认用户的openId,但是咱们前端如何通过小程序或者H5,来获取公众号的code呢?

通过查阅资料,我来总结一下此次遇到的问题及解决方案:

首先先去官网了解一下基本的配置

微信开放平台

然后通过这个方法获取code,把code传给后端获取token

export const getUrlCode = function() {
    let code = getUrlParam('code'); // 截取路径中的code,如果没有就去微信授权,如果已经获取到了就直接传code给后台获取openId
    const local = window.location.href;
    let redirect_url = encodeURIComponent(local) //回调的地址要编码
    if (code == null || code === '') {
        window.location.href =
            `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23ab834e27fd68ea&redirect_uri=${redirect_url}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`
    }
}
//判断路径中有没有返回code
const getUrlParam = function(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null
}

获取当前URL里面的数据,可以配合下文使用

const pages = getCurrentPages();
const currentPage = pages[pages.length - 1]; //当前页面的全部信息
const route = currentPage.route; //当前路由的路径 pages/login/login
const options = currentPage.options; //url里面的参数json类型

这个截取code看自己的需求

重新获取code的话,要先把URL里面的code给截取掉才能重新获取
let url = this.getnewurl('code')
window.history.replaceState(null, null, url);
//此方法是把code给删掉并把拼接好的URL返回
getnewurl(name) {
                var loca = window.location;
                var baseUrl = loca.origin + loca.pathname;
                var query = loca.search.substr(1);
                const pages = getCurrentPages();
                const currentPage = pages[pages.length - 1];
                const route = currentPage.route; //当前路由的路径 pages/login/login
                const options = currentPage.options; //url里面的参数json类型
                if (query.indexOf(name) > -1) {
                    var obj = {}
                    var arr = query.split("&");
                    for (var i = 0; i < arr.length; i++) {
                        arr[i] = arr[i].split("=");
                        obj[arr[i][0]] = arr[i][1];
                    };
                    delete obj[name];
                    var url = baseUrl + '#/' + route + '?' + JSON.stringify(options).replace(/[\"\{\}]/g, "").replace(
                        /\:/g, "=").replace(/\,/g, "&");
                    return url
                };
            },

有什么看不明白的地方可以联系我

目录
相关文章
|
2天前
|
小程序
uniapp-微信小程序-上拉和下拉触底刷新
uniapp-微信小程序-上拉和下拉触底刷新
7 0
|
3天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
|
6天前
|
移动开发 开发框架 小程序
UniApp与微信小程序介绍及区别
UniApp与微信小程序介绍及区别
14 0
|
19天前
|
缓存 小程序
uniapp读取(获取)缓存中的对象值(微信小程序)
uniapp读取(获取)缓存中的对象值(微信小程序)
12 1
|
23天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
44 4
|
23天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的在线课堂微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的在线课堂微信小程序的详细设计和实现
32 3
|
23天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
56 3
|
23天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的商品展示的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的商品展示的详细设计和实现
32 3
|
23天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信点餐小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信点餐小程序的详细设计和实现
31 1
|
23天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
49 3

热门文章

最新文章

相关实验场景

更多