小程序组件创建

组件内容:

index.js文件

Component({
    /**
     * 组件的属性列表
     */
    properties: {     //组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个字段,
        condition:{    //type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数
            type:Boolean,
            value:false
        }
    },

    /**
     * 组件的初始数据
     */
    data: {    //组件的内部数据,和 properties 一同用于组件的模版渲染

    },

    /**
     * 组件的方法列表
     */
    methods: {    //组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用
        tap(){
            this.setData({
                condition: false
            })
        }
    }
})

index.json

{
  "component": true,
  "usingComponents": {}
}

index.wsxx

/* components/myHint/index.wxss */
@import '../../app.wxss';
.modal{
  width: 100%;
  height: 100%;
  z-index:100;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 38rpx;
}

index.wxml


  
    
   
  
    您还没有验证手机号码
  


父组件引用子组件:

index.json

{
  "navigationBarTitleText": "订单详情",
  "usingComponents": {
    "orderGoods": "../../../components/orderGoods/index",
    "statusTime": "../../../components/statusTime/index",
    "popupButton": "../../../components/popupButton/index"
  },
  "enablePullDownRefresh": false
}

index.wxml

  
      
    

你可能感兴趣的:(小程序组件创建)