微信小程序开发之简单的授权登录

<view class="container">

  <view class=‘content‘>

    <view>申请获取以下权限</view>

    <text>获得你的公开信息(昵称,头像等)</text>

  </view>

  <button class=‘bottom‘ wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" type=‘primary‘> 授权登录</button>

</view>

点击授权登录按钮

按钮的点击事件

第一次授权之后登录并将code交互

其中一些官方授权的代码并未删除

//获取应用实例

const app = getApp()

Page({

data: {

canIUse: wx.canIUse(‘button.open-type.getUserInfo‘)

},

onLoad: function () {

if (app.globalData.userInfo) {

this.setData({

userInfo: app.globalData.userInfo,

hasUserInfo: true

})

} else if (this.data.canIUse) {

// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回

// 所以此处加入 callback 以防止这种情况

app.userInfoReadyCallback = res => {

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

})

}

} else {

// 在没有 open-type=getUserInfo 版本的兼容处理

wx.getUserInfo({

success: res => {

app.globalData.userInfo = res.userInfo

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

})

}

})

}

},

getUserInfo: function (e) {

app.globalData.userInfo = e.detail.userInfo

this.setData({

userInfo: e.detail.userInfo,

hasUserInfo: true

})

},

//按钮的点击事件

bindGetUserInfo: function (res) {

let info = res;

console.log(info);

if (info.detail.userInfo) {

console.log("点击了同意授权");

var that = this

wx.login({

success: function (res) {

if (res.code) {

wx.request({

url: ‘http://fa.com/api/schoolreserve/login‘,

data: {

code: res.code,

user_info: info.detail.userInfo

},

header: {

‘content-type‘: ‘application/json‘ // 默认值

},

success: function (res) {

var userinfo = {};

userinfo[‘id‘] = res.data.id;

userinfo[‘nickName‘] = info.detail.userInfo.nickName;

userinfo[‘avatarUrl‘] = info.detail.userInfo.avatarUrl;

userinfo[‘user_data‘] = res.data;

wx.setStorageSync(‘userinfo‘, userinfo)

that.setData({

userInfo: info.detail.userInfo

})

wx.switchTab({

url: ‘../toast/toast‘,

})

}

})

} else {

console.log("授权失败");

}

},

})

} else {

//用户按了拒绝按钮

wx.showModal({

title: ‘警告‘,

content: ‘您点击了拒绝授权,将无法进入小程序,请授权之后再进入!!!‘,

showCancel: false,

confirmText: ‘返回授权‘,

success: function (res) {

if (res.confirm) {

console.log(‘用户点击了“返回授权”‘)

}

}

})

}

}

})

点击授权之后跳转

重新编译项目

接下来在加载事件中判断受否授权

如果已经授权则重新请求,跳转页面

如果没有授权则加载请求授权的页面

//app.js

App({

onLaunch: function () {

// 展示本地存储能力

var logs = wx.getStorageSync(‘logs‘) || []

logs.unshift(Date.now())

wx.setStorageSync(‘logs‘, logs)

// 获取用户信息

wx.getSetting({

success: res => {

if (res.authSetting[‘scope.userInfo‘]) {

console.log("已经授权")

wx.getUserInfo({

success: res => {

// 可以将 res 发送给后台解码出 unionId

this.globalData.userInfo = res.userInfo

// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回

// 所以此处加入 callback 以防止这种情况

if (this.userInfoReadyCallback) {

this.userInfoReadyCallback(res)

}

//调用登录

this.AnginLogin()

wx.switchTab({

url: ‘/pages/toast/toast‘,

})

}

})

}

}

})

},

// 登录

AnginLogin() {

wx.login({

success: res => {

// 发送 res.code 到后台换取 openId, sessionKey, unionId

if (res.code) {

wx.request({

url: ‘http://fa.com/api/schoolreserve/login‘,

data: {

code: res.code,

user_info: this.globalData.userInfo

},

success: function (res) {

console.log(‘回调成功‘)

wx.setStorageSync(‘token‘, res.data.data.token)

wx.setStorageSync(‘user_id‘, res.data.data.user_id)

},

complete: function () {

wx.checkSession({

success() {

console.log(‘经过验证,登录有效‘)

// session_key 未过期,并且在本生命周期一直有效

},

fail() {

console.log(‘session过期,请重新登录‘)

// session_key 已经失效,需要重新执行登录流程

wx.switchTab({

url: ‘/pages/authorize/authorize‘,

})

}

})

}

})

} else {

console.log(‘登录失败!‘ + res.errMsg)

}

}

})

},

globalData: {

userInfo: null

}

})

