微信小程序自定义组件
最近在学习鼓捣微信小程序结合 Drupal jsonapi的开发体验,小程序自定义组件与 Angular 的组件很多地方是相通的,或者说本质上是一样的。首先两者之间的父组件可以向子组件传递数据,都需要在子组件声明输入属性;
组件可以嵌套其他组件;
组件中定义的样式只作用在组件范围内;
子组件可以通过事件把数据传给父组件等等
官网也给了自定义组件的
卡片示例
这个小程序中卡片样式会应用在首页,列表页,所以需要做成卡片组件,谁需要谁调用即可。
新建自定义组件
首先建一个 components 目录,所有的组件可以组织在这个目录下,然后创建 card 目录。鼠标右键这个目录可以看见 “新建 Component”选项,选择该选项,输入 component 的名字 card ,微信开发者工具会帮我们创建好一个 Component 所需要的文件(js, json, wxml, wxss)
然后在首页和列表页的json声明需要使用的自定义组件:
{
"usingComponents": {
"card": "/components/card/card"
}
}
在首页和列表页相应的地方使用卡片组件:
声明输入属性
// components/card/card.jsComponent({
/*** 组件的属性列表*/
pro