小程序组件开发

app.json 设置全局组成部分

组件

在说写组件之前，我们要先提到一下app.json 中的 pages 数组

pages 数组 储存着该小程序的页面路径，第一个为初始化展示的页面。

"pages": [
	"pages/home/home",
	"pages/index/index",
	...
]

在创建组件的时候，我们可以写到 pages 数组里，初始化组件(components)文件夹

"pages": [
	"components/button/button",
	"pages/home/home",
	"pages/index/index",
	...
]

然后 ctrl + s 保存，微信开发者工具会自动初始化我们需要的文件夹

|-components
	|-button
		|-button.js
		|-button.json
		|-button.wxml
		|-button.wxss

再然后我们可以对我们的组件进行编辑

button.wxml // 组件的标签组成

<button class="tomato-button {{size === 'mini' && 'mini'}} {{type === 'change' ? 'change' : 'default' }}">{{text}}</button>

这里我们需要先确定我们的组件必需的个性化设置，例如此处 button 里的文本设置、button 的大小以及 button 的背景样式

button.wxss // 组件样式

button.json // 设置为组件

{
	"component": true
}

button.js // 通过 properties 接收外面传进来的数据，然后对组件进行个性化的设置

Component({
	properties: {
		size: {
			type: String,
			value: ""
		},
		text: {
			type: String,
			value: ""
		},
		type: {
			type: String,
			value: ""
		}
	}
})

上面代码对 button 组件要接收的数据进行了定义，分别为大小、文本和样式类型。

最后将 pages 数组中我们利用初始化的组件页面路径删掉

另外，我们在看看用到我们写的组件的页面怎么写

home.json // 使用组件的页面 json

{
	"usingComponents": {
		"t-button": "../../components/button/button"   // 对本页面使用该组件命名为 t-button：组件路径
	}
}

然后可以在页面的 wxml 文件里使用我们的组件标签了

home.wxml

<t-button size="mini" text="开始" type="default"></t-button>

组件的构建和引用就 OK 啦。

具有传递事件信息的组件开发

初始化组件文件夹以及编辑组件部分就不说了，下面我们主要说说组件父子如何传递事件信息

component.wxml

<view bindtap="confirm"> confirm </view>

我们的组件给 view 绑定了点击事件，这里事件处理函数为 confirm

component.js

Component({
  methods: {
    confirm() {
      this.triggerEvent('confirm', "click confirm")
    }
})

methods 存储组件方法，其中 this.triggerEvent('事件名', 数据) 告知父组件触发事件并传值。

page.wxml

<t-confirm bindconfirm="confirm"></t-confirm>

在我们使用组件的页面，给组件绑定 confirm 事件，事件处理函数是页面的 confirm 方法。当组件触发 confirm 事件时，页面的父组件将可以监听到事件的触发。

page.js

Page({
	confirm(event) {
		console.log(event.detail)
	}
})

父组件监听到事件触发之后，再做对应的事情。

窗口 tab 栏

小程序是一个多 tab 应用(客户端窗口底部或顶部有 tab 栏可以切换页面)，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

对 app.json 中的 tabBar 的配置属性就不一一详述了，这里直接看代码了

"tabBar": {
    "color": "#515151",
    "selectedColor": "#F6705A",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "专注",
      "iconPath": "images/home.png",
      "selectedIconPath": "images/home-active.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "数据统计",
      "iconPath": "images/total.png",
      "selectedIconPath": "images/total-active.png"
    },
    {
      "pagePath": "pages/test/test",
      "text": "我的",
      "iconPath": "images/me.png",
      "selectedIconPath": "images/me-active.png"
    }]
  }

上面的样式根据名称浅显易懂，字体颜色、选中字体颜色以及 tab 栏背景色和边框样式

list 是 tab 栏列表，可以设置2-5个的 tab，按数组的顺序拍序，每个项都是一个对象，然后依次对每个项设置属性：页面路径、文本、图片以及选中时的图片

详见： 全局配置 | 微信开放文档