微信小程序授权登录详解（附完整源码）_微信小程序注册登录界面源码,微信小程序登录界面源码 - CSDN文库

微信小程序

5星 · 超过95%的资源 105 浏览量更新于2023-03-03 评论 12 收藏 57KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

微信小程序微信小程序授权登录详解（附完整源码）授权登录详解（附完整源码）

主要介绍了微信小程序授权登录详解（附完整源码）,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定

的参考学习价值,需要的朋友可以参考下

一、前言一、前言

由于微信官方修改了 getUserInfo 接口，所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 去触发。

官方连接：https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01

二、实现思路二、实现思路

自己写一个微信授权登录页面让用户实现点击的功能，也就是实现了通过 button 组件去触发 getUserInof 接口。在用户进入微信小程序的

时候，判断用户是否授权了，如果没有授权的话就显示授权页面，让用户去执行授权的操作。如果已经授权了，则直接跳过这个页面，进

入首页。

三、界面简介三、界面简介

1.不带不带 tabBar

2.带带 tabBar

四、源码四、源码

1.index.wxml

<view wx:if="{{isHide}}">

<view wx:if="{{canIUse}}" >

<view class='header'>

<image src='/images/wx_login.png'></image>

</view>

<view class='content'>

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

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

</view>

<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">

授权登录

</button>

</view>

<view wx:else>请升级微信版本</view>

</view>

<view wx:else>

<view>我的首页内容</view>

</view>

2.index.wcss

.header {

margin: 90rpx 0 90rpx 50rpx;

border-bottom: 1px solid #ccc;

text-align: center;

width: 650rpx;

height: 300rpx;

line-height: 450rpx;

}

.header image {

width: 200rpx;

height: 200rpx;

}

.content {

margin-left: 50rpx;

margin-bottom: 90rpx;

}

.content text {

display: block;

color: #9d9d9d;

margin-top: 40rpx;

}

.bottom {

border-radius: 80rpx;

margin: 70rpx 50rpx;

font-size: 35rpx;

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论5

本本纲目

2023-07-25

文章内容结构清晰，逻辑性强，让阅读起来很舒服，不会感到乱糟糟的。

weixin_38532139

粉丝: 5
资源: 911

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