一、解题思路：

微信授权登录（获取用户信息）
1.先获取用户信息——用户授权允许后，通过调用uni.login 可以获取到code。
2.拿着获取到的code去调用——登录接口，可以获取到token。
3.把token存入缓存。就可以在页面判断是否登录了。

二、代码

<view @click="getUserInfo()">点击登录</view><script>export default {data() {return {localtoken: ''}},onLoad() {},onHide() {},onShow() {this.localtoken = uni.getStorageSync('localtoken');},methods: {getUserInfo() {var that = this;uni.showLoading({ // 展示加载框title: '加载中',});uni.getUserProfile({ //获取到用户信息desc: '登录后可同步数据',success: async (obj) => {console.log('obj', obj);that.nickName = obj.userInfo.nickName //用户名that.avatarUrl = obj.userInfo.avatarUrl //用户头像// 调用 action ，请求登录接口uni.login({provider: 'weixin',success: (res) => {console.log('res-login', res);//获取到codethat.code = res.code;// console.log('code', res.code);//请求登录接口if (res.errMsg == 'login:ok') {var params = {code: that.code,nickname: that.nickName,avatar: that.avatarUrl}that.$api.appPlateForm('POST', 'auth/login', params, function(res) {if (res.code == 200) {uni.showToast({title: '登录成功',icon: 'success',mask: true,});//获取到token 存入缓存。通过有无token来判断是否登录// console.log('登录接口',res)uni.setStorageSync('localtoken', res.data.data.access_token)that.myProfile()  //用户信息接口that.getHistoryList()   //足迹接口}}, function(err) {uni.showToast({icon: 'none',title: err.msg})});}},});},fail: () => {uni.showToast({title: '授权已取消',icon: 'error',mask: true,});},complete: () => {// 隐藏loadinguni.hideLoading();},});},//退出登录logOut() {var that = thisuni.showModal({title: '确定要退出登录吗？',success: function(res) {if (res.confirm) {uni.removeStorageSync('token')that.nickname = ''that.headimgurl = ''} else if (res.cancel) {// console.log('用户点击取消');}}});},}}
</script>

三、效果展示

ending~

【微信授权登录】uniapp开发小程序，实现获取微信授权登录功能相关推荐

【微信小程序】uniapp开发小程序如何使用微信云托管或云函数进行云开发
一. 申请微信云托管这个不用说吧必须的,官方地址在这.直接进去申请就行. 但是前提是你得会创建docker file,学习掌握一些基本的docker知识,会让你创建环境变得简单一点.环境创建完成之后 ...
uniapp开发小程序推送微信消息
效果 //处理自己的逻辑freeClick() {this.getPushTempletes(()=> {this.$u.post('/fkmpPay/getExperiencePackage' ...
uni-app开发小程序直播功能
uni-app开发小程序直播功能 1.微信后台申请插件开通 2.微信后台开通直播功能 3.代码中接入直播插件AppID 4.[直播组件]如何使用 5.直播组将状态获取微信开发直播功能,需要企业账号: ...
uni-app 开发小程序,使用到u-charts.js时会出现弹框或下拉框部分与图标重叠的情况(还有在解决过程中出现 vasToTempFilePath: fail canvas is empty)
如下图,是我用uni-app开发小程序时出现视图与弹框或下拉框重叠的效果图,在微信开发工具上显示正常,但到了真机上就这样. 解决措施: 在小程序中canvas层级过高,导致z-index也无法让弹窗置 ...
uniapp开发小程序，引入腾讯兔小巢插件，兔小巢页面导航头部样式错乱问题
uniapp开发小程序,引入腾讯兔小巢插件,导航头部样式错乱问题 uniapp开发小程序,引入腾讯兔小巢插件,导航头部样式错乱问题 uniapp开发微信小程序,所有页面头部导航都是自定义的,引入腾讯兔 ...
uni-app开发小程序并运行起来(使用ColorUI)
uni-app开发小程序步骤详解最近接到一个项目开发一个小程序主要是早教的培训机构使用打算用uni-app来开发小程序到时候打包成小程序就可以了主要是用uni-app配合colorui使用 ...
微信小程序 - 使用 uni-app 开发小程序以及部分功能实现
文章目录一.uni-app 1.简介 2.开发工具 3.新建 uni-app项目 4.把项目运行到微信开发者工具二.实现tabBar效果 1.创建tabBar页面 2.配置tabBar 三.配置网 ...
Uniapp开发小程序引入微信快递跟踪（快递100）插件
目录 1.小程序插件接入 2.代码示例 3.页面接收参数 4.常用快递100公司编码表 1.小程序插件接入微信快递100插件地址:快递100-快递查询(免费接入) | 微信服务市场 (qq.com) ...
uni-app开发小程序以及项目部署流程
作者也是刚开始接触小程序开发,本次小程序开发使用的uni-app,记录下小程序的开发过程. 前期准备工作作者使用的开发工具:HBuilder x.微信开发者工具. 创建uni-app项目详细步骤可 ...
腾讯系:微信，公众号，小程序，企业微信开发知识概括
腾讯系:公众号,小程序,企业微信等等开发知识概括企业微信公众号小程序微信开放平台总结企业微信第三方应用开发(sass服务商): 概述:第三方应用接口旨在方便企业微信管理员通过简单的操作来 ...

【微信授权登录】uniapp开发小程序，实现获取微信授权登录功能

一、解题思路：

二、代码

三、效果展示

ending~

【微信授权登录】uniapp开发小程序，实现获取微信授权登录功能相关推荐

最新文章

热门文章