原文地址:https://www.cnblogs.com/lin-white/p/10861308.html

时间: 2024-10-05 12:52:22

微信小程序开发之简单的授权登录的相关文章

微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法

异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理) 异常解析: 1. getPhoneNumber的使用: 对于 getPhoneNumber(OBJECT) API,由于小程序需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 <button> 组件的点击来触发(具体使用方法详见getP

一号旺铺:国内第一个专注于微信小程序开发的后端云产品

启航 一号旺铺是天玑旗下继一号旺铺(wangpu1.com,媒体和小程序商店)后又一个基于微信生态的核心产品. 6 月 13 日,「一号旺铺」上线公测了. 「一号旺铺」www.wangpu1.com,是国内第一个专注于微信小程序开发的 BaaS(Backend as a Service)产品,它可以让开发者更快.更轻松地做出优美.稳定的小程序,且不失灵活性.爱范儿技术团队为此努力了 100 天,夜以继日,没有鸡腿. 爱范儿 CTO 在朋友圈写道:一号旺铺本是为了解决内部需求而设计的 BaaS 平

微信小程序开发备忘

前言 从去年一月份微信宣告要做小程序时的圈子里已经有了局部躁动,去年九月内测时,更是全民热捧,似乎张晓龙和他的微信已经准备好再一次改变世界.还好微信比它的粉丝们要理智的多,不做分发,不搞渠道,不发"红利",所以,昨天正式发布时,也并没有想象中的所有人一起迎接新世界到来的景象.OSC上有人发帖问"微信小程序就要发布了,大家激动吗",底下居然都已经有人开喷了.. 但是,话说回来,从技术角度看,微信为我们提供了基于微信本身的新应用场景下的新技术,那么作为一个开发者,对他有

微信小程序开发优秀教程及文章合集第一期

我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列:微信小程序开发手记<一>:项目的代码结构微信小程序开发手记<二>:属性display微信小程序开发手记<三>:backgroud和border属性微信小程序开发手记<四>:视图容器微信小程序开发手记<五>:组件微信小程序开发手记<六>:API 艺龙系列:精品!艺龙小程序:开发项目遇到的问题以及解决方案:http://www.wxapp-unio

微信小程序开发心得

微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等 再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 首先,我们拿自己的项目在一步一步的说明并开发吧,

微信小程序开发入门教程

做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先来看看其有哪些官方文档. 微信公众平台开发者文档统一入口为:https://mp.weixin.qq.com/wiki,这里面大部分内容都是以前就有的,微信开发都是基于此份文档. 现在的变化是在这份文档的顶部加了一个“微信公众平台.小程序”的入口,这个入口才就是专门针对微信小程序开发的文档,如下图:

微信小程序开发之路(菜鸟版)

---恢复内容开始--- 1.兵马未动,配置先行:微信小程序配置较简单,不多说,直接放图: 文件大概四十多兆,很轻,很方便: 2.解压并运行,上图: 3.微信扫描登陆,选择无appid,创建一个新项目,此刻准备工作就ok了,明天继续开发工具内部系统讲解,晚安哦 ---恢复内容结束---

微信小程序开发日记——高仿知乎日报(上)

本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序开发日记--高仿知乎日报(上) 微信小程序开发日记--高仿知乎日报(中) 微信小程序开发日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 API分析 启动页 轮播图 日报列表 浮动按钮 侧滑菜单 API分析 以下是使用到的具体API,更加详细参数和返回结

微信小程序开发之大转盘 仿天猫超市抽奖

天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下. 1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴; 2.抽奖的item也是js控制背景,但是怎么样让它优雅的停下来是个问题.动画中有timingFunction可以设置速度.自己用js就没那么简单了.我这里用setInterval(),时间是线性变化的.换个斜率先小后大的函数效果应该会好一些. 技术相关: 1.微信