微信小程序开发-7【搜索功能】

2017-09-24    标签:微信小程序    阅读:436   


微信小程序开发-7【搜索功能】-案例,结合豆瓣电影api接口

  1. 页面代码:search.wxml

查询你要搜索:{{inputVal}}{{item.text}}加载中...

2.search.js

// pages/search/search.js
Page({

/**
   * 页面的初始数据
   */
data: {
inputVal:"",
move:[],
hidden:true,
},

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {

},

/**
   * 生命周期函数--监听页面初次渲染完成
   */
onReady: function () {
},

/**
   * 生命周期函数--监听页面显示
   */
onShow: function () {
},

/**
   * 生命周期函数--监听页面隐藏
   */
onHide: function () {
},

/**
   * 生命周期函数--监听页面卸载
   */
onUnload: function () {
},

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
onPullDownRefresh: function () {
},

/**
   * 页面上拉触底事件的处理函数
   */
onReachBottom: function () {
},

/**
   * 用户点击右上角分享
   */
onShareAppMessage: function () {
},
bindKeyInput:function(e){
this.setData({inputVal:e.detail.value});
},
processSubject(subject) {
var title = subject.title;
var directors = subject.directors;
var directorsStr = "";
for (var index in directors) {
directorsStr = directorsStr + directors[index].name + "/";
}
if (directorsStr != "") {
directorsStr = directorsStr.substring(0, directorsStr.length - 2);
}
var casts = subject.casts;
var castsStr = "";
for (var index in casts) {
castsStr = castsStr + casts[index].name + "/";
}
if (castsStr != "") {
castsStr = castsStr.substring(0, castsStr.length - 2);
}
var genres = subject.genres;
var genresStr = "";
for (var index in genres) {
genresStr = genresStr + genres[index] + "/";
}
if (genresStr != "") {
genresStr = genresStr.substring(0, genresStr.length - 2);
}
var year = subject.year;
var text = "名称:" + title + "\n导演:" + directorsStr + "\n主演:" + castsStr + "\n类型:" + genresStr + "\n上映年份:" + year + "(中国大陆)";
subject.text = text;
},
processSubjects(subjects) {
for (var i = 0; i < subjects.length; i++) {
var subject = subjects[i];
this.processSubject(subject);
}
},
search:function(){
if(this.data.inputVal==""){
wx.showModal({
title: '小提示',
showCancel: false,
content: '请输入关键词,如:三生三世十里桃花',
})
return;
}
this.setData({hidden:false});
var page = this;
wx.request({
url: 'http://api.douban.com/v2/movie/search?q='+page.data.inputVal,
header: {
"Content-Type": "json"
},
success: function (res) {

var subjects = res.data.subjects;
// console.log(subjects);
page.processSubjects(subjects);
page.setData({ moves: subjects, hidden: true });
}
})
},
detail: function (e) {
wx.navigateTo({
url: '../detail/detail?id=' + e.currentTarget.id
})
}
})

3.详情页面,detail.wxml

{{moves.text}}{{moves.summary}}

4. detail.js

Page({

/**
   * 页面的初始数据
   */
data: {
moves: {},
},

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
this.loadMove(options.id);
},

/**
   * 生命周期函数--监听页面初次渲染完成
   */
onReady: function () {
},

/**
   * 生命周期函数--监听页面显示
   */
onShow: function () {
},

/**
   * 生命周期函数--监听页面隐藏
   */
onHide: function () {
},

/**
   * 生命周期函数--监听页面卸载
   */
onUnload: function () {
},

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
onPullDownRefresh: function () {
},

/**
   * 页面上拉触底事件的处理函数
   */
onReachBottom: function () {
},

/**
   * 用户点击右上角分享
   */
onShareAppMessage: function () {
},
processSubject(subject) {
var title = subject.title;
var directors = subject.directors;
var directorsStr = "";
for (var index in directors) {
directorsStr = directorsStr + directors[index].name + "/";
}
if (directorsStr != "") {
directorsStr = directorsStr.substring(0, directorsStr.length - 2);
}
var casts = subject.casts;
var castsStr = "";
for (var index in casts) {
castsStr = castsStr + casts[index].name + "/";
}
if (castsStr != "") {
castsStr = castsStr.substring(0, castsStr.length - 2);
}
var genres = subject.genres;
var genresStr = "";
for (var index in genres) {
genresStr = genresStr + genres[index] + "/";
}
if (genresStr != "") {
genresStr = genresStr.substring(0, genresStr.length - 2);
}
var year = subject.year;
var text = "名称:" + title + "\n导演:" + directorsStr + "\n主演:" + castsStr + "\n类型:" + genresStr + "\n上映年份:" + year + "(中国大陆)";
subject.text = text;
},
processSubjects(subjects) {
for (var i = 0; i < subjects.length; i++) {
var subject = subjects[i];
this.processSubject(subject);
}
},
loadMove: function () {
var page = this;
wx.request({
url: 'http://api.douban.com/v2/movie/in_theaters',
header: {
"Content-Type": "json"
},
success: function (res) {

var subjects = res.data.subjects;
console.log(subjects);
page.processSubjects(subjects);
page.setData({ moves: subjects, hidden: true });
}
})
},
loadMove: function (movieId) {
var page = this;
wx.request({
url: 'https://api.douban.com/v2/movie/subject/' + movieId,
header: {
'Content-Type': 'json'
},
success: function (res) {
console.log(res.data);
var subject = res.data;
page.processSubject(subject);
page.setData({ moves: subject });
}
})
}
})

5. 界面效果:

①搜索界面

1506244608111076.png

②不输入任何关键词提示

1506244630906867.png

③搜索结果页

1506244661641671.png

④ 详情页

1506244737347345.png

⑤APP首页

1506244982136008.png

【腾讯云】618云聚惠,百款云产品限量抢购,1核2G云服务器首年95元 618年中云钜惠大促,精选云产品1折起,助力新基建,618年中大促云服务器88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/36.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录

博主信息

头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×