1.授权按钮:

<view>
<button class='login-btn' type='primary' @click="bindGetUserInfo"> 授权登录 </button>
</view>

2.事件方法:

<script>
export default {
data() {
return { nickName: null, //昵称
avatarUrl: null, //头像
isCanUse: uni.getStorageSync('isCanUse') || true, //默认为true
userInfo: {},
canIUse: uni.canIUse('button.open-type.getUserInfo'),
canIGetUserProfile: false,
detail: {},
openid: null,
gender: null,
city: null,
province: null,
country: null,
session_key: null,
unionid: null, }
},
onLoad() { //默认加载
var _this = this;
//console.log(uni.getUserProfile);
if (uni.getUserProfile) {
this.canIGetUserProfile = true;
}
// console.log(this.canIGetUserProfile)
//判断若是版本不支持新版则采用旧版登录方式
//查看是否授权
if (!this.canIGetUserProfile) {
uni.getSetting({
success: function(res) {
if (res.authSetting['scope.userInfo']) {
uni.getUserInfo({
provider: 'weixin',
success: function(res) {
// console.log(res);
_this.userInfo = res.userInfo;
try {
uni.setStorageSync('isCanUse', false);
_this.login();
} catch (e) {}
},
fail(res) {}
});
} else {
// 用户没有授权
console.log('用户还没有授权');
}
}
});
} },
methods: {
//第一次授权
bindGetUserInfo(e) {
var _this = this;
if (this.canIGetUserProfile) {
//新版登录方式
uni.getUserProfile({
desc: '登录',
success: (res) => {
_this.userInfo = res.userInfo;
try {
_this.login();
} catch (e) {}
},
fail: (res) => {
console.log('用户还没有授权');
}
});
} else {
if (e.detail.userInfo) {
_this.userInfo = e.detail.userInfo;
try {
_this.login();
} catch (e) {}
} else {
console.log('用户拒绝了授权');
//用户按了拒绝按钮
}
}
},
//登录
login() {
let _this = this;
// 获取登录用户code
uni.getProvider({
service: 'oauth',
success: function(res) {
if (~res.provider.indexOf('weixin')) {
uni.login({
provider: 'weixin',
success: function(res) {
// console.log(res);
if (res.code) {
let code = res.code;
uni.request({
url: 'https://api.wyzdjg.top/userinfo',
data: {
code: code,
},
method: 'GET',
header: {
'content-type': 'application/json'
},
success: (res2) => {
console.log(res2);
console.log(123)
_this.detail = res2.data.data;
_this.updateUserInfo();
uni.hideLoading();
}
});
//将用户登录code传递到后台置换用户SessionKey、OpenId等信息
//...写用code置换SessionKey、OpenId的接口
//置换成功调用登录方法_this.updateUserInfo();
} else {
uni.showToast({
title: '登录失败!',
duration: 2000
});
}
},
});
} else {
uni.showToast({
title: '请先安装微信或升级版本',
icon: "none"
});
}
}
//
});
},
//向后台更新信息
updateUserInfo() {
let _this = this;
// console.log(_this);
uni.request({
url: 'https://api.wyzdjg.top/updateinfo', //服务器端地址
data: {
openid: _this.detail.openid,
nickname: _this.userInfo.nickName,
avatarUrl: _this.userInfo.avatarUrl,
gender: _this.userInfo.gender,
city: _this.userInfo.city,
province: _this.userInfo.province,
country: _this.userInfo.country,
session_key: _this.detail.session_key,
unionid: _this.detail.unionid,
},
method: 'POST',
header: {
'content-type': 'application/json'
},
success: (res) => {
console.log(res)
if (res.data.code == 200) {
uni.reLaunch({ //信息更新成功后跳转到小程序首页
// url: '/pages/index/index'
});
}
} });
}
}, }
</script>

