微信小程序—模拟豆瓣搜索电影（图文）

微信小程序—模拟豆瓣搜索电影

先新建search目录和page
1、在search.wxml页面
给input添加bindinput事件
给input写一个value值，用来清空
给button绑定bindtap事件

<view id="container">
  <input value="{{inputValue}}" bindinput="searchWord" class="search" placeholder="搜索电影" />
  <view wx:if="{{detail.title}}"> // 若电影名不存在则view块消失
    <text>电影名：{{detail.title}}</text> // 储存检索到的电影名
    <image src="{{detail.images.small}}"></image> // 储存检索到的电影的图片
  </view>
  <button bindtap="searchFn" class="btn" type="primary">搜索</button>
</view>

2、在app.js

// 为了让每个页面都可以请求到数据，所以用了公共方法，写在了app.js里
  // cb是回调函数
  getData: function (urlData, cb) {
    wx.request({
      url: urlData,
      success(res) {
        cb(res.data)
      }
    })
  },

3、在search.js里写

let app = getApp(); // 先获取全局，才能使用app.js里定义的getData方法
let url = 'https://www.easy-mock.com/mock/5d41580a1a802c0d5e53dcc2/example/douban';
// 一个储存电影名称和图片的地址

4、在search.js里写

data: {
    datail: {}， // 储存和input框输入内容项目的对象
    inputValue: '' // 获取input框内的值
  },
 searchWord: function (e) {
    if (e.detail.value == '') {
      this.setData({detail: {}}) // 如果input框内的文字删除则什么也不显示
    } else {
      this.setData({ inputValue: e.detail.value }) // 把获取到的值给inputValue
    }
  },
  searchFn: function () { // button按钮绑定的事件
    app.getData(url, (data) => { // 调用app.js里面的getData方法，传入easy-mock地址，并进行回调函数
      let result = data.subjects.filter((item) => { // es6语句进行筛选，选择easy-mock储存的数据和input框内输入值相同的电影
        return item.title == this.data.inputValue // 查看easy-mock里的title值是否和input框内的值相同
      })
      this.setData({ detail: result[0], inputValue: ''}) 
      // detail: result[0], 把搜索到的内容赋值给detail变量，因为只有一个所以在result后面加上【0】
      // inputValue: ''搜索完成之后自动清空input框内的值
    })
  }

效果：