小程序组件创建

组件内容：

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

<view class='modal' wx:if="{{condition}}" bindtap='tap'>
  <view class='jt'>
    <icon class='iconfont icon-zhishijiantou'></icon>
  </view> 
  <view class='hint-text'>
    您还没有验证手机号码
  </view>
</view>

---

父组件引用子组件：

index.json

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

index.wxml

  <block wx:for="{{form.goods}}" wx:key="index">
      <orderGoods jdata="{{item}}" status="{{form.status.types}}"></orderGoods>
    </block>