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实现Java的List功能(实例讲解)
Nov 07 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
layui的table中显示图片方法
Aug 17 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 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加MYSQL服务器
2006/10/09 PHP
PHP Pear 安装及使用
2009/03/19 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php GeoIP的使用教程
2011/03/09 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
用python与文件进行交互的方法
2018/03/01 Python
Python统计单词出现的次数
2018/04/04 Python
python实现微信自动回复功能
2018/04/11 Python
Python实现弹球小游戏
2020/08/01 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
家庭户外服装:Hawkshead
2017/11/02 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
前台文员岗位职责
2013/12/28 职场文书
小学中秋节活动方案
2014/02/06 职场文书
银行求职自荐信
2014/06/30 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
写给父母的感谢信
2015/01/22 职场文书
安全第一课观后感
2015/06/18 职场文书
Nginx 匹配方式
2022/05/15 Servers