微信小程序：自定义组件的使用

承接上文，我们写了一个微信小程序排序功能。如果我们在其他页面都需要使用这个功能的话，再复制同一份搜索框的代码，会比较繁杂，代码可读性比较差，也不易于后期代码维护，此时我们就可以单独封装为一个组件，在需要的页面直接调用即可。

---

uni-app使用方法：

具体如何写功能就看你的具体需要，我就不在这里赘述，我以上面的链接中排序功能为例，在这个功能基础上做一些修改达到我们想要的目的。

首先，我们需要考虑的是，组件与页面的生命周期函数是有所不同的。

页面的生命周期函数

函数名	说明
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
onTabItemTap	点击 tab 时触发，参数为Object。
onShareAppMessage	用户点击右上角分享
onPageScroll	监听页面滚动，参数为Object
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件
onShareTimeline	监听用户点击右上角转发到朋友圈 微信小程序
onAddToFavorites	监听用户点击右上角收藏

组件的生命周期函数

函数名	说明
beforeCreate	在实例初始化之后被调用。
created	在实例创建完成后被立即调用。
beforeMount	在挂载开始之前被调用。
mounted	挂载到实例上去之后调用。注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

从这两个表格对比就可看出，更加证明了差异性，所以我们在使用页面或是组件时就必须注意那个应该使用那个的生命周期函数（官方文档）。

那再看看我们现在写好的功能是否使用了生命周期函数，

onLoad() {
	let newList = this.list.sort(this.compare(this.property, false))
	this.list = newList
},

onLoad()函数是页面的周期函数，那么在组件中就不能使用，则我们就应该在组件的生命周期函数中使用对应的函数，从表格中我们就可知道，组件我们应该使用created()函数，将上面的代码可更改为：

created() {
	let newList = this.list.sort(this.compare(this.property, false))
	this.list = newList
},

写到这里我们自定义组件的功能就完善写好了，当然如果你一开始就是将写成组件，就不需要先写成页面再更改，直接使用写组件的方法就可以了。

接下来，我们就可以在页面里愉快的调用了。

第一步，引入自定义组件。在< script >标签里面进行注册，以import A from B 的形式，A就是你组件的名字，B就是你组件在的地址。注意，如果你A是sortsPecies的形式，在A里面不能写成sorts-pecies，编译器会将’-'视为减号。正确写法：
import sortsPecies from '../../components/sort/sort.vue'

第二步，注册组件。在components: {}里面注册写入。正确写法：

components: {
	sortsPecies : sortsPecies // 属性名：属性值（写法1）		
	sortsPecies // 当属性名与属性值相同时，属性值是可省略的（写法2）
}

第三步，使用组件。在你引入组件的页面使用。正确写法：

 <sortsPecies></sortsPecies>

到这一步我们一个完整的uni-app微信小程序自定义组件以及使用就完成了，快自己试试吧！

微信小程序原生使用方法：

微信小程序原生在使用自定义组件时，与uni-app大同小异，我们要注意的就是在使用他的时候，注册使用并不是在同一个文件里面。

第一步，在页面的.json文件里面进行引入注册。需要注意的是文件里面最后一行不需要打逗号，不然会报错。

{
  "usingComponents": {
    "sortsPecies ": "/components/sortsPecies /sortsPecies "
  }
}

第二步，在页面里面使用。使用方法和uni-app一样。

 <sortsPecies></sortsPecies>

到这一步我们一个完整的微信小程序自定义组件以及使用就完成了，快自己试试吧！

因为是新手，若有用词不当，请提出立马修改。最后欢迎一起讨论，共同进步！