跌宕起伏的小程序之登录组件

2023-11-22 10:31

本文主要是介绍跌宕起伏的小程序之登录组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

缘起?

开始的开始,简单粗暴。在微信小程序里,一行wx.getUserInfo即可弹窗用户授权登陆。大部分小程序图省事,直接在打开小程序的时候就调这个方法。所以那时候一个印象就是随便打开一个小程序,进去就是弹窗让我登陆,想拿我的微信信息,给人一种不安全的感觉。

当时的代码长这样:

<script>
wx.getUserInfo({success(res) {// res.userInfo 用户信息}
})
</script>

如果要与业务结合起来,通常会是这样(以下代码示例均使用wepy框架):

<template><!-- 下面这个操作需要用户登陆 --><view @tap="clickA">需要登陆操作A</view><view @tap="clickB">需要登陆操作B</view>
</template>
<script>
{methods = {clickA () {await getUserInfo() // wx.getUserInfo 封装在这里面// 接着写A的业务逻辑}clickB () {await getUserInfo()// 接着写B的业务逻辑}}
}</script>

变数?

为了防止滥用,微信后来决定调整这个交互,改变了授权登陆流程。于是就发布了一个公告,很突然的,就是直接调wx.getUserInfo不再弹窗询问用户是否授权。而是需要使用原生button组件,用户实际操作点击了屏幕才能触发。

640?wx_fmt=gif

此时的代码变成了这个熊样:

<template><button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">点击授权登陆</button>
</template>
<script>{methods = {bindGetUserInfo (e) {// e.detail.userInfo 用户信息}}}
</script>

看上去问题不大,其实已经原地爆炸。现在如果和业务结合起来就会有很多赘余代码:

<template><view><button class="auth-btn" open-type="getUserInfo" bindgetuserinfo="clickA"></button>需要登陆操作A</view><view><button class="auth-btn" open-type="getUserInfo" bindgetuserinfo="clickB"></button>需要登陆操作B</view>
</template>
<script>{methods = {clickA (e) {if (e.detail.errMsg === 'getUserInfo:ok') {// 接着写A的业务逻辑}}clickB (e) {if (e.detail.errMsg === 'getUserInfo:ok') {// 接着写B的业务逻辑}}}}
</script>
<style lang="less">.auth-btn {// 使其cover在父容器上并透明}
</style>

之前接手过一个遗留项目,里面密密麻麻充斥着这种代码,我看5分钟吐了3次?。DRY!DRY!DRY!有代码洁癖加重度强迫症的我完全不能忍。

归途?

作为一个有追求的追风少年,思虑良久,得想个辙?,不然之后的开发生涯就充斥着难受。wepy是一个组件化的小程序框架,可以像写vue组件一样去写小程序的自定义组件。于是就有了一个很自然的想法。把登陆按钮封装起来,使其足够方便。

最后的最后,组件化后的代码长这样?:

<template><view><LoginButton1 @tap.user="clickA"></LoginButton1>需要登陆操作A</view><view><LoginButton2 @tap.user="clickB"></LoginButton2>需要登陆操作B</view>
</template>
<script>import LoginButton from '@/components/LoginButton'{components = {LoginButton1: LoginButton,LoginButton2: LoginButton,}methods = {clickA () {// 直接写A的业务逻辑}clickB () {// 直接写B的业务逻辑}}
</script>

{ LoginButton1: LoginButton, LoginButton2: LoginButton }这个诡异的写法主要是因为wepy的组件是静态组件(其实就是编译时代码复制),导致每实例化一个都要分配一个id?。据说wepy即将发布2.0版本,会解决这个问题,甚是期待。

这可能不是最优方案,但确实方便了许多。

临末,送大家个福利?

qr-code-258.jpg

转载于:https://www.cnblogs.com/iovec/p/10495092.html

这篇关于跌宕起伏的小程序之登录组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/409518

相关文章

Security OAuth2 单点登录流程

单点登录(英语:Single sign-on,缩写为 SSO),又译为单一签入,一种对于许多相互关连,但是又是各自独立的软件系统,提供访问控制的属性。当拥有这项属性时,当用户登录时,就可以获取所有系统的访问权限,不用对每个单一系统都逐一登录。这项功能通常是以轻型目录访问协议(LDAP)来实现,在服务器上会将用户信息存储到LDAP数据库中。相同的,单一注销(single sign-off)就是指

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

【测试】输入正确用户名和密码,点击登录没有响应的可能性原因

目录 一、前端问题 1. 界面交互问题 2. 输入数据校验问题 二、网络问题 1. 网络连接中断 2. 代理设置问题 三、后端问题 1. 服务器故障 2. 数据库问题 3. 权限问题: 四、其他问题 1. 缓存问题 2. 第三方服务问题 3. 配置问题 一、前端问题 1. 界面交互问题 登录按钮的点击事件未正确绑定,导致点击后无法触发登录操作。 页面可能存在

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打

跨系统环境下LabVIEW程序稳定运行

在LabVIEW开发中,不同电脑的配置和操作系统(如Win11与Win7)可能对程序的稳定运行产生影响。为了确保程序在不同平台上都能正常且稳定运行,需要从兼容性、驱动、以及性能优化等多个方面入手。本文将详细介绍如何在不同系统环境下,使LabVIEW开发的程序保持稳定运行的有效策略。 LabVIEW版本兼容性 LabVIEW各版本对不同操作系统的支持存在差异。因此,在开发程序时,尽量使用

CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

一、题目阅读 (最大值之和)给定整数序列 a0,⋯,an−1,求该序列所有非空连续子序列的最大值之和。上述参数满足 1≤n≤105 和 1≤ai≤108。 一个序列的非空连续子序列可以用两个下标 ll 和 rr(其中0≤l≤r<n0≤l≤r<n)表示,对应的序列为 al,al+1,⋯,ar​。两个非空连续子序列不同,当且仅当下标不同。 例如,当原序列为 [1,2,1,2] 时,要计算子序列 [

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型,如 String, Number, Boolean,

这些心智程序你安装了吗?

原文题目:《为什么聪明人也会做蠢事(四)》 心智程序 大脑有两个特征导致人类不够理性,一个是处理信息方面的缺陷,一个是心智程序出了问题。前者可以称为“认知吝啬鬼”,前几篇文章已经讨论了。本期主要讲心智程序这个方面。 心智程序这一概念由哈佛大学认知科学家大卫•帕金斯提出,指个体可以从记忆中提取出的规则、知识、程序和策略,以辅助我们决策判断和解决问题。如果把人脑比喻成计算机,那心智程序就是人脑的