微信小程序组件模板编写最基础入门

在微信开发工具中新建组件模板文件夹testComponent，里面包含为index.js、index.wxml、index.wxss、index.json四个文件。
其中index.wxml内容如下：

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
   <slot></slot> 
</view>

这里的<slot>标签是为了承载引用页面模板的子节点，通俗讲就是为了使组件引用页面能够包含子节点，就像div包含div一样，组件里面写view。

index.json里面如下内容：

{
  "component": true//组件启用
}

index.wxss 代码和css一样写法，但也有限制，具体看官方文档：

.wrapper{
  width: 100%;
  height: 100rpx;
  background-color: red;
}

index.js代码基本结构：

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    date:null//传过来的属性值date
  },
  data: {
   
  },
  ready: function () {
    console.log(this.data.date)//接收传过来的属性值date，可打印出来1
  },
  
  methods: {
    // 这里是一个自定义方法
  }
})

引入页面比如test文件夹中也有，js、json、wxml、wxsss
主要在json中引用组件，代码：

{
  "usingComponents": {
    "component-tag-name": "/component/testComponent/index"//组件模板名称和引用路径
  }
}

wxml代码引用模板：

<!-- 引用组件的页面模版 -->
<view>
  <component-tag-name date="1">//date是可以传值的自定义属性
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
     <view bindtap='tapSlot'>这里是插入到组件slot中的内容</view> 
  </component-tag-name>
</view>

这样一个简单微信小程序组件模板就完成了。