uni-app之APP和小程序微信授权方法


Posted in Javascript onMay 09, 2019

uni-app 介绍

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。

适用平台:Android、iOS、微信小程序。实现了一套代码,同时发布到Android、iOS、微信小程序。

参考官方:https://uniapp.dcloud.io/

APP微信授权

检测服务商

检测手机上是否安装微信、QQ、新浪微博等。

uni.getProvider({
  service: 'oauth',
  success: function (res) {
    console.log(res.provider);
  }
});

uni-app之APP和小程序微信授权方法

授权登录

获取openid,(unionid)等
uni.login({
  provider: 'weixin',
  success: function (loginRes) {
    console.log(JSON.stringify(loginRes));
  }
});

获取用户信息

uni.getUserInfo({
	provider: 'weixin',
	success: function(infoRes) {
		console.log('-------获取微信用户所有-----')
		console.log(JSON.stringify(infoRes.userInfo));
	}
});

示例代码

<!-- #ifdef APP-PLUS -->
<button class="" @click="appLogin">APP微信授权登录</button>
<!-- #endif -->
		
appLogin: function() {
	uni.getProvider({
		service: 'oauth',
		success: function(res) {
			console.log(res.provider);
			//支持微信、qq和微博等
			if (~res.provider.indexOf('weixin')) {
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log('-------获取openid(unionid)-----');
						console.log(JSON.stringify(loginRes));
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								console.log('-------获取微信用户所有-----');
								console.log(JSON.stringify(infoRes.userInfo));
							}
						});
					}
				});
			}
		}
	});
},

小程序微信授权

获取用户基本信息

为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息。

小程序使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。

参考官方:https://developers.weixin.qq.com/miniprogram/dev/component/button.html

示例代码:

<!-- #ifdef MP-WEIXIN -->
<button class="" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">微信授权获取用户信息</button>
<!-- #endif -->

wxGetUserInfo:function(res){
	if (!res.detail.iv) {
		uni.showToast({
			title: "您取消了授权,登录失败",
			icon: "none"
		});
		return false;
	}
	console.log('-------用户授权,并获取用户基本信息和加密数据------')
	console.log(res.detail);
},

微信登录

参考官方:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

(1)页面uni.login获取code

(2)后端通过code获取sessionKey、openid(unionid)等,后端调用接口如下:
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

(3)示例代码

<!-- #ifdef MP-WEIXIN -->
<button class="" @click="wxLogin">微信登录</button>
<!-- #endif -->

wxLogin: function() {
	uni.login({
		provider: 'weixin',
		success: function(loginRes) {
			console.log('-------获取code-------')
			console.log(loginRes.code);
			wx.request({
				url: 'https://xxxxx'+loginRes.code,
				success: function(info) {
					console.log('-------获取sessionKey、openid(unionid)-------')
					console.log(info);
				},
				fail: function(e) {
					console.log(e)
				}
			})
		}
	});
}

微信登录状态监测

<!-- #ifdef MP-WEIXIN -->
<button class="" @click="checkLogin">微信登录检测</button>
<!-- #endif -->

checkLogin: function() {
	wx.checkSession({
		success() {
			console.log('ok');
			// session_key 未过期,并且在本生命周期一直有效
		},
		fail() {
			// session_key 已经失效,需要重新执行登录流程
			//wx.login() // 重新登录
			console.log('expire');
		}
	})
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript动态创建div的方法
Feb 09 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
vue环境搭建简单教程
Nov 07 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 #Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 #Javascript
JS原型与继承操作示例
May 09 #Javascript
详解微信小程序回到顶部的两种方式
May 09 #Javascript
jquery登录的异步验证操作示例
May 09 #jQuery
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 #Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 #Javascript
You might like
php过滤敏感词的示例
2014/03/31 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
python读写ini配置文件方法实例分析
2015/06/30 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
python实现邮件发送功能
2019/08/10 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
怎么写好自荐信
2013/10/30 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
保密承诺书
2014/03/27 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
昆虫记读书笔记
2015/06/26 职场文书
python 离散点图画法的实现
2022/04/01 Python