微信小程式極簡入門（六）--豆瓣電影小程式下拉重新整理和搜尋功能

我們先將 “pages/douban/index”,調為首頁，因為我們已經實現了列表頁的開發，那麼在 pages/douban/index.wxml中的更多已經可以指向列表頁了，如圖：

一.實現下載重新整理功能

1.實際上，小程式本身已經提供了下拉更新的API，在目錄樹開啟pages/douban/index.js，新增方法：

  onPullDownRefresh() {
    wx.showLoading({
      title: '載入中',
    })
    this.retrieveData().then(() => {
      wx.stopPullDownRefresh()
      wx.hideLoading()
    })
  },

當retrieveData資料接收完之後，就呼叫 wx.stopPullDownRefresh()停止重新整理，並且 wx.hideLoading()隱藏載入提示。
2.開啟pages/douban/index.json檔案，修改為：

{"enablePullDownRefresh": true}

就兩步就完成了pages/douban/index.wxml頁面的重新整理功能。

二.實現搜尋功能

實現首頁單機搜尋進入搜尋頁面，在搜尋頁面，提供即時匹配關鍵字的功能。

1.在目錄樹中開啟pages/douban/index.wxml，在最下面新增如下程式碼：

<view class="weui-search-bar" style="position: absolute;top:0;width:100%;opacity: .8;">
  <navigator url="search" class="weui-search-bar__form">
    <view class="weui-search-bar__box">
      <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
      <input type="text" class="weui-search-bar__input" />
    </view>
    <label class="weui-search-bar__label">
      <icon class="weui-icon-search" type="search" size="14"></icon>
      <view class="weui-search-bar__text">搜尋</view>
    </label>
  </navigator>
</view>

這部分wxml標籤程式碼，在首頁定義了一個八分透明的“假”搜尋框，效果如上圖。

2.在app.json檔案中和之前一樣新增

    "pages/douban/search",        

建立相關頁面。

2.開啟pages/douban/search.wxml頁面，修改wxml標籤程式碼為：

<!--pages/douban/search.wxml-->
<view class="weui-search-bar">
  <view class="weui-search-bar__form">
    <view class="weui-search-bar__box">
      <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
      <input type="text" class="weui-search-bar__input" value="{{searchWords}}" focus="{{searchInputFocus}}" bindinput="onSearchInputType" />
      <!--清空內容的icon-->
      <view class="weui-icon-clear" wx:if="{{searchWords.length > 0}}" bindtap="clearSearchInput">
        <icon type="clear" size="14"></icon>
      </view>
    </view>
    <label class="weui-search-bar__label" hidden="{{searchInputFocus}}" bindtap="showSearchInput">
      <icon class="weui-icon-search" type="search" size="14"></icon>
      <view class="weui-search-bar__text">搜尋</view>
    </label>
  </view>
<view class="weui-search-bar__cancel-btn" hidden="{{!searchInputFocus}}" bindtap="onTapSearchBtn">
  <block wx:if="{{searchWords.length == 0}}">取消</block>
  <block wx:else>搜尋</block>
</view>
</view>
<!--即時搜尋詞列表-->
<view class="weui-cells searchbar-result" wx:if="{{wordsList.length > 0}}">
  <navigator url="item?id={{item.id}}" wx:for="{{wordsList}}" wx:key="{{item.id}}" class="weui-cell" hover-class="weui-cell_active">
    <view class="weui-cell__bd">
      <view>{{item.title}}</view>
    </view>
  </navigator>
</view>

<import src="list-template" />
<template is="list-template" data="{{ movies,total,page }}" />

3.開啟pages/douban/search.js，將程式碼修改為：

// pages/douban/search.js
Page({
  data: {
    searchInputFocus: true,
    searchWords: "",
    wordsList: [],
    size: 20,
    page: 1,
    movies: [],
    requestInternal: -1,
  },
  onTapSearchBtn() {
    console.log("words", this.data.searchWords)
    if (this.data.searchWords != "") {
      this.retrieve()
    }
    this.setData({
      searchInputFocus: false,
      searchWords: "",
      wordsList: []
    });
  },
  retrieve() {
    let app = getApp()
    let start = (this.data.page - 1) * this.data.size
    wx.showLoading({ title: '載入中' })

    return app.request(`https://api.douban.com/v2/movie/search?q=${this.data.searchWords}&start=${start}&count=${this.data.size}`)
      .then(res => {
        console.log("res", res)
        if (res.subjects.length) {
          let movies = this.data.movies.concat(res.subjects)
          let total = Math.floor(res.total / this.data.size)
          this.setData({ movies: movies, total: total, page: this.data.page, wordsList: [] })
          wx.setNavigationBarTitle({ title: res.title })
        }
      }).catch(err => {
        console.error(err)
      }).finally(() => {
        wx.hideLoading()
      })
  },
  showSearchInput() {
    this.setData({
      searchInputFocus: true
    });
  },
  // 清空輸入框內容
  clearSearchInput() {
    this.setData({
      searchWords: ""
    });
  },
  // 當在搜尋框鍵入內容
  onSearchInputType(e) {
    let app = getApp()
    let words = e.detail.value
    this.setData({
      searchWords: words
    });
    clearTimeout(this.data.requestInternal)
    this.data.requestInternal = setTimeout(() => {
      app.request(`https://api.douban.com/v2/movie/search?q=${words}&start=0&count=6`).then(d => {
        console.log(d)
        if (d.subjects.length) {
          this.setData({
            wordsList: d.subjects
          });
        }
      })
    }, 2000)
  }
})

這裡再次複用了模版元件list-template，這就是定義模版元件的好處。
當單擊輸入框表象UI時，觸發showSearchInput函式，在這個函式中僅設定焦點變數searchInputFocus為true.
當單機取消符號“x”時，觸發clearSearchInput函式，設定searchWords為空。當searchWords為空時，“x”不再顯示。

      <!--清空內容的icon-->
      <view class="weui-icon-clear" wx:if="{{searchWords.length > 0}}" bindtap="clearSearchInput">
        <icon type="clear" size="14"></icon>
      </view>

當searchWords的字串長度不為0時，顯示取消，否則顯示搜尋，這裡繫結onTapSearchBtn函式，在onTapSearchBtn函式中先請除搜尋變數，如果搜尋詞不為空，則呼叫retrieve函式：

<view class="weui-search-bar__cancel-btn" hidden="{{!searchInputFocus}}" bindtap="onTapSearchBtn">
  <block wx:if="{{searchWords.length == 0}}">取消</block>
  <block wx:else>搜尋</block>
</view>

修改為上述檔案程式碼後，點選模擬器就可以檢視相應效果了。
github程式碼地址：https://github.com/lightTrace/xiaochengxu/tree/master/douban-v5
至此，一個實時查詢最新電影的小程式就完成了。

如何將我們完成的小程式打包上傳呢？我們只需要將app.json中的navigationBarTitleText欄位更改為我們小程式的名字，然後按照：微信小程式官方文件，一步一步的去提交稽核就可以了。