微信小程序之组件的集合（五）

　　这个是学习复杂的组件的封装的，在课程中，主要实现的是书单上方的搜索功能组件的开发，这个应该是较之前的组件是有一定难度的，但是现在学到现在，感觉前端的内容和后端的内容比较起来，还是比较容易的，而且好多内容，其实在后端的开发中是很成熟的，所以学起来并不是很难以理解，这也是我们的一个优势吧，毕竟选择后端的同学应该是不错的啊，哈哈哈！这种组件其实是有一个特别的名字的，那就是高阶组件，来，把这个东西尽快学习掌握！

一、新建search组件

首先还是新建search组件的各个文件，这里微信开发者工具的功能很好用，直接就新建一个search目录，然后在目录中新建一个名字为index的component组件，这样就建好了四个与组件相关的文件

 二、search组件开发

1、基础的结构搭建

（1）样式文件的代码index.wxml文件

 <view class="container">
   <view class="header">
     <view class="search-container">
       <image class="icon" src="data:images/search.png"></image>
       <input placeholder-class="in-bar" placeholder="书籍名" class="bar" auto-focus="true"></input>
       <image class="cancel-img" src="data:images/cancel.png"></image>
     </view>
     <view class="cancel" bindtap="onCancel">取消</view>
   </view>
   <view>
     <view class="history">
       <view class="title">
         <view class="chunk"></view>
         <text>历史搜索</text>
       </view>
     </view>
     <view class="history hot-search">
       <view class="title">
         <view class="chunk"></view>
         <text>热门搜索</text>
       </view>
     </view>
   </view>
 </view>

（2）样式文件 index.wxss代码

 .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   /* padding-left:15px; *//* padding-right:15px; */
 }

 .history {
   width: 690rpx;
   margin: 40rpx 0 20rpx 0;
   display: flex;
   font-size: 14px;
   margin-top:160rpx;
   flex-direction: column;
 }

 .hot-search{
   margin-top:70rpx;
 }

 .title {
   line-height: 15px;
   display: flex;
   flex-direction: row;
   align-items: center;
   /* margin-left:100px; */
 }

 .search-container {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   background-color: #f5f5f5;
   border-radius: 50px;
   margin-left: 20rpx;
   /* margin-left: */
 }

 .books-container book-cmp {
   margin-bottom: 25rpx;
 }

 .cancel-img {
   width: 14px;
   height: 14px;
   margin-right: 10px;
 }

 .books-container {
   width: 570rpx;
   margin-top:100rpx;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding: 0 90rpx 0 90rpx;
   justify-content: space-between;
 }

 .loading {
   margin: 50rpx 0 50rpx 0;
 }

 .loading-center {
   position: absolute;
   top: 50%;
   left: 50%;
 }

 .empty-tip {
   display: inline-block;
   width: 100%;
   text-align: center;
   position: absolute;
   top: 50%;
   /* left: 275rpx; */
 }

 .icon {
   width: 14px;
   height: 14px;
   margin-left: 12px;
   margin-right: 8px;
 }

 .in-bar {
   color: #999;
 }

 .cancel {
   line-height: 34px;
   width: 60px;
   /* margin-left:10px; */
   text-align: center;
   display: inline-block;
   border: none;
 }

 .chunk {
   height: 15px;
   width: 5px;
   background-color: #000;
   display: inline-block;
   margin-right: 10px;
 }

 .tags {
   /* padding-left:15px; */
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   /* justify-content: flex-start;  */
   margin-top: 24rpx;
   padding-left: 15px;
   width: 630rpx;
 }

 .tags tag-cmp {
   margin-right: 10px;
   margin-bottom: 10px;
   /* padding-bottom: 10px; *//* margin-right:6px; */
 }

 .header {
   background-color: #ffffff;
   position:fixed;
   height: 100rpx;
   border-top: 1px solid #f5f5f5;
   border-bottom: 1px solid #f5f5f5;
   display: flex;
   flex-direction: row;
   width: 750rpx;
   align-items: center;
   z-index:;
   /* padding-left:15px;  *//* padding-right:5px; */
 }

 .bar {
   border-top-right-radius: 15px;
   border-bottom-right-radius: 15px;
   display: inline-block;
   height: 34px;
   /* width:100%; */
   width: 500rpx;
   font-size: 14px;
 }

 .test {
   background-color: #000;
 }

（3）基础的业务逻辑处理 index.js

这个主要是将取消操作交给page中页面进行处理，将组件中的取消事件传递给page页面中

   /**
    * 组件的方法列表
    */
   methods: {
     // 搜索取消事件
     onCancel(event){
         this.triggerEvent('cancel',{},{});
     }
   }

page中book页面进行组件的展示以及业务逻辑处理的代码：

