uniapp h5微信授权登录

直接上代码：

<view class="IconBox"><view class="tips">——第三方登录——</view><view class="IconItemBox"><view class="IconItem" @click="weixinLogin"><u-icon name="weixin-fill" size="45" color="#07C160"></u-icon></view></view></view>
</view>

<script>
const app = getApp();// 判断是否为公众号模拟器环境const isWechat = () => {return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";}// 判断公众号截取codeconst getUrlParam = (name) => {let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");let r = window.location.search.substr(1).match(reg);if (r != null) {return unescape(r[2]);}return null;}export default{data(){return{}  },onLoad() { if (!isWechat()) {location.href = app.$vm.globalData.baseLoginUrl}},methods:{weixinLogin(){this.getWxCode()},getWxCode() {let code = getUrlParam("code"); //是否存在codelet local = app.$vm.globalData.baseLoginUrl;if (code == null || code === "") {//不存在就打开上面的地址进行授权window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${app.$vm.globalData.appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;// https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxae048f1b059e77c0&redirect_uri=http://devapi.xingyeqiao.com/&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect                                }// if (isWechat()) {//     if(sessionStorage.getItem("id")){//       let ids = sessionStorage.getItem("id")//         location.href = app.$vm.globalData.baseLoginUrl+"?id="+ids//  }else{//        location.href = app.$vm.globalData.baseLoginUrl//  }// };},} }
</script>

上面的公共属性在app.vue文件中

//App.vue
<script>export default {globalData:{uploadUrl:"http://*************.com/index/file/FileAdd",imgBaseUrl:"http://*************.aliyuncs.com/", connectObj:null,connectUrl:"ws://*************.com:8282",baseLoginUrl:"http://*************.com/index/login/wxLogin",appid:"wxbf34f4f4*************"}
</script>

上面有两种跳转方式，一种被我注释掉了，主要看后端怎么对接登录授权。

uniapp h5微信授权登录相关推荐

uniapp开发h5微信授权登录(详细教程)
uniapp开发h5微信授权登录文章目录 uniapp开发h5微信授权登录前言一.前期准备--申请测试账号二.正式开发--前端代码三.打包发布总结前言我也是第一次做h5授权微信登录,网 ...
uniapp获取微信授权登录和手机号一键登录（保姆教程）
uniapp获取微信授权登录(保姆教程) 第一步下载官方给的解密文件'mWXBizDataCrypt' 没有文件就复制该文件的代码创建一个 var crypto = require('crypto' ...
H5 微信授权登录功能实现
背景最近几周面试复习以前知识库,刚好博客从国外迁移到国内CSND,同步坐下笔记,梳理之前开发H5 微信授权登录功能获取用户信息数据. H5页面微信授权登录,使用微信官方JSSDK,微信网页授权较为复 ...
H5微信授权登录后点击返回出现循环登录无法退出问题
简单介绍h5微信授权流程 1.入口页跳转到我们自己创建的空白授权页 2.在空白授权页判断url上是否包含code,没有code拼接微信授权链接,通过location.href进行跳转 location ...
pc、h5微信授权登录
pc登录微信登录(通过后端返回一个qrcode重定向到页面上,进行扫码授权,获取code即可,再根据code获取登录信息) h5登录微信授权登录:(支持微信浏览器,其它浏览器无法拉起微信的授权): ...
uniapp app微信授权登录
先在微信开放平台申请移动应用,然后拿到appid和appsecret秘钥进入管理中心,选择移动应用,创建移动应用,按步骤来就行了,可能唯一会让你卡住的就是应用签名了现在要生成应用签名就得用自有证书 ...
uni-app 实现微信授权登录
最近在写网易云音乐微信小程序,发现项目中少了点什么东西,于是爆肝了几天,参考了很多网上的写法,最终实现了这个简单的登录功能! 注意,微信小程序是没有登出功能的,害的我找了半天的api,在平时的是使用中 ...
uniapp写微信授权登录
html部分 <button class="login-btn" type="primary" @click="getUserInfo" ...
H5微信授权登录弹窗提示
如下图:用户授权登录前,先通过静默授权,拿到token,展示部分信息,用户通过授权后拿到头像昵称,该弹窗让用户有个比较好的体验请求过程如下: 1.首次在没有UID.code的情况下:静默授权(&am ...
uniapp实现微信授权登录并回显用户头像和名称
先上html页面的代码: <button class="login" v-if="show1" open-type="getUserInfo&q ...

uniapp h5微信授权登录

uniapp h5微信授权登录相关推荐

最新文章

热门文章