自定义微信小程序登录组件

由于很多页面需要弹出登录框提示,在登录框有个登录按钮,该按钮open-type=“getUserInfo”,如果每个页面都需要,那么就会导致每个页面需要这么一个dialog样式,所以这是不可能的。因此特制了一个登录框组件。
效果如下:


小程序登录框组件

核心代码说明:

// components/login/loginDlg.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    show: { //是否显示登录框
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    clickMask:function() {
      this.setData({show: false})
    },

    cancelDlg: function () {
      this.setData({ show: false })
      this.triggerEvent('cancel')
    },

    loginDlg: function (e) {
      this.setData({ show: false })
      this.triggerEvent('login',e)  //此处传参到实际页面的事件,不然还是拿不到用户信息
    }
  }
})

完整代码见:https://github.com/hqfeijian/logindlg

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容