book.wxml文件中添加事件以及显示代码

 <view class="container" wx:if="{{!searching}}">
   <view class="header">
     <view class="box" bindtap="onSearching">
       <image src="/images/icon/search.png"></image>
       <text>搜索书籍</text>
     </view>
   </view>
   <view class="sub-container">
     <image src="/images/book/quality.png" class="head-img"></image>
     <view class="books-container">
       <block wx:key="id" wx:for="{{books}}">
         <v-book book="{{item}}" />
       </block>
     </view>
   </view>
 </view>
 <!-- search组件的使用 -->
 <v-search bind:cancel="onCancel" wx:if="{{searching}}"></v-search>

book.js中添加部分处理方法

 // 添加searching属性
 data: {
     // 服务器请求的数据 book的集合
     books:[],
     searching:false
   },

   // 搜索框的点击事件
   onSearching(event){
     this.setData({
       searching:true
     })
   },

   // 搜索框取消事件
   onCancel(event){
     this.setData({
       searching:false
     })
   },

2、组件中的业务代码

现在不知道从哪里开始写起了，昨天自己动手写了一下，简单的实现了搜索的功能，把前两天学习的内容简单的记录一下。

（1）搜索记录的标签显示

这个是分为两种搜索标签的，一种是历史搜索，一种是热门搜索，这两种实现方式是不同的，历史搜索是从缓存中加载保存的用户搜索记录，这个是有总数限制的，很值得学习一下这种方案的处理思路，热门搜索就是从服务器加载热门搜索记录，这个就有灰色空间了，如果数据量非常大的时候，这个时候会用到排序算法了，之前学习过，具体怎么实现，现在也是没有记住，总体的思路还是在大脑中有点的，看看这两种的实现：

   <view wx:if="{{!searching}}">
     <view class="history">
       <view class="title">
         <view class="chunk"></view>
         <text>历史搜索</text>
       </view>
       <view class="tags">
         <block wx:for="{{historyWords}}" wx:key="">
           <v-tag text="{{item}}" bind:tapping="onConfirm" />
         </block>
       </view>
     </view>
     <view class="history hot-search">
       <view class="title">
         <view class="chunk"></view>
         <text>热门搜索</text>
       </view>
       <view class="tags">
         <block wx:for="{{hotWords}}" wx:key="">
           <v-tag text="{{item}}" bind:tapping="onConfirm" />
         </block>
       </view>
     </view>
   </view>

上面是页面展示的实现，下面看一下具体的逻辑实现：

这个是新建的keyword.js文件，在models文件夹下面，主要是有几个相关的方法，重点是关注一下addToHistroy方法的

 import {HTTP} from '../util/http-p.js'
 class KeywordModel extends HTTP{
   key = "q"; // 缓存中的key
   maxLength = 10; // 历史搜索展示的条数
   // 获取历史搜索方法
   getHistory(){
     const words =  wx.getStorageSync(this.key);
     if(!words){
       return [];
     }
     return words;
   }

   // 获取热门的方法
   getHot(){
     return this.request({
       url:'/book/hot_keyword'
     })
   }

   // 将搜索关键字写入缓存中
   addToHistory(keyword){
     // 注意缓存中是一组数据
     let words = this.getHistory(this.key);
     const has = words.includes(keyword);
     if(!has){
       const length = words.length;
       // 删除末尾的Word
       if(length >= this.maxLength){
         words.pop();
       }
       words.unshift(keyword);
       wx.setStorageSync(this.key, words);
     }
   }
 }

 export { KeywordModel }

下面是search组件中的index.js文件中的具体逻辑实现，主要就是在search组件加载的时候，初始化这个历史搜索与热门搜索的标签，这个是在attached函数中，这个attached方法是小程序中的默认的组件加载时执行的方法

   /**
    * 组件的初始数据
    */
   data: {
     historyWords:[],
     hotWords:[],
     dataArray:[],
     searching:false,
     q:""
   },

 // 组件初始化时候调用的方法
   attached(){
     this.setData({
       historyWords: keywordModel.getHistory()
     })

     keywordModel.getHot().then(res => {
       this.setData({
         hotWords:res.hot
       })
     })
   },

（2）书籍信息的显示

这个现在只是实现了书籍信息的简单展示，没有实现分页的操作，后续的会实现这个功能

   <!-- 书籍展示 -->
   <view class="books-container" wx:if="{{searching}}">
     <block wx:for="{{dataArray}}" wx:key="{{item.id}}">
       <v-book book="{{item}}" class="book"></v-book>
     </block>
   </view>

