用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

北京pk10最新历史记录:跌宕起伏的小程序之登录组件

北京快三最新开奖结果 www.6z8dk.cn Rolan 2019-3-11 00:05

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

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

当时的代码长这样:

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

如果要与业务结合起来,通?;崾钦庋ㄒ韵麓胧纠褂脀epy框架):

<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>
复制代码

变数:weary:

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

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

<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!有代码洁癖加重度强迫症的我完全不能忍。

归途:sunglasses:

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

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

<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:neutral_face:。据说wepy即将发布2.0版本,会解决这个问题,甚是期待。

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


分享至 : QQ空间
收藏
原作者: DOM哥 来自: 掘金
  • 【十九大·理论新视野】为什么把“建设美丽中国”作为现代化目标之一 2019-05-21
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-20
  • 大阪发生6.1级地震 至少造成3人死亡 2019-05-20
  • 南通如皋为应对督察“回头看”违法掩埋危险废物 2019-05-19
  • 海融口腔“免费看牙”惠民活动启动 惠及乌鲁木齐市民 2019-05-18
  • “改革开放40年山东教育成就展”启动 2019-05-17
  • 南昌重拳整治酒驾毒驾 2019-05-16
  • 守土有责守土尽责 扎实做好水污染 防治各项工作 2019-05-15
  • 广东水漫大街市民触电身亡,是天灾还是人祸? (原创首发) 2019-05-14
  • 统计局解读8月PMI:制造业增长动力不足 2019-05-13
  • 世界读书日 山西推出245种优秀书目助力全民阅读 2019-05-13
  • 北京赛车pk10 75秒极速赛车34567规律破解开奖结果历史记录查询 2019-05-12
  • 马克思主义通过指导无产阶级革命建立起部分社会财富公有制而改变了人类历史发展进程,离开部分社会财富公有制的建立来谈“改变人类历史发展进程”纯粹是无稽之谈。 2019-05-11
  • 利好不断!新能源汽车正在迎来春天 2019-05-10
  • 全世界人民都要尊重人类社会发展规律即从过去资本主义社会财富私有制经过现代社会财富公有制和私有制并存而发展到未来共产主义社会财富公有制。 2019-05-10
  • 473| 299| 589| 624| 262| 502| 763| 183| 24| 202|