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
                };
            },

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

目录
相关文章
|
iOS开发 开发者
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
987 67
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
|
移动开发 Android开发 容器
uniapp中使用videojs构建H5直播播放器
【10月更文挑战第14天】这两天在开发H5直播带货功能模块,使用原生的video播放器播放不了m3u8的流地址,于是找了videojs,参考了网上的一些资料研究了一下,感觉还不错,videojs播放m3u8流地址还挺稳定的,下面就简单记录一下uniapp里面使用方式
2282 129
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
1520 3
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
3961 12
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
839 1
 H5微信外支付(移动端浏览器)
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
1452 3
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
830 0
|
小程序 前端开发 算法
|
移动开发 前端开发 Android开发
开发指南059-App实现微信扫描登录
App是用uniapp开发的,打包为apk,上传到安卓平板中使用
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
4869 3