关于前端:保姆级教程写出自己的移动应用和小程序篇八

上一期咱们学习了在小程序开发过程中，通过网络申请获取对应的服务器域名与申请接口的应用。本期文章中，咱们重点学习如何在开发过程中应用小程序组件。

小程序的组件分为两类：

1. 内置组件
2. 自定义组件

内置组件

内置组件指在小程序外部曾经事后定义好的组件，开发者不须要非凡援用就能够在代码内间接应用，以上面代码为例：

<view>
    <text> 这是一个按钮 </text>
    <button bintap='foo'> 按钮 </button>
</view> 

<view>, <text>, <button> 均为内置组件。内置组件的更多应用办法能够参考微信小程序开发文档。

自定义组件

随着咱们小程序开发的进行，编写的代码越来越多，页面级别的代码会越来越臃肿。这时，咱们须要把代码拆分成更小粒度的单元，这样子能够让代码更易于保护，也更加容易复用。这个更小粒度的单元，也就是自定义组件。

有这么一个场景: 咱们在一个页面当中，填写若干个手机号码，点击“保留”后把号码顺次保留在 storage 的一个列表中，页面代码如下：

// wxml
<view>index 页面 </view>
<view class="wrapper">
  <input class="weui-input" bindinput="bindKeyInput"  placeholder="请输出正确的手机号码" />
  <button type='primary' class="weui-btn" bindtap="updateTel" size="small"> 保留 </button>
</view>
<view class="wrapper">
  <input class="weui-input" bindinput="bindKeyInput"  placeholder="请输出正确的手机号码" />
  <button type='primary' class="weui-btn" bindtap="updateTel" size="small"> 保留 </button>
</view>
<view class="wrapper">
  <input class="weui-input" bindinput="bindKeyInput"  placeholder="请输出正确的手机号码" />
  <button type='primary' class="weui-btn" bindtap="updateTel" size="small"> 保留 </button>
</view>

// js
Page({
  data: {tel: ''},
  bindKeyInput(e) {
    this.setData({tel: e.detail.value})
  },
  getTelList() {return wx.getStorageSync('tel')
  },
  updateTel() {let telList = 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 的文件夹，而后抉择新建 component

第二步

命名一个‘saveTel’的文件，就会生成组件相干的文件及根底配置

第三步

咱们把本来写在页面外面的代码迁徙到组件中去

// 把这部分挪到 saveTel.wxml 中
<view class="wrapper">
  <input class="weui-input" bindinput="bindKeyInput"  placeholder="请输出正确的手机号码" />
  <button type='primary' class="weui-btn" bindtap="updateTel" size="small"> 保留 </button>
</view>

// 把 index.js 挪到 saveTel.js 去，如下：// 这里要留神几点：// 1. 组件的 js 是由 Component 结构器包裹的 
// 2. 组件的办法并不是像 Page 间接放在结构器配置对象中，而是搁置在更深一层的 methods 中 
Component({
  /**
   * 组件的属性列表
   */
  properties: { },

  /**
   * 组件的初始数据
   */
  data: {tel: ''},

  /**
   * 组件的办法列表
   */
  methods: {bindKeyInput(e) {
      this.setData({tel: e.detail.value})
    },
    getTelList() {return wx.getStorageSync('tel')
    },
    updateTel() {let telList = 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) {}})
    }
  }
})
```

第四步

通过以上步骤，咱们曾经把整个‘输出并保留手机号’的逻辑 / 模版 / 款式从页面抽离出了组件，接下来，咱们须要在页面中引入并应用这个组件，也就是“给页面增加曾经解决好的组件”。

首先，咱们须要晓得咱们要援用的组件在哪以及叫什么名字。这两个信息咱们能够到页面对应的 . json 去配置。

{
  "usingComponents": {"save-tel" : "/components/saveTel"}
}
// save-tel 即咱们给组件的命名，这里的命名能够本人随便施展，然而倡议要达意
// /components/saveTel 即咱们援用组件的门路 

配置结束也代表着咱们做好了组件的配置，接下来要去对应的页面模版引入组件：

// wxml
<view>index 页面 </view>
<save-tel></save-tel>
<save-tel></save-tel>
<save-tel></save-tel>

成果如下，测试一下确保输出以及保留等性能应该都是失常的。

至此，咱们实现了从一个页面抽离公共逻辑到一个组件 / 组件的应用的操作。

总结

咱们能够通过内置组件去实现咱们小程序的基本功能，而后通过自定义组件去形象公共模块减少小程序的复用性跟让其具备更加优雅的代码组织形式。

当然，自定义组件还有各个各样的高阶的性能，大家能够浏览微信小程序开发文档深刻理解。