微信小程序组件教程

将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

自定义组件由 json wxml wxss js 4个文件组成

首先需要在 json 文件中进行自定义组件声明，将 component 设为 true.

json 文件：

component 设为 true .

{
  "component": true,
}

js 文件：

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    msgText: {
      type: String,
      value: 'hello world',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    catMethod: function(){}
  }
})

这两个文件需要更改。

开始使用组件：

{
  "usingComponents": {
    "component":"../../Components/component/index"
  }
}

<view>
	<component></component>
</view>

往组件传值：

<view>
	<component msg="hello"></component>
</view>

接下来，我们可以在组件中获取值并使用它。

<view>
	<view>{{msg}}</view>
</view>

调用组件中的自定义方法：

为组件设置一个 id

<view>
	<component id="component" msg="hello"></component>
</view>

使用 selectComponent 返回组件对象

var ac = this.selectComponent("#home")

// 组件的自定义方法
ac.catMethod();

组件加载完成后执行：

我们可以使用 lifetimes 来监视组件是否已加载。

  /**
  * 页面加载完成执行
  */
  lifetimes:{
     ready(){
       console.log("hello world")
     }
   }

子组件向父组件传值：

通过 triggerEvent 从子组件向父组件传值。

子组件：

this.triggerEvent('event', { value:123})

父组件：

bind 后的 event 要与子组件 triggerEvent 第一个参数 event 相同。

<view>
	<component id="component" bind:event="bindEvent"></component>
</view>

bindEvent(e){
	console.log("子组件传来的值为",e)
}

至此，它基本上包含了组件的所有操作。如果有遗漏或不清楚，欢迎指出。

demo 1：购物车

demo 2：3D 轮播图