微信小程序极简入门（六）--豆瓣电影小程序下拉刷新和搜索功能

我们先将 “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标签代码为：

<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" />
      
      <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”不再显示。

      
      <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字段更改为我们小程序的名字，然后按照：微信小程序官方文档，一步一步的去提交审核就可以了。