uniapp小程序新版授权登录的更多相关文章

  1. WebAPI 微信小程序的授权登录以及实现

    这个星期最开始 ,老大扔了2个任务过来,这个是其中之一.下面直接说步骤: 1.  查阅微信开发文档  https://developers.weixin.qq.com/miniprogram/dev/ ...

  2. 微信小程序第三方授权登录

    登录流程时序图: 1.调用uni.getProvider()获取服务供应商,参数service确定是选择对应的什么操作,此处选择授权登录oauth 代码如下: 2.调用登录接口uni.login(), ...

  3. 使用uView UI+UniApp开发微信小程序--微信授权绑定和一键登录系统

    在前面随笔<使用uView UI+UniApp开发微信小程序>和<使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转>介绍了微信小程序的常规登录处理和验 ...

  4. 微信小程序+php 授权登陆,完整代码

    先上图        实现流程: 1.授权登陆按钮和正文信息放到了同一个页面,未授权的时候显示登陆按钮,已授权的时候隐藏登陆按钮,显示正文信息,当然也可以授权和正文分开成两个页面,在授权页面的onlo ...

  5. 微信小程序拒绝授权后提示信息以及重新授权

    wx.authorize({ scope: 'scope.writePhotosAlbum', success() { // 授权成功 wx.saveImageToPhotosAlbum({ file ...

  6. 微信小程序实现与登录

    一.小程序的实现原理 在小程序中,渲染层和逻辑层是分开的,双线程同时运行,渲染层和逻辑层这两个通信主体之间的通讯以及通讯主体与第三方服务器之间的通信,都是通过微信客户端进行转发.小程序启动运行两种情况 ...

  7. 微信小程序API~检查登录状态

    wx.checkSession(Object object) 检查登录态是否过期. 通过 wx.login 接口获得的用户登录态拥有一定的时效性.用户越久未使用小程序,用户登录态越有可能失效.反之如果 ...

  8. Authing新功能——小程序扫码登录

    近期,Authing 发布了新功能--小程序扫码登录. 小程序扫码登录指使用Authing小程序身份管家在网页端或其它客户端执行微信登录,目前的SDK仅支持客户端JavaScript.其它语言若想使用 ...

  9. PHP实现支付宝小程序用户授权的工具类

    背景 最近项目需要上线支付宝小程序,同时需要走用户的授权流程完成用户信息的存储,以前做过微信小程序的开发,本以为实现授权的过程是很简单的事情,但是再实现的过程中还是遇到了不少的坑,因此记录一下实现的过 ...

随机推荐

  1. 老子云AMRT全新三维格式正式上线,其性能全面超越现有的三维数据格式

    9月16日,老子云AMRT全新三维格式正式上线,其性能远超现有的三维数据格式.目前已有含国家超算长沙中心.中科院空间所.中车集团等上百家政企事业单位的项目中使用了AMRT格式,大大提升了可视化项目的开 ...

  2. JavaScript有哪些数据类型,它们的区别?

    基本数据类型:number.string.boolean.Undefined.NaN(特殊值).BigInt.Symbol 引入数据类型:Object NaN是JS中的特殊值,表示非数字,NaN不是数 ...

  3. JavaScript中动态生成表格

    动态生成表格,首先需要输入并获取动态的数字,html中结构代码如下:行:<input type="text" id="row" value="5 ...

  4. 集成学习——Adaboost(手推公式)

  5. SAP BPC 清除CUBE 中的数据

    原理:先根据模型和查询条件取出数据,然后把金额设置为0,再写回CUBE. 1.获取数据并清空金额 *&--------------------------------------------- ...

  6. UiPath视频教程

    UiPath机器人企业框架简介https://www.bilibili.com/video/BV1SK411L7u9 UiPath借助第三方Pdf软件工作https://www.bilibili.co ...

  7. UiPath参数介绍和使用

    一.参数介绍 用于将数据从一个项目传递到另一个项目.在全局意义上,它们类似于变量,因为它们动态地存储数据并传递给它.变量在活动之间传递数据,而参数在自动化之间传递数据.因此,它们使你能够一次又一次地重 ...

  8. 【Python】和【Jupyter notebook】的正确安装方式?

    学了那么久Python,你的Python安装方式正确吗?今天给你看看什么才是Python正确的安装方式,教程放在下面了,喜欢的记得点赞. Python安装 Python解答Q群:660193417## ...

  9. 『现学现忘』Docker基础 — 41、将本地镜像推送到阿里云

    目录 1.准备工作 2.阿里云容器镜像仓库的使用 (1)创建命名空间 (2)创建容器镜像 (3)查看阿里云镜像仓库的信息 3.将本地Docker镜像推送到阿里云 (1)登陆阿里云 (2)给镜像生成版本 ...

  10. 博客从 CloudBase 迁移至云主机

    迁移起因 原来的博客 其实从很久以前就想要写博客,但总是断断续续的,一直都没有认真地开始. 最终,决定使用静态博客工具作为自己博客的承载体.在多种工具的比较下,最终选择了 Hugo 并部署到 Gith ...