惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Security Archives - TechRepublic
Security Archives - TechRepublic
T
The Exploit Database - CXSecurity.com
P
Proofpoint News Feed
Scott Helme
Scott Helme
NISL@THU
NISL@THU
Cisco Talos Blog
Cisco Talos Blog
C
Cybersecurity and Infrastructure Security Agency CISA
AWS News Blog
AWS News Blog
V
Vulnerabilities – Threatpost
J
Java Code Geeks
U
Unit 42
The GitHub Blog
The GitHub Blog
H
Help Net Security
T
Tenable Blog
aimingoo的专栏
aimingoo的专栏
Jina AI
Jina AI
Spread Privacy
Spread Privacy
Apple Machine Learning Research
Apple Machine Learning Research
人人都是产品经理
人人都是产品经理
L
Lohrmann on Cybersecurity
T
Threatpost
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Engineering at Meta
Engineering at Meta
A
About on SuperTechFans
I
InfoQ
Microsoft Azure Blog
Microsoft Azure Blog
B
Blog
L
LINUX DO - 最新话题
K
Kaspersky official blog
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
T
Threat Research - Cisco Blogs
C
Check Point Blog
T
The Blog of Author Tim Ferriss
有赞技术团队
有赞技术团队
宝玉的分享
宝玉的分享
Help Net Security
Help Net Security
Google DeepMind News
Google DeepMind News
A
Arctic Wolf
Y
Y Combinator Blog
N
News | PayPal Newsroom
M
MIT News - Artificial intelligence
Latest news
Latest news
H
Hacker News: Front Page
Blog — PlanetScale
Blog — PlanetScale
腾讯CDC
I
Intezer
爱范儿
爱范儿
F
Fortinet All Blogs
P
Palo Alto Networks Blog
C
CERT Recently Published Vulnerability Notes

韩小韩博客

你还在用真实邮箱注册网站?等等,你真的想清楚了吗? IPFS星际文件系统 最新二合一收款码 - 物理合并版 从Hexo到Astro博客1分钟迁移指南 Astro 添加 Waline 评论组件 腾讯云 EdgeOne Pages 实测对比:能否成为国内开发者的 Cloudflare Pages 最佳平替? Astro 中使用 Lenis 增加鼠标滚动阻尼感 一组手机和电脑动态壁纸分享【分享】 Astro 添加 Twikoo 评论组件 Astro主题-优雅的vhAstro-Theme【使用文档】 Fetch的GET、POST简单HTTP请求封装 一些实拍的手机壁纸 大理And威海【图】 很喜欢西湖的水【转自:狮子狮子鱼】 Tarot-塔罗牌占卜 Web Watermark 图片添加水印在线小助手 HanAnalytics访问分析Web统计托管于(Cloudflare Pages) 基于AI的微博动态心情分析 阿里云免费用9年ecs教程【适合轻量化服务如frp】 Cloudflare优选IP➕DnsPod的DDNS自动切换 混沌神器Clash全家桶 卷王都在用的变态休息法 NodeJs文本相似度去重脚本 骤雨重山无限存储图床托管于(Cloudflare Pages) 分享好看的天空和云(长期更新) Typecho转到Hexo(主题由Typecho-Joe-Theme转Butterfly主题) Typecho评论导出为Hexo的Valine、Twikoo等评论所支持的JSON文件 Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题 拼夕夕快速提现100元攻略 2024 平安喜乐 通义灵码:重塑编程的未来,引领技术革新 亚马逊CloudFront免费CDN配置教程 树莓派在Docker中部署Samba 树莓派4B(Raspberry Pi OS Lite 64-bit)安装Docker 变相跳出forEach循环 Vue3项目Build后部署在Nginx上F5刷新页面空白或404 Ant Design Vue 4.0 侧边导航栏Menu组件封装 Ant Design Vue 4.0 a-modal弹窗组件封装 Vue3 + Vite + Vue Router 4后端返回路由配置动态路由权限管理 手撸call apply bind class中函数的this指向 Vue 2与Vue 3在自定义组件v-model上的区别 Vue.set与this.$set源码 Vue底层判断标签的性能优化方法 Linux系统下使用iftop结合iptables服务解决带宽被恶意请求的问题 JS压缩图片并保留图片元信息 蓝奏云盘解析API接口 开源 原型继承和 Class 继承 DOM同级传递事件 2023年有哪些良心的流量卡推荐?爆肝给大家整理好了最新的流量卡合集 火爆全球的ChatGPT,最全的使用方法! 最实用的JavaScript一行代码 AWS教程——解决WordPress网站加载缓慢的大难题 今日热榜HotList-Web前端开源Vue - (聚合热榜) 在Fly.io上部署Alist网盘程序 利用CloudFlare的Workers和Pages反代Github并缓存实现Github文件加速访问 简单逆向某色情网站图片加密(原创) 骚扰电话API接口 开源 知乎热榜API、百度热点API、微博热搜API(开源)- 聚合热榜API开源 韩小韩API上架腾讯云HiFlow 羊了个羊在线刷通关数999999 斐讯N1盒子刷OpenWrt做主路由/旁路由(详细付配置) Adobe After Effects 2022 最新免激活版 FFMPEG视频切片TS文件添加PNG文件头伪图片上传 分享我喜欢的风景图~ 微信小程序调用摄像头实现拍照功能 烈日炎炎的夏天想要一场雨 王者荣耀、和平精英、腾讯手游扫码登录工具如何实现? 摸鱼人日历-每天60秒读懂世界-每日美女-IP签名档-API接口 按照图片尺寸自动分类 手机分辨率 电脑分辨率 python脚本 JS正则常用校验大全(精华篇) Vue项目element组件遇到的坑(记录篇持续更新) 微信小程序原生wx.request简单封装(自用版) GitHub技巧之五大隐藏技巧 WPS2019中石油专用版v11.8.2.10972 JS正则判断校验姓名、手机号及身份证号码(笔记) 记个笔记 纯CSS简单图 鼠标拖拽移动DIV 记录一下 Coding免费图床方案 白嫖破解Typora1.1.5最新版 在CloudFlare workers部署你的Hexo静态博客 胎教级搭建Hexo静态博客安装Fluid主题 2022年5个好用的 BT/ 磁力链接下载工具推荐 |Windows 、安卓系统 CloudFlare Argo Tunnel配置 - 实现内网穿透 分享9个可免费使用的网站CDN加速服务 利用免费oss对象存储实现域名防红 情侣要做的好多件事 2022年2月20日 周末·天气晴朗·心情超好·南京浦口码头 2022年2月7号 冬·雪·南京 腾讯云2022新年特惠活动 树莓派ubuntu64位系统安装宝塔 植物大战僵尸 MAC M1 版本 Mac应用程序无法打开或文件损坏的处理方法 Vue项目Element-UI表格el-table的分页el-pagination功能简单封装 前端存储之indexDB 宝塔LNMP搭建Cloudreve进程守护添加SSL证书Nginx代理 微信小程序自用Tree树形控件 2022你好 (白嫖觉)永久免费的虚拟主机合集 Typecho-Joe-Theme主题帮助文档
微信小程序登陆封装(自用版)欢迎指正
.𝙃𝙖𝙣 · 2026-04-11 · via 韩小韩博客

