1、小程序授权登录

这里我直接复制代码:

login.js

const app = getApp()
Page({
data: {
//判断小程序的API,回调,参数,组件等是否在当前版本可用。
canIUse: wx.canIUse('button.open-type.getUserInfo'),
userinfoObj: {}
},
// 授权按钮
bindGetUserInfo: function (e) {
wx.getUserProfile({
desc: '业务需要',
lang: 'zh_CN',
success: res1 => {
// wx.setStorageSync('nickName', res1.userInfo.nickName) // 授权缓存用户昵称
// wx.setStorageSync('avatarUrl', res1.userInfo.avatarUrl) // 授权缓存用户头像
this.setData({
userinfoObj: {
...this.data.userinfoObj,
nickName: res1.userInfo.nickName,
avatarUrl: res1.userInfo.avatarUrl
}
})
wx.login({
success: res => {
this.getUserOpenId(res.code)
}
});
},
fail: function () {
wx.showModal({
title: '提示',
content: '您拒绝了授权,无法正常使用小程序 重新授权',
showCancel: false,
confirmText: '重新授权',
success: function (res) {
if (res.confirm) {
console.log('用户点击了"重新授权"')
}
}
})
}
})
},
// 通过code获取openid
getUserOpenId(code) {
let postData = {
code,
appid: app.globalData.appid,
parentUserid: wx.getStorageSync('parentUserid') || ''
}
app.requestData('xxx', {
...postData
}).then((res) => {
if (res.result === 'success') {
// wx.setStorageSync('sessionKey', res.data.sessionKey) // 缓存sessionKey
wx.setStorageSync('openid', res.data.wxId) // 缓存openid
this.setData({
userinfoObj: {
...this.data.userinfoObj,
openid: res.data.wxId
}
})
console.log('wxId', res.data.wxId)
this.insertUserInfo()
} else {
app.showTip(res.msg)
}
})
},
// 将 openid 头像、昵称 入库
insertUserInfo() {
app.requestData('xxx', {
nickName: this.data.userinfoObj.nickName,
openid: this.data.userinfoObj.openid,
avatarUrl: this.data.userinfoObj.avatarUrl,
parentUserid: wx.getStorageSync('parentUserid') || ''
}).then((res) => {
if (res.result === 'success') {
var value = wx.getStorageSync('urlWithArgs')
app.checkIslogin(function () {
if (value !== '') {
wx.redirectTo({
url: value,
})
} else {
wx.switchTab({
url: '../mine/index',
})
}
})
} else {
app.showTip(res.msg)
}
})
},
// 通过openid获取手机号
updateWinxinUserMobile() {},
// onLoad() {
// wx.showModal({
// title: '提示',
// content: wx.getStorageSync('parentUserid'),
// success (res) {
// if (res.confirm) {
// console.log('用户点击确定')
// } else if (res.cancel) {
// console.log('用户点击取消')
// }
// }
// })
// }
})

login.xml

<!--pages/login/index.wxml-->
<view wx:if="{{canIUse}}">
<view class='header'>
<image src='../../image/logo.jpg'></image>
</view> <view class='content'>
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称,头像等)</text>
</view> <button class='bottom' type='primary' bindtap="bindGetUserInfo">
微信一键登录
</button>
</view> <view wx:else>请升级微信版本</view>

2、众所周知,小程序进去之后不能立马弹出授权页面,要让用户可以浏览部分页面,这里就要监测用户是否有授权了

可以在app.js里写一个全局的函数

  onLaunch() {
this.checkIslogin()
},
// 检测用户是否已经授权登录过, 登录过就获取用户信息
checkIslogin(callback) {
const openid = wx.getStorageSync('openid')
const _this = this
if (!openid) {
this.globalData.isLogin = false
} else {
this.globalData.isLogin = true
this.requestData('xxx', {
openid: openid,
parentUserid: wx.getStorageSync('parentUserid') || ''
}).then((response) => {
if (response.result === 'success') {
_this.globalData.userInfo = response.data
console.log(response.data)
// if (!response.data.nickName) {
// _this.globalData.isLogin = false
// }
typeof callback == 'function' && callback()
} else {
_this.showTip(response.msg)
}
})
}
},

我这里是定义了一个全局变量 isLogin

在需要授权的页面写入

  onLoad() {
if (!app.globalData.isLogin) {
wx.navigateTo({
url: '/pages/login/index',
})
} else {
//this.queryuserdetail() // 用户详情
//this.queryCount() // 用户计数
}
},

参考链接:https://www.cnblogs.com/yxg2852/p/16281923.html

