微信小程序的授权登录功能

注意：首先微信小程序是不能一进入小程序就让用户授权登录的，一进入小程序就让用户授权登录，是审核不通过的；

图一的这个提示框是我自己写的；要想弹出微信的微信授权提示框，必须用一个按钮来触发，可用授权登录这个按钮来让微信授权这个弹窗显示，具体代码如下：

index.wxml

  <view class="tc" wx:if="{{isShow}}" bindtap="hidden"><view class="inner" wx:if="{{isShow}}"><view class='header'><image src='../../image/logo.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>

index.wcss

/* 授权提示框css,start */
.tc {position: fixed;top: 0;height: 100vh;width: 100%;background: rgba(0, 0, 0, 0.5);z-index: 900;
}
.inner {background: #fff;margin: 0rpx 30rpx 0 30rpx;padding: 0 30rpx;height: 630rpx;border-radius: 10rpx;position: relative;top: 18%;z-index: 1000;
}
.header {border-bottom: 1px solid #ccc;text-align: center;height: 300rpx;margin: 0 auto;line-height: 450rpx;
}
.header image {width: 200rpx;height: 200rpx;
}
.content {margin-left: 50rpx;margin-bottom: 70rpx;
}
.content>view {margin-top: 10rpx;
}
.content text {display: block;color: #9d9d9d;margin-top: 20rpx;
}
.bottom {border-radius: 80rpx;font-size: 35rpx;padding: 25rpx 10rpx;
}
/* 授权提示框css,end */

index.js

  bindGetUserInfo(e) {if (e.detail.userInfo) {
//将e.detail.userInfo存入缓存wx.setStorage({key: "userInfo",data: e.detail.userInfo})this.logIn();} else {//用户按了拒绝按钮wx.showModal({title: '警告' ,content:  '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!' ,showCancel: false,confirmText: '返回授权' ,success: function(res) {// 用户没有授权成功，不需要改变 isHide 的值if (res.confirm) {console.log('用户点击了“返回授权”');}}});}},logIn() { wx.login({success: res => {
// 请求后台地址，使用 code 换取 openid 和 session_key 等信息 call.request_post("/counseling/webUserProfile/loginByWeiXin", {code: res.code},res => {
// 成功会掉函数},err => {
// 失败回调函数wx.showToast({title: err.message})})}})},

微信小程序的授权登录功能相关推荐

微信小程序之授权登录（附完整源码）
个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:http://zwd596257180.gitee.io/blog/2019/04/15/wec ...
微信小程序之授权登录
微信小程序之授权登录之前微信授权登录时是直接可以通过getUserInfo接口弹出授权弹窗.由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通 ...
微信登录后台 java_Java 后端（Spring boot）+微信小程序的授权登录
微信小程序的授权登录第一.Java后端代码如下登录的接口的参数是微信小程序前端必须要传的参数微信小程序登录.授权的用户基本信息 wx.getUserInfo 特别注意 appid 和secret. ...
微信小程序之授权登录--项目需要
1.由于项目需要,需要实现自己的微信小程序用微信授权登录. 2.参考此项目https://blog.csdn.net/weidong_y/article/details/79636386 3.其中的 ...
企业微信小程序_授权登录接口获取用户userid
文章目录一.前置知识 1. 阅读企业微信小程序开发文档 2. 企业微信小程序登录流程 3. 微信小程序区别二.前端部分 2.1. 调用登录接口 2.2. 请求后端接口 2.3. 项目源码三.后 ...
微信小程序手机号授权登录
文章目录小程序端服务端注意事项微信小程序,手机号授权登录需求. 大体流程是这样的: 小程序端使用 getPhoneNumber 向微信平台获取授权通过微信授权后,小程序端接收微信授权后的回调 ...
【Springboot】整合wxjava实现微信小程序：授权登录
文章目录一.wxjava是什么二.使用步骤 1.引入依赖 2.配置yml 3.小程序的配置 4.后端的业务逻辑代码 controller service impl dto 5.前端的业务逻辑代码 ...
微信小程序手机号+授权登录
wxml页面 <view class="input-container"><view class="input-button-container row ...
微信小程序+PHP 授权登录
小程序页面代码  <button bindtap="wxlogin">微信授权登录< ...

微信小程序的授权登录功能

微信小程序的授权登录功能相关推荐

最新文章

热门文章