uniapp h5实现微信公众号登录

官方说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
下面就直接写登录过程了

<!-- #ifdef H5 --><tn-button @click="goToLoginH5" shape="round" backgroundColor="#FFFFFF10" fontColor="#ffffff"padding="40rpx 0" width="50%"><text class="tn-icon-wechat tn-padding-right-xs tn-text-xl"></text><text class="">授权登录</text></tn-button><!-- #endif -->

        onLoad(options) {// #ifdef H5if (options.code == null) {} else {this.sendCode(options.code)}// #endif},

goToLoginH5() {let _this = this;uni.showModal({title: '提示',content: '需要小程序授权',success: (res) => {if (res.confirm) {_this.getWeChatCode();} else if (res.cancel) {uni.showToast({title: '未授权',icon: 'none'})}}});},
//请求微信接口，用来获取code
getWeChatCode() {let code = this.getUrlCode('code')if (code == null) {this.getpower()} else {this.sendCode(code)}
},
//方法:用来提取code
getUrlCode(name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, '' ])[1].replace(/\+/g, '%20')) || null
},
getpower() {let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址let appid = 'wx40ee16f1bc9eb844'window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+ local + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'},
sendCode(code){let _this = this;loginWxOfficial({"form": {"code": code},}).then(res => {_this.uid = res.data.userIduni.setStorageSync('token', res.data.token)_this.getUserinfo()}).catch(err=>{alert(err+'err1')})
},
getUserinfo() {let _this = this;userInfo().then(res => {if (res.status == 200) {_this.userInfo = res.data.userInfouni.setStorageSync('userInfo', res.data.userInfo)}})
},

uniapp h5实现微信公众号登录相关推荐

uniapp中h5网页微信公众号授权
uniapp微信网页授权 uniapp中h5网页微信公众号授权主要代码获取code返回的code截取代码 uniapp中h5网页微信公众号授权微信官方文档–>网页授权 uniapp中h5网 ...
uni-app 对FastAdmin微信公众号授权登录实例
uni-app 对FastAdmin微信公众号授权登录实例 uniapp 微信公众号授权登录代码跳转获取code 提交fastadmin 第三方登录插件进行登录验证存储token onLoad( ...
uniapp-H5微信公众号登录
H5微信公众号登录 uniapp-H5使用微信公众号登录 1.挟持是否在微信h5打开 2.在App.vue中做一个全局监听code 3.具体看官方开发文档 uniapp-H5使用微信公众号登录在使用 ...
2021最新外卖霸王餐小程序、H5、微信公众号版外系统源码|霸王餐美团/饿了么系统粉丝裂变玩源码下载
2021年了,你还在用淘宝客吗?赶紧跟上互联网的大势吧,外卖cps就是cps人群趋势! 个人.个体.企业均可使用外卖霸王餐小程序.H5.微信公众号版外系统源码|霸王餐美团/饿了么系统粉丝裂变玩 2 ...
.NET C#使用微信公众号登录网站
这篇文章主要介绍了.NET C#使用微信公众号登录网站,教大家利用微信公众号进行网站登录,感兴趣的小伙伴们可以参考一下适用于:本文适用于有一定微信开发基础的用户引言:花了300大洋申请了微信公众平 ...
微信公众号登录密码参数加密详解
微信公众号登录密码pwd参数加密详解前言此参数的加密没有任何难度,适合小白练手学习. 网址:https://mp.weixin.qq.com/ 一.打开浏览器开始抓包输入错误的账号密码,登录.然 ...
【UNI-APP】开发微信公众号（H5）JSSDK调式
UNI-APP 开发微信公众号(H5)JSSDK调试安装 - NPM安装方式复制代码npm install jweixin-module --save - 下载使用方式下载地址:https:// ...
支付宝H5，微信H5，微信公众号支付回调
业务场景应公司需求,需要在项目中接入支付宝h5支付,微信h5支付和微信公众号支付功能,本编主要讲述支付踩坑和h5支付后跳转的回调问题微信h5支付微信h5支付时需要校验下单域名,微信从refere ...
springboot+h5页面+微信公众号获取微信用户信息
springboot项目,h5页面通过微信公众号获取微信用户信息最近本人有一个项目需求,微信公众号里点击一个菜单进入一个商城购物系统. 对于在微信公众号还是小白的我来说难度有点大,但是做完后发现也就 ...
html实现微信公众号,H5在微信公众号的下拉刷新实现
由于项目需要在微信公众号做"健康资讯"相关的,所以会用到下拉刷新,可是使用的原生H5做页面,不过希望能够做到和app原生一样的下拉刷新效果,然后在网上找了找H5下拉刷新相关的资料, ...

uniapp h5实现微信公众号登录

uniapp h5实现微信公众号登录相关推荐

最新文章

热门文章