微信小程序-自定义组件

自定义组件

步骤一： 创建自定义组件

创建components/common/login文件夹
在login上右键，新建Comoponent,就生成了组件相关的四个文件wxml,wxss,js,json

步骤二： 完成组件定义

wxml

  标题：登录{{num}}次------{{newMsg}}
  微信登录

wxss

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #000;
  z-index: 9999;
}

js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    newMsg: {
      type: String,
      value: '默认值'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    num: 9,
    msg: '初始数据'

  },

  /**
   * 组件的方法列表
   */
  methods: {
    getInfo(e) {
      wx.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          console.log(res);
          //把获取的用户昵称和头像地址存在storage
          let { nickName ,avatarUrl} = res.userInfo
          let user = {
            nickName,
            avatarUrl
          }
          wx.setStorage({
            key:"userinfo",
            data: user
          })
          //向父组件发送自定义事件，从而传参
          this.triggerEvent("change",false)
        },
        fail(err){
          console.log('拒绝');
        }
      })
    },
  }
})

步骤三： 在页面中使用组件

index.json中引入组件

{
  "usingComponents": {
    "com-login": "/components/common/login/login"
  }
}

index.wxml中使用

登录
  
   
    
  

index.js中定义相关的data数据，及监听子组件触发的事件处理程序

data: {
    isLoginShow: false,
},
// 单击登录时，显示弹窗
  onLogin(){
    this.setData({
      isLoginShow: true
    })
  },
  //监听子组件发送的事件
  getChange(e){
    this.setData({
      isLoginShow: e.detail
    })
  },