关于微信小程序点击一个按钮同时唤醒两次授权

CoCoyY1
1,257 阅读2分钟

前言

接触过微信小程序开发的小伙伴应该都对用户授权有过了解。 在小程序中，唤醒用户授权必须使用button组件上的openType属性或者触发点击事件后调用相应的api。具体如下图。

image.png

image.png

问题

现在有一个场景需要用户同时授权手机号与用户信息。正常操作应该是在页面上放置两个按钮，分别让用户授权手机号和用户信息。这样对于用户来说体验不是很好。

本文所有内容基于Taro、Sass和微信小程序

jsx

<View className={styles.actionBox}>
  <Button className={styles.subBtn} openType="getPhoneNumber" onGetPhoneNumber={
  (e) => {console.log(e);}
  }>授权手机号</Button>
  <Button className={styles.subBtn} onClick={()=> {
    Taro.getUserProfile({
      success: (e) => {console.log(e);
      },
      desc: '完善用户信息'
    });
  }}>授权用户信息</Button>
  <View className={styles.cancelBtn} onClick={() => {
    Taro.navigateBack();
  }}>取消登录</View>
</View>

页面

image.png

思考

在平时使用小程序时发现在点击某个按钮之后发起了很多次连续的授权，是不是我们也能改成使用一个按钮发起两次授权呢。

初始方案是将两个按钮覆盖在一起，利用事件冒泡，同时触发两个按钮的点击事件。然而就在一切就绪准备测试时，无意中点击调试器的DOM分页，发现只有一个按钮被渲染。

jsx

<Button className={styles.subBtn} openType="getPhoneNumber" onGetPhoneNumber={
(e) => {console.log(e);}
}>
    授权手机号
    <Button className={styles.subBtnChild1} onClick={()=> {
    Taro.getUserProfile({
      success: (e) => {console.log(e);
      },
      desc: '完善用户信息'
    });
    }}></Button>
</Button>

css

.subBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 48px 0;
    width: 472px;
    height: 96px;
    font-size: 32px;
    font-weight: bold;
    background-color: #3eceb6;
    border-radius: 96px;
    box-shadow: 0px 8px 16px rgba(21, 184, 155, 0.25);
    color: #fff;
    &::after {
      content: none;
    }
    .subBtnChild1 {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border-radius: 96px;
      opacity: 0;
    }
}

image.png

解决

既然嵌套Button组件行不通，那就使用其他组件。将内部的Button组件替换为View组件。完美解决。

优化

使用两个组件嵌套能解决问题，那能不能将两个事件绑定在同一个组件上？

jsx

<Button className={styles.subBtn} openType="getPhoneNumber"
    onGetPhoneNumber={(e) => {console.log(e);}}
    onClick={()=> {
    Taro.getUserProfile({
      success: (e) => {console.log(e);
      },
      desc: '完善用户信息'
    });
}}>授权手机号一键登录</Button>

在原本的Button组件上再绑定一个点击事件，完美解决。

写在最后 (^.^)

如果觉得我写的还不错的话，可以赏我个点赞哦^.^

如果有写错的地方、写的不好的地方也请大家指出，供我纠正。

我是CoCoyY1，一个记录自己学习的前端热爱者。

我的其他文章

React Hooks ———— React组件的新写法，除HOC外的另一种代码复用的方式

Vue3中的expose函数 ———— 控制组件被ref时暴露的对象内容

vue3新语法糖——setup script ———— 使vue3的setup书写更简便，组件免注册、变量不用返回

avatar
文章
阅读
粉丝