这个页面展示的代码就比较简单了，我们只是复用了一下book组件，所以这里实现起来就比较简单了，下面是逻辑代码，主要就是调用接口加载数据，还有就是对数据的一些处理，以及一些具体细节的处理，这个细节的处理很容易被忽视的，但是这些东西才是体现一个项目的好坏，一个开发者好坏的真正的东西

     // 用户搜索的方法
     onConfirm(event){
       this.setData({
         searching:true
       })
       const word = event.detail.value || event.detail.text;
       bookModel.search(0, word).then(res => {
         console.log(res);
         this.setData({
           dataArray:res.books,
           q: word
         })
         keywordModel.addToHistory(word);
       })
     },

（3）搜索结果的分页加载

这个业务场景是当用户搜索结果展示出来的时候，之前只是展示若干条数据，无法全部显示搜索结果，这种做法当然无可厚非，但是我们要进一步完善这个功能，那就有必要来实现分页功能了，当用户下滑到底部的时候，如果还有数据，那么我们需要加载出来，那么这个如何实现，哈哈

具体思路：

（1）在page中小程序是有事件来实现这个下拉触发动作的，那就是onReachBottom事件，如何将这个动作的通知传递到组件中，让组件接收到这个通知，实现具体的逻辑

（2）可以通过组件的properties属性来传递这个通知，属性中监听函数observer来实现处理逻辑，这里observer监听 函数只有当属性值改变的时候才会触发，所以，我们的解决办法是每次传递一个随机数给属性，让每一次通知都能被组件接收

（3）剩下的就是具体的逻辑处理了，这里面有好多细节需要处理的，具体看代码

首先，看一下page中 book.wxml以及book.js中的代码

 // wxml中代码 简写省略其他
 <!-- search组件的使用 -->
 <v-search more="{{more}}" bind:cancel="onCancel" wx:if="{{searching}}"></v-search>

 // js中代码
   data: {
     // 服务器请求的数据 book的集合
     books:[],
     searching:false,
     more:'' // 是否加载更多数据
   },

   onReachBottom: function() {
     // console.log("aaaa");
     // 加载更多数据
     this.setData({
       more:random(16)
     })
   },

这里有一个产生随机数的方法，random(16) 产生16位的随机数，很简单，不贴代码了

看一下search组件中的相关代码，主要是增加了一个属性，增加了loading ，这个充当的是锁的角色，这个方法还有待优化，

说一下这里面的细节处理：

loading这个锁的引入，防止用户下拉触发事件过于频繁，向服务器发送过多请求，导致的信息加载出现重叠的问题，影响服务器的性能，引入loading锁之后，只有一个请求发送完毕之后，接下来的请求才能继续发送，这个锁的概念在多线程中应用的很广泛，作为后端开发，这个问题很容易理解！

   properties: {
     more:{
       type:String,
       observer:'_load_more'
     }
   },

   data: {
     loading:false
   },

     // 加载更多数据
     _load_more(){
       console.log(123123);
       if(!this.data.q){
         return;
       }
       // loading在这里扮演的是锁的角色
       if(this.data.loading){
         return;
       }
       const length = this.data.dataArray.length;
       this.data.loading = true
       bookModel.search(length,this.data.q).then(res => {
         const tempArray = this.data.dataArray.concat(res.books);
         this.setData({
           dataArray:tempArray
         })
         this.data.loading = false
       })
     },

 （4）搜索代码的优化

这个优化主要是设计到两方面，一方面是代码的抽离，一方面是代码的可读性

先看看代码的抽离如何来优化，主要是将分页的相关的代码抽离成behavior行为，然后直接在组件中引用behavior中的方法，新建一个behaviors文件夹，创建一个pagination.js文件

看一下pagination.js中的代码：

 const paginationBev = Behavior({
   data: {
     dataArray: [], // 分页数据
     total: null
   },
   methods: {
     setMoreData(dataArray) {
       const tempArray = this.data.dataArray.concat(dataArray);
       this.setData({
         dataArray: tempArray
       })
     },
     // 获取当前开始的index值
     getCurrentStart() {
       return this.data.dataArray.length;
     },

     setTotal(total) {
       this.data.total = total;
     },

     // 是否还有数据需要加载
     hasMore() {
       if (this.data.dataArray.length >= this.data.total) {
         return false;
       } else {
         return true;
       }
     },
     initialize(){
       this.data.dataArray = [];
       this.data.total = null;
     }
   }
 })

 export {
   paginationBev
 }

