card组件 微信小程序_微信小程序自定义组件 - 卡片示例

微信小程序自定义组件

最近在学习鼓捣微信小程序结合 Drupal jsonapi的开发体验，小程序自定义组件与 Angular 的组件很多地方是相通的，或者说本质上是一样的。首先两者之间的父组件可以向子组件传递数据，都需要在子组件声明输入属性；

组件可以嵌套其他组件；

组件中定义的样式只作用在组件范围内；

子组件可以通过事件把数据传给父组件等等

官网也给了自定义组件的

卡片示例

这个小程序中卡片样式会应用在首页，列表页，所以需要做成卡片组件，谁需要谁调用即可。

新建自定义组件

首先建一个 components 目录，所有的组件可以组织在这个目录下，然后创建 card 目录。鼠标右键这个目录可以看见 “新建 Component”选项，选择该选项，输入 component 的名字 card ,微信开发者工具会帮我们创建好一个 Component 所需要的文件(js, json, wxml, wxss)

然后在首页和列表页的json声明需要使用的自定义组件：

{

"usingComponents": {

"card": "/components/card/card"

}

}

在首页和列表页相应的地方使用卡片组件：

声明输入属性

// components/card/card.jsComponent({

/*** 组件的属性列表*/

pro