• 2000多家国企医院年底前完成剥离 2019-04-25
  • 天津旅游嘉年华下周开幕 多项活动展现文旅融合--旅游频道 2019-04-15
  • (两会受权发布)中国人民政治协商会议全国委员会常务委员会工作报告 2019-04-13
  • A股市场具有较强估值支撑 机构看好政策受益板块 2019-04-13
  • 中国公司本地化运营蒙内铁路赢得肯尼亚民心 2019-04-10
  • 万达转型升级实体消费观念迭代 百货退出万达支柱性产业 ——凤凰网房产北京 2019-04-08
  • “精日亲美的真正原因”是中国的伪公知精英身上长了“洋奴依附之心”,“崇洋媚外之骨”,“汉奸文化之瘤”,这些人利用“和谐、包容”疯狂推行汉奸文化洗脑国人! 2019-04-08
  • 马克思主义哲学是帮助我们看清世界的一双“慧眼” 2019-03-30
  • 中国是亚洲和平的基石 2019-03-30
  • 三亚天涯区将率先在海南开设帆板帆船体育课 2019-03-28
  • 端午——网络中国节——黄河新闻网 2019-03-28
  • 不管怎么讲幸福,老百姓的愿望并不奢望,就是看病不难,不贵,不需要没钱就从手术台赶 下来,只能住医院过道,房子并不要太大,能避风挡雨,子女并不要万贯家财,能有一份 2019-03-28
  • 绍兴印染布质量比对成果发布 部分指标国际领先 2019-03-28
  • 长治警方破获利用网络平台贩毒案 2019-03-27
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产武汉 2019-03-23
  • 用户
     找回密码
     立即注册

    QQ登录

    只需一步,快速开始

    扫一扫,登录网站

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

    下一个河北十一选五:跌宕起伏的小程序之登录组件

    河北体彩11选5今天开奖 www.7vek.com Rolan 2019-3-11 00:05

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

    开始的开始,简单粗暴。在微信河北体彩11选5今天开奖里,一行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哥 来自: 掘金
  • 2000多家国企医院年底前完成剥离 2019-04-25
  • 天津旅游嘉年华下周开幕 多项活动展现文旅融合--旅游频道 2019-04-15
  • (两会受权发布)中国人民政治协商会议全国委员会常务委员会工作报告 2019-04-13
  • A股市场具有较强估值支撑 机构看好政策受益板块 2019-04-13
  • 中国公司本地化运营蒙内铁路赢得肯尼亚民心 2019-04-10
  • 万达转型升级实体消费观念迭代 百货退出万达支柱性产业 ——凤凰网房产北京 2019-04-08
  • “精日亲美的真正原因”是中国的伪公知精英身上长了“洋奴依附之心”,“崇洋媚外之骨”,“汉奸文化之瘤”,这些人利用“和谐、包容”疯狂推行汉奸文化洗脑国人! 2019-04-08
  • 马克思主义哲学是帮助我们看清世界的一双“慧眼” 2019-03-30
  • 中国是亚洲和平的基石 2019-03-30
  • 三亚天涯区将率先在海南开设帆板帆船体育课 2019-03-28
  • 端午——网络中国节——黄河新闻网 2019-03-28
  • 不管怎么讲幸福,老百姓的愿望并不奢望,就是看病不难,不贵,不需要没钱就从手术台赶 下来,只能住医院过道,房子并不要太大,能避风挡雨,子女并不要万贯家财,能有一份 2019-03-28
  • 绍兴印染布质量比对成果发布 部分指标国际领先 2019-03-28
  • 长治警方破获利用网络平台贩毒案 2019-03-27
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产武汉 2019-03-23
  • 体彩14场胜负18157 安徽时时彩快3开奖结果 排列五和值走势图带连线专业版 澳洲幸运10在那开奖 快赢481开奖视频 重庆时时彩后三万能码 时时彩缩水在线 18023足彩进球彩开奖记录 3串1混合过关 北京pk10几点开始 华球比分直播 2017北京pk10稳赚技巧 竞彩nba让分胜负 3d开机号试机号列表 双色球彩票专家推荐 燕赵风采排列5