看一下在组件中如何使用：

 import {
   KeywordModel
 } from '../../models/keyword.js'

 import {
   BookModel
 } from '../../models/book.js'

 import {
   paginationBev
 } from '../behaviors/pagination.js'

 Component({
   // 引入 组件中behaviors属性
   behaviors: [paginationBev],
   /**
    * 组件的属性列表
    */
   properties: {
     more: {
       type: String,
       observer: 'loadMore'
     }
   },

   /**
    * 组件的方法列表
    */
   methods: {
     // 加载更多数据
     loadMore() {
       if (!this.data.q) {
         return;
       }
       // loading在这里扮演的是锁的角色
       if (this._isLocked()) {
         return;
       }

       if (this.hasMore()){
         this._locked();
         bookModel.search(this.getCurrentStart(), this.data.q).then(res => {
           this.setMoreData(res.books);
           this._unLocked();
         },()=>{
           // 避免死锁 在请求失败的时候也需要释放锁
           this._unLocked();
         })
       }
     },
     // 搜索取消事件
     onCancel(event) {
       this.triggerEvent('cancel', {}, {});
     },
     // 用户搜索的方法
     onConfirm(event) {
       // 控制搜索结果的显示
       this._showResult();
       // 初始化behavior中的数据
       this.initialize();
       const word = event.detail.value || event.detail.text;
       bookModel.search(0, word).then(res => {
         this.setMoreData(res.books);
         this.setTotal(res.total);
         this.setData({
           q: word
         })
         keywordModel.addToHistory(word);
       })
     },
     // X的图标取消事件
     onDelete(event) {
       this._closeResult();
     },
     // 显示搜索结果
     _showResult(){
       this.setData({
         searching: true
       })
     },
     // 隐藏搜索结果
     _closeResult(){
       this.setData({
         searching: false
       })
     },
     // 判断是否有锁
     _isLocked(){
       this.data.loading?true:false;
     },
     // 加锁
     _locked(){
       this.data.loading = true;
     },
     // 释放锁
     _unLocked(){
       this.data.loading = false;
     }
   },
 })

注意：带有下划线的方法是理论上的私有方法，姑且这么说吧，其实本质上和其他方法是一致的，这些方法的优化是增加代码的可读性，使得代码更加容易让人理解，这里其实由很多细节需要注意的，包括锁，为了避免死锁，需要在请求失败的时候同时将锁释放，以及confirm方法中主要将之前的数据清空，否则会造成dataArray中数据是重复数据，还有就是在加锁的时候需要在判断是否还有更多数据之后进行，如果在这之前进行，那么会造成数据不会加载的情况，等等，之后会完善一下加载图标，哈哈，感觉越来越完美

 （5）loading组件的开发与应用

这个就直接从网上找一个loading图标的样式就行，看看loading组件的代码

 // index.wxml代码
 <view class="spinner">
   <view class="double-bounce1"></view>
   <view class="double-bounce2"></view>
 </view>

 // 样式代码 index.wxss
 .spinner {
   width: 40rpx;
   height: 40rpx;
   position: relative;
   /* margin: 100px auto; */
 }

 .double-bounce1, .double-bounce2 {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background-color: #3063b2;
   opacity: 0.6;
   position: absolute;
   top: 0;
   left: 0;

   -webkit-animation: bounce 2.0s infinite ease-in-out;
   animation: bounce 2.0s infinite ease-in-out;
 }

 .double-bounce2 {
   -webkit-animation-delay: -1.0s;
   animation-delay: -1.0s;
 }

 @-webkit-keyframes bounce {
   0%, 100% { -webkit-transform: scale(0.0) }
   50% { -webkit-transform: scale(1.0) }
 }

 @keyframes bounce {
   0%, 100% {
     transform: scale(0.0);
     -webkit-transform: scale(0.0);
   } 50% {
     transform: scale(1.0);
     -webkit-transform: scale(1.0);
   }
 }

看一下loading组件的应用：

主要是在搜索结果展示之前，以及加载更多的时候进行loading组件的显示，在其他时候是无需显示的

   <!-- loading图标显示 -->
   <v-loading class="loading-center" wx:if="{{loadingCenter}}" />
   <v-loading class="loading" wx:if="{{loading}}" />

看一下如何控制显示隐藏的

loadingCenter主要是在onConfirm方法中进行控制的，这个不多说，看一下loading的控制，就是在加锁和释放锁的时候进行控制就行了

     // 加锁
     locked() {
       // this.data.loading = true;
       this.setData({
         loading: true
       })
     },
     // 释放锁
     unLocked() {
       // this.data.loading = false;
       this.setData({
         loading: false
       })
     }

这里还有代码的优化，以及在没有搜索结果的时候进行友好的提示，以及在没有更多的数据的时候进行友好的提示，以及在取消的时候进行数据的初始化操作，很多细节的东西，这里就不想写了，很琐碎的东西，但是在我看来是很值得付出时间去完善的一部分，细节决定成败，大家同样是一个功能，最能看出一个人水平的是谁能把细节注意到，并且能够做好，在以后的工作中，这是自己需要提升的一个领域，专注细节，布局整个系统

内容出处：七月老师《纯正商业级小程序开发》视频课程

视频课程链接：https://coding.imooc.com/class/251.html