微信小程序登录组件封装 —— 一次性解决需要已登录状态才能继续的

微信登录组件

• 此组件是项目中用到的，项目结束了，分享给大家，希望能对大家有所帮助
• 这里只讨论怎样解决需要已登录状态才能继续操作，具体登录逻辑不做讨论
• 源码已经上传GitHub --> zy-login-view 求Star

需要已登录状态才能继续操作这个具体应用场景我相信产品经理们能够给你一个详情解答

这里我们具体分析一下：

• 我们点击一个视图View（其实很少是Button，而登录却需要Button）进行某项操作

• --> 已登录 --> 执行该操作
• --> 未登录 --> 登录 --> 自动继续该操作

当然其中登录还有以下情况：

• 登录时 --> 发现没有注册（很多项目是以绑定手机号与否认定是否注册，虽然有违微信小程序的快捷与方便的初衷，但是确实存在）--> 跳转注册页面 --> 注册成功 --> 返回此页面(一般走了注册流程的返回源页面就行了)

本组件实现方式是：

• 判断是否登录
• 已登录 --> 将原来的视图插入本组件的<slot></slot>中 --> triggerEvent
• 未登录 --> 写一个透明button覆盖原来视图 --> login(判断权限，登录，注册，处理数据等等。。。可以封装一个login.js文件专门处理这些东西) --> 登录成功triggerEvent

js主要代码

    // 未登录状态
    //获取用户信息
    handleUserInfo: function (e) {
      if (e.detail.errMsg ===
        "getUserInfo:ok") {
        wx.showLoading({
          title: '登录中...',
          mask: true,
        });

        // 这里是一个登录的相关操作的封装，引入的外部js文件
        // login().then(() => {
        //   this.triggerEvent('onLoginSuccess', {
        //     payload: this.data.payload
        //   })
        // })

        //模拟登录
        setTimeout(() => {
          wx.setStorageSync('isLogin', true);
          wx.hideLoading();
          this.triggerEvent('onLoginSuccess', {
            payload: this.data.payload
          })
        }, 2000) 

      } else {
        wx.showToast({
          title: "登录失败，请稍后重试",
          icon: 'none'
        });
      }
    },

    //已登录状态
    handleTap: function () {
      this.triggerEvent('onLoginSuccess', {
        payload: this.data.payload
      })
    }

wml主要代码

<view class='container' bindtap="handleTap" wx:if="{{isLogin}}">
    <slot></slot>
</view>
<view class='container' wx:else>
    <button
            class='auth'
            open-type="getUserInfo"
            bindgetuserinfo="handleUserInfo"
    >
        授权登录
    </button>
    <slot></slot>
</view>
  

wxss代码

.container{
    position: relative;
}
.auth{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1000;
    font-size: 0;
    line-height: 0;
}

使用方法：

• .json文件引入

{
  "usingComponents": {
    "login-view": "../../component/login-view/login-view"
  }
}

• .wxml使用

<login-view hasLogin='{{hasLogin}}' payload='sendInData<AnyType>' bind:onLoginSuccess="jumpToLogsPage">
   <view class='login'>已登录状态才能跳转</view>
</login-view>

• .js文件中，就当此判断不存在，比如此例中正常使用,data就是传入登录组件的参数，可以穿任意类型，原样返回。需要在onShow中更新登录状态

  onShow: function () {
    this.setData({
      hasLogin: wx.getStorageSync('isLogin')
    })
  },

 /**
  * 点击事件原来需要做的操作
  * 登录成功后自动继续做这个操作
  */
  jumpToLogsPage: function(data) {
    console.log("data:", data)
    wx.navigateTo({
      url: '../logs/logs'
    })
  }

下面是具体实例：

• 第一次未登录，点击登录成功后自动跳转

• 第二次点击时已经登录了，所以直接跳转

  
  login-view.gif

需要完整源码请上GitHub --> zy-login-view 获取