浅谈小程序如何授权登录，获取信息和手机号（小程序手机号授权）

浅谈小程序如何授权登录，获取信息和手机号（小程序手机号授权）

本篇文章给大家分享一下微信小程序实现授权登录，并获取用户信息和手机号的方法。

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

相关学习推荐：小程序开发教程

1.全局判断

App({ onLaunch: function () { //调用API从本地缓存中获取数据 // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) var that = this; //获取用户本地是否是第一次进入新版本 var versions = wx.getStorageSync('versions'); console.log('versions:' + versions); //判断是不是需要授权 if (versions == '1'){ // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo console.log(that.globalData.userInfo) }, fail: function () { wx.redirectTo({ url: '../wurui_house/pages/login/index', }) } }) }else{ //未授权, 跳转登录页面 wx.redirectTo({ url: '../wurui_house/pages/login/index', }) } }, onShow: function () { // console.log(getCurrentPages()) }, onHide: function () { // console.log(getCurrentPages()) }, onError: function (msg) { //console.log(msg) }, util: require('we7/resource/js/util.js'), tabBar: { "color": "#123", "selectedColor": "#1ba9ba", "borderStyle": "#1ba9ba", "backgroundColor": "#fff", "list": [ ] }, getLocationInfo: function (cb) { var that = this; if (this.globalData.locationInfo) { cb(this.globalData.locationInfo) } else { wx.getLocation({ type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标 success: function (res) { that.globalData.locationInfo = res; cb(that.globalData.locationInfo) }, fail: function () { // fail }, complete: function () { // complete } }) } }, globalData: { userInfo: null, appid: "", appsecret: "", }, siteInfo: require('siteinfo.js')});-

2.login登录页判断

（一）index.wxml

请依次允许获得你的公开信息及手机号码 {{AuthorizedLogin}} {{UserPhone}} 请升级微信版本-

（四）index.wxss

.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;} /* .operBtn{ border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx;}.operBtns{ background: #eef0ed !important; border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx; color: #000300 !important;} */.hide{ border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx; display: none;}.show{ display: block; /* background: #eef0ed !important; */ border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx; /* color: #000300 !important; */}-

（三）index.js

2.某个详情页手机号授权判断

使用的遮罩层写法

（一）index.html

允许授权获取手机号 取消 确认 -

（二）index.wxss

/* 手机号授权 */.float { height: 100%; width: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.5); z-index: 2; top: 0; left: 0;}.floatContent { /* padding: 20rpx 0; */ width: 80%; background: #fff; margin: 40% auto; border-radius: 20rpx; display: flex; flex-direction: column; justify-content: space-around; align-items: center; position: relative; height: 255rpx;}.floatContent text { color: #000; font-size: 40rpx; display: block; margin: 0 auto; position: absolute; top: 50rpx; /* text-align: center; */ /* line-height: 60rpx; */ border-radius: 30rpx; }.floatText{ width: 100%; height: 100rpx; display: flex; justify-content: flex-start; position: absolute; bottom: 0;}.btn-cancle{ line-height: 100rpx; flex: 1; margin: 0; padding: 0; border-radius: none;}-

（三）index.js

链接：https://pan.baidu.com/s/1E7d33scSpk1tiq_Ndium2g提取码：ll9i复制这段内容后打开百度网盘，-util.js

更多编程相关知识，请访问：编程入门！！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。