版权申明:内容来源网络,版权归原创者所有。除非无法确认,都会标明作者及出处,如有侵权,烦请告知,我们会立即删除并致歉!

微信扫一扫 关注公众号

微信小程序授权及检测访问当前页面需要去登录的操作的更多相关文章

  1. 完整微信小程序授权登录页面教程

    完整微信小程序授权登录页面教程 1.前言 微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方 ...

  2. 微信小程序开发:学习笔记[8]——页面跳转及传参

    微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...

  3. 微信小程序授权获取用户详细信息openid

    小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that. ...

  4. 微信小程序授权 获取用户的openid和session_key【后端使用java语言编写】,我写的是get方式,目的是测试能否获取到微信服务器中的数据,后期我会写上post请求方式。

    在这里给大家分享下我的心得,1.写代码前一定要对整个流程有个了解.我就是因为在先不了解整个过程中去ctrl+c+v他人的博客代码,花费很多无用的时间去处理还不知道能不能跑的起来的代码. 2.本人比较喜 ...

  5. uni-app开发经验分享二十: 微信小程序 授权登录 获取详细信息 获取手机号

    授权页面 因为微信小程序提供的 权限弹窗 只能通用户确认授权 所以可以 写一个授权页面,让用户点击 来获取用户相关信息 然后再配合后台就可以完成登录 <button class="bt ...

  6. uni-app 微信小程序授权登录

    1.微信小程序 获取用户信息 与获取手机号 详细信息看官方公告:https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce8 ...

  7. 微信小程序授权登录将open_id传至后台并入库

    要求能把用户昵称.头像以及open_id写入数据库,服务端保持用户登录状态 wxml: <block wx:else> <button type="primary" ...

  8. 微信小程序 - 授权页面

    小程序授权方式更改以后,我们只有两种选择. 1.在主页使用遮罩层,类似这样的(会造成一点卡顿) 2.新增登陆授权页(经过反复的思考,我还是觉得用这个好) 这个也不错: https://blog.csd ...

  9. 微信小程序授权获取手机号

    wxml: <text>pages/logins/logins.wxml</text> // <button open-type="getPhoneNumber ...

  10. 微信小程序入门教程之二:页面样式

    这个系列的上一篇教程,教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的 ...

随机推荐

  1. Classical Cipher

    [NPUCTF2020]Classical Cipher 难得做到一道古典密码的题目,打开后有一个flag.zip和一个提示. 解密后的flag请用flag{}包裹 压缩包密码:gsv_pvb_rh_ ...

  2. CMT: Convolutional Neural Networks Meet Vision Transformers概述

    0.前言 相关资料: arxiv github 论文解读(CSDN,CSDN) 论文基本信息: 作者单位:华为诺亚, 悉尼大学 发表时间:CVPR2022(2021.7.13) 1.针对的问题 当前将 ...

  3. jquery实现多图片上传

    在做后台管理的时候,遇到这样一个需求,实现多张图片上传并按选中的顺序显示.PS:图片上传的时候是即时上传到服务器,后台返回图片在服务器上的地址,在最后点击提交按钮的时候,把地址传给后端写入数据库即可. ...

  4. Hadoop搭建超级详解

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ...

  5. 跨平台Docker篇

    前言 总结自 老张的哲学b站视频[10分钟学会Blog.Core(ASP.NETCORE)基本完结]https://www.bilibili.com/video/BV1vC4y1p7Za?vd_sou ...

  6. mac使用expect登录跳板机后的机器

    两个文档 #!/usr/bin/expect -f #连接文件名字记录 set ip [lindex $argv 0] catch {spawn ssh 1.1.1.1}## ip地址换成自己的 ex ...

  7. 使用NSIS打包软件

    平台和所需软件 平台: Windows 使用软件: NSIS https://nsis.sourceforge.io/Download HM NIS Edit https://sourceforge. ...

  8. 一个好的程序应该像AK47

    一个好的程序应该像AK47: 容易上手(配置.设置.功能描述清晰),结构简单(低耦合,模块化,单元化),拆装方便(安装部署.卸载.迁移很少有障碍),从不卡壳(已知业务冲突解决),故障率低(未知或可能出 ...

  9. CCF 201903-1 小中大

    #include <iostream> #include <bits/stdc++.h> #include <string> using namespace std ...

  10. JAVA的作用

    JAVA的用途广泛:1 .银行系统,政企信息系统,支付系统,大数据平台,网站平台. 2 .Saas云,手机app,云管理系统后台,电商系统后台,桌面工具. JAVA和PYTHON的抉择:JAVA是C语 ...