上一期我们学习了小程序开发过程中如何通过网络请求获取对应的服务器域名和请求接口。在本文中，我们重点学习如何在开发过程中使用小程序组件。小程序的组件分为两大类：内置组件、自定义组件、内置组件，内置组件是指已经预先定义在小程序中的组件，开发者可以直接在代码中使用没有特别参考。以下面的代码为例：Thisisabuttonbutton,,保存保存//jsPage({data:{tel:''},bindKeyInput(e){this.setData({tel:e.detail.value})},getTelList(){returnwx.getStorageSync('tel')},updateTel(){lettelList=this.getTelList()||[]if(this.data.tel.length!==11){wx.showToast({title:'请输入正确的手机号码',})return}telList.push(this.data.tel)wx.setStorage({key:'tel',data:telList,success(res){wx.showToast({title:'存号成功',})},fail(res){}})}})```页面效果如下：可以看到这里有很多重复的模板代码，看起来非常臃肿，所以我们可以把重复的代码抽取出来放到一个自定义的组件中，然后在需要用到的地方重复调用即可。例如，我们可以这样做：第一步在根目录下创建一个components文件夹，然后选择新的组件。第二步是命名一个'saveTel'文件，它会生成组件相关的文件和基本配置。第三步，把页面中原本写的代码迁移到组件中//把这部分移到saveTel.wxml保存//移动index.js保存Tel.js，如下：//这里有几点需要注意：//1.组件的js被Component构造函数包裹//2.组件的方法不要直接放在构造函数配置中像Page这样的对象，但是放在更深层次的方法中component方法列表*/methods:{bindKeyInput(e){this.setData({tel:e.detail.value})},getTelList(){returnwx.getStorageSync('tel')},updateTel(){lettelList=this.getTelList()||[]if(this.data.tel.length!==11){wx.showToast({title:'请输入正确的手机号码',})return}telList.push(this.data.tel)wx.setStorage({key:'tel',data:telList,success(res){wx.showToast({title:'存号成功',})},fail(res){}})}}})```第四步经过上面几步，我们就把'输入和保存'的整个逻辑都放到了thephonenumber'/模板/样式从页面中提取组件。接下来我们需要在页面中引入并使用这个组件，即“将处理后的组件添加到页面中”。首先，我们需要知道我们要引用的组件在哪里，你叫什么名字。我们可以到页面对应的.json中去配置这两条信息。{"usingComponents":{"save-tel":"/components/saveTel"}}//save-tel是我们给组件起的名字，这里的名字可以随意使用，但是建议表达///components/saveTel也就是我们引用组件的路径的配置也意味着我们已经完成了组件的配置，接下来我们需要将组件导入到对应的页面模板中：//wxmlindexpage效果如下，测试确保输入和保存功能应该是正常的。至此，我们就完成了从一个页面中提取公共逻辑到一个组件/组件的操作。综上所述，我们可以使用内置组件来实现我们小程序的基本功能，然后使用自定义组件抽象出公共模块来增加小程序的可重用性，让小程序在代码组织上更加优雅。当然自定义组件也有各种高级功能，可以阅读微信小程序开发文档了解更多。
