黯然微信小程序杂记（二）：小程序最新版登录并进行缓存模块的实现附源码

黯然微信小程序杂记（二）：小程序最新版登录进行缓存模块的实现附源码

一、功能描述
二、mine.wxml界面图片
三、mine.wxml代码
四、mine.wxss代码
五、mine.js代码
六、app.js代码
七、源码怎么用？
查看下一篇

CSDN私信我，有关微信小程序的事情可以交流讨论，共同学习！

一、功能描述

由于微信官方更改了 getUserInfo、authorize 接口，无法弹出授权窗口，大家可以在微信小程序开发者工具
看到会提示接口过期。所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 组件点击之后触
发登录事件。
本登录模块还实现了用户信息缓存功能。

二、mine.wxml界面图片

登录前：

点击登录后：

三、mine.wxml代码

<view class="container"><!--用户信息--><view class="category-item"><view class="personal-info"><view class="user-avatar"><image wx:if="{{userInfo}}" src="{{userInfo.avatarUrl}}"></image><image wx:else src="/icons/wx_app_unline.png"/></view><view class="user-name"><view class="user-nickname"><text wx:if="{{userInfo}}">{{userInfo.nickName}}</text><button class='in' wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">登录/注册</button></view><view class="user-location"><open-data wx:if="{{userInfo}}" type="userCity" lang="zh_CN"></open-data></view></view></view></view>

四、mine.wxss代码

.container {background-color: #efeff4;width: 100%;height: 100%;flex-direction: column;display: flex;align-items: center;min-height: 100vh;color:#7F8389;font-size:24rpx;
}
.category-item {width: 100%;margin: 0 0 20rpx 0;border-top: 1rpx solid #d9d9d9;border-bottom: 1rpx solid #d9d9d9;background-color: #fff;
}
/*******************用户和相关操作*************************************/
/*用户*/
.personal-info {height: 130rpx;display: flex;padding: 20rpx 0;
}
.personal-info .user-avatar {margin: 0 30rpx;width: 130rpx;height: 130rpx;position: relative;
}
.personal-info .user-avatar image {vertical-align: top;width: 100%;height: 100%;position: absolute;top: 0;left:0;border-radius: 50%;
}
.personal-info .user-name {margin-right: 30rpx;flex: 1;padding-top: 10rpx;
}
.user-name .user-nickname{color:black;font-size:36rpx;
}

五、mine.js代码

var app = getApp();
Page({data: {hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo')},onLoad: function () {if (app.globalData.g_userInfo) {this.setData({userInfo: app.globalData.g_userInfo,hasUserInfo: true})} else if (this.data.canIUse) {app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}}},getUserInfo: function (e) {console.log("mine.js执行登录按钮事件")app.globalData.g_userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})}})

六、app.js代码

//app.js
App({onLaunch: function () {this._getUserInfo();//加载登录函数
},// 获取用户信息
_getUserInfo: function () {var userInfoStorage = wx.getStorageSync('user');//从缓存中取出用户信息if (!userInfoStorage) {//如果没有用户信息缓存var that = this;wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {wx.getUserInfo({success: res => {console.log("app.js调用api获取用户信息");that.globalData.g_userInfo = res.userInfo//设置app的全局变量if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}wx.setStorageSync('user', res.userInfo)//设置用户信息缓存},fail: function (res) {console.log(res);}})}}})}else {console.log("app.js从缓存中获取用户信息");this.globalData.g_userInfo = userInfoStorage;//有用户信息缓存直接取出给全局变量}
},globalData: {userInfo: null
}
})

七、源码怎么用？

app.js微信小程序是有固定位置的；
mine.wxml、mine.wxss、mine.js只要在同一个目录下就行，目录路径无所谓。
完成登录功能请把以上代码全复制粘贴过去。
本登录功能还实现了微信小程序的缓存功能。不缓存的微信小程序不是个小程序！缓存很重要！

查看下一篇

黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码

黯然微信小程序杂记（二）：小程序最新版登录并进行缓存模块的实现附源码相关推荐

Python Turtle:小海龟创意绘画，仰望星空，脚踏实地，配有背景音乐哦！（附源码，可以学习如何添加背景音乐，如何使用渐变色）
国庆放假,给大家带来一些治愈心灵的小创作!!! 网盘里的文件大家可以直接看效果(永久有效)!!(有背景音乐记得打开电脑声音哦) 链接:https://pan.baidu.com/s/1RrnwQX7E ...
微信小程序识别当前小程序的版本，开发版、体验版、线上版（附源码）
envVersion: 'develop', //开发版 envVersion: 'trial', //体验版 envVersion: 'release', //正式版核心代码: console.l ...
❤️Python制作表白小程序，七夕能不能脱单就全靠它了！❤️（附源码）
眼看七夕就要来了,我已经预感到我那天会忙的不可开交.因为我早上要卖花,晚上要卖TT,凌晨我还得蹲酒店门口卖yao,顿时感觉生活好艰辛啊. 虽然有点小丢人,但是我一点也不担心,因为我能碰到同行的几率很低 ...
【Python小游戏】当当当当万众瞩目得《滑雪大冒险》来啦~（附源码）
前文大家好!我是梨子同学! 希望大家多多支持我!哈哈为了感谢每一个关注我的小可爱:
仿酷狗音乐播放器开发日志二十三修复Option控件显示状态不全的bug（附源码）...
转载请说明原出处,谢谢~~ 整个仿酷狗工程的开发将近尾声,现在还差选项设置窗体的部分,显然在设置窗体里用的最多的就是OptionUI控件,我在写好大致的布局后去测试效果,发现Option控件的显示效果 ...
html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序UI自动化实践：python+minium+PO模式（超详细教程附源码供下载）
文章目录前言一.minium介绍二.安装环境 1. 安装minium doc 2. 安装minium 3. 启动小程序三.准备知识 1. 启动 2. 配置 3. 命令行运行 4. 元素定位 5 ...
微信小程序「发现流浪猫」宠物互助喂养社区系统部署教程-期末作业项目实例（附源码）
文末附源码免费下载地址一.项目介绍这是一款拍照记录校园内猫猫的成长轨迹的小程序. 可以为不同的猫猫添加身份档案,猫猫相册,并通过精选瀑布流的方式展示给大家. 用户可以上传照片,发表留言,点赞照片或 ...

黯然微信小程序杂记（二）：小程序最新版登录并进行缓存模块的实现附源码

黯然微信小程序杂记（二）：小程序最新版登录进行缓存模块的实现附源码

一、功能描述

二、mine.wxml界面图片

三、mine.wxml代码

四、mine.wxss代码

五、mine.js代码

六、app.js代码

七、源码怎么用？

查看下一篇

黯然微信小程序杂记（二）：小程序最新版登录并进行缓存模块的实现附源码相关推荐

最新文章

热门文章

黯然微信小程序杂记（二）：小程序最新版登录并进行缓存模块的实现 附源码

黯然微信小程序杂记（二）：小程序最新版登录进行缓存模块的实现 附源码

一、功能描述

二、mine.wxml界面图片

三、mine.wxml代码

四、mine.wxss代码

五、mine.js代码

六、app.js代码

七、源码怎么用？

查看下一篇

黯然微信小程序杂记（二）：小程序最新版登录并进行缓存模块的实现 附源码相关推荐

最新文章

热门文章

黯然微信小程序杂记（二）：小程序最新版登录并进行缓存模块的实现附源码

黯然微信小程序杂记（二）：小程序最新版登录进行缓存模块的实现附源码

黯然微信小程序杂记（二）：小程序最新版登录并进行缓存模块的实现附源码相关推荐