avatar

.𝙃𝙖𝙣

微信小程序登陆封装(自用版)欢迎指正

521 2.6分钟

Code

index.wxml

<!-- 登陆组件弹窗 -->
<van-popup show="{{ loginBtn }}" round position="bottom" custom-style="height: 24%" bind:close="onClose" duration="246">
	<view class="loginPanel">
		<view class="panel-title">我想要你的头像和昵称,可以嘛~</view>
		<view class="panel-btns">
			<van-button type="info" round bind:click="onClose">不可以</van-button>
			<van-button type="primary" round bind:click="_login">好的</van-button>
		</view>
	</view>
</van-popup>
<!-- 内容 -->
<block wx:if="{{!loginShow}}">
	<view class="loginok">
		<view>韩小韩博客 wwww.vvhan.com</view>
		<view>登录成功</view>
		<image src="{{userInfo.avatarUrl}}" mode="widthFix" />
		<view>Nick:{{userInfo.nickName}}</view>
		<view>OpenId:{{userInfo.openid}}</view>
	</view>
</block>
<block wx:else>
	<van-button class="loginbtn" plain type="info" bind:click="onClose">点击登录</van-button>
</block>

index.js

const app = getApp();
Page({
	data: {
		// 登陆按钮现实隐藏
		loginBtn: false,
		// 全局是否登陆
		loginShow: false,
		// 用户信息
		userInfo: {}
	},
	async onLoad() {
		const _res = await app._checkLogin();
		this.setData({
			loginBtn: _res,
			loginShow: _res,
			userInfo: app.globalData.userInfo
		});
	},
	// 登陆
	async _login() {
		const _res = await app._getUserInfo();
		_res &&
			this.setData({
				userInfo: app.globalData.userInfo,
				loginBtn: false
			}),
			this.onLoad();
	},
	// 关闭登陆弹窗
	onClose(e) {
		this.setData({
			loginBtn: e.type == "click" ? !this.data.loginBtn : false
		});
	}
});

app.js

App({
  onLaunch: function () {
    // 全局变量
    this.globalData = {
      openId: wx.getStorageSync('openId'),
      userInfo: wx.getStorageSync('userInfo')
    };
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力');
    } else {
      wx.cloud.init({
        // env 参数说明:
        //   env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境(第一个创建的环境)
        // env: 'my-env-id',
        traceUser: true,
      });
    }
    // 微信小程序获取版本更新
    const updateManager = wx.getUpdateManager()
    updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
    })
    updateManager.onUpdateReady(function () {
      wx.showModal({
        title: '小韩提示',
        content: '新版来袭,速来体验!',
        success: function (res) {
          if (res.confirm) {
            updateManager.applyUpdate()
          }
        }
      })
    })
    updateManager.onUpdateFailed(function () {
      // 新版本下载失败
    });

    // 获取OpedId
    this._getOpenId()
  },
  // 获取用户OpenId
  _getOpenId() {
    ((this.globalData.openId || '') == '') && wx.cloud.callFunction({
      name: 'login'
    }).then(res => {
      this.globalData.openId = res.result.openid;
      wx.setStorageSync('openId', res.result.openid)
    }).catch(res => {
      console.error(res)
    });
  },
  // 判断是否登陆
  async _checkLogin() {
    const _this = this
    return new Promise((resolve) => {
      wx.checkSession({
        success: function (_res) {
          const _userInfo = wx.getStorageSync('userInfo');
          resolve((_userInfo || '') === '')
        },
        fail: async function (_res) {
          await wx.login({})
          resolve(true)
        }
      })
    })
  },
  // 获取用户信息并存储
  async _getUserInfo() {
    return new Promise((resolve) => {
      wx.getUserProfile({
        desc: 'get用户信息',
        success: async res => {
          res.userInfo.openid = this.globalData.openId
          this.globalData.userInfo = res.userInfo
          wx.setStorageSync('userInfo', res.userInfo)
          resolve(true)
        },
        fail: () => {
          resolve(false)
        }
      });
    })
  },
});
});
微信小程序