小程序获取用户信息这部分其实不难,但是,他有点麻烦。
最开始,在小程序的app.js中的onlaunch中判断如果当前登录用户,数据库中没有用户信息,则直接调用wx.getUserInfo,弹窗获取用户信息。
但是小程序改版之后,不支持这种调用方式,官方给出的demo是使用一个button按钮来调起wx.getUserInfo这个方法来获取用户信息。
用习惯了弹窗的我,突然碰到这种方式还有点不习惯,那玩意就一个按钮,用户岂不是点不点都行了?
后来一寻思,这不死心眼了么,弹窗改按钮,其实道理上是一样的。
弹窗是判断没有用户信息弹窗
按钮,那你就判断没有用户信息,调转到一个只有获取信息按钮的页面,让他点,不点授权就用不了不就完了么。
类似我这样:
授权的代码就很简单了,新建项目的时候,示例程序已经给你带了:我这里放一下的页面的示例:
Im.js
// pages/im/im.js//获取应用实例const app = getApp();Page({ /** * 页面的初始数据 */ data: { // 是否显示授权 isHide:false, // 用户id user_id:'', // 用户头像 figureurl_wx:'', nickname:'', // 是否显示 is_show:0, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { var self = this; // 底部自定义菜单显示 if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 1 // 根据tab的索引值设置 }) } var self = this; self.getUseridFromStorage(); self.setData({ is_show:self.data.is_show }); }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, /** * 从缓存中获取用户信息 */ getUseridFromStorage:function() { var self = this; // 从缓存中获取用户id wx.getStorage({ key: 'userinfo', success (res) { self.data.user_id = res.data.id; self.data.figureurl_wx = res.data.figureurl_wx; self.data.is_show = res.data.is_show; self.data.nickname = res.data.nickname; // 判断当前用户是否授权,没授权显示授权页面 if(self.data.figureurl_wx == '') { self.data.isHide = true; } else { self.data.isHide = false; } self.setData({ isHide:self.data.isHide }); } }); }, /** * 更新用户缓存 */ updateUserinfo:function(obj) { var self = this; // 同步更新缓存 wx.setStorage({ key:"userinfo", data:obj }); // 异步获取缓存 self.getUseridFromStorage(); }, /** * 点击用户授权 */ getUserInfo: function(e) { var self = this; // 点击了拒绝 if(e.detail.errMsg == "getUserInfo:fail auth deny") { wx.showToast({ title:'请您授权!', icon: 'loading ',//图标,支持"success"、"loading" // image: '/images/load.gif', duration: 1500,//提示的延迟时间,单位毫秒,默认:1500 mask: true,//是否显示透明蒙层,防止触摸穿透,默认:false }); return; } var userinfo = e.detail.userInfo // 从storage中获取用户信息 wx.getStorage({ key: 'userinfo', success (res) { // 请求后台接口完善个人信息 wx.request({ // 请求连接 url: 'xxxxxxxx', // 请求所需要的的参数 data: { data: userinfo, user_id:res.data.id }, success(result){ self.updateUserinfo(result.data.userinfo); } }); } }) app.globalData.userInfo = e.detail.userInfo }, /** * AI聊天跳页 */ jumpToAiChat:function() { // 清除聊天缓存 wx.removeStorage({ key: 'newsList', success: function(res) {}, }); let jumpUrl = "../aichat/aichat?openid="+this.data.nickname+'&&figureurl_wx='+this.data.figureurl_wx; this.jumpPage(jumpUrl); },})
Im.wxml
<!--pages/im/im.wxml--><!-- 微信授权页面 --><view wx:if="{{isHide}}" > <view class='header'> <image src='https://guanchao.site/uploads/website/5c093bf268185.png'></image> </view> <view class='content'> <view>时间里的 申请获取以下权限</view> <text>获得你的公开信息(昵称、头像、地区及性别)</text> </view> <button class='bottom' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="getUserInfo"> 授权登录 </button></view><!-- 正常页面,使用if-else控制 --><view wx:else class="container top_view" > <view class="button_view" bindtap="jumpToAiChat"> AI聊天 </view> <view class="button_view margin10" bindtap="jumpToLiveChat"> 即时聊天 </view> <view class="button_view margin10" bindtap="jumpToLiveGame"> 即时猜拳 </view></view>
Im.wxss
/* pages/im/im.wxss *//* 登录授权部分 */.pageld{ /* width: 100%; */ /* height: 95%; */ /* background-color: #F2F2F2; */ /* margin-top: -45px; */}.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: 20rpx; margin: 70rpx 50rpx; font-size: 35rpx; background-color: #31869B; color:white;}/*列表按钮部分*/.top_view{ margin-top: 70px; font-weight: bold;}.button_view{ height: 25px; padding: 8px; padding-left: 50px; padding-right: 50px; cursor: pointer; background-color: #31869B; color: #FFFFFF; border: 1px solid #31869B; border-radius: 6px; width: 150px; text-align: center;}.margin10{ margin-top: 30px;}
以上就是我在上边动图中的页面的所有代码。很简单,有需要的同学可以参照一下。
有好的建议,请在下方输入你的评论。
欢迎访问个人博客:https://guanchao.site
欢迎访问我的小程序:打开微信->发现->小程序->搜索“时间里的”
原文:https://juejin.cn/post/7103281504444219406