微信小程序入门与实战(11)——搜索页面、更多页面、电影详情页面

最新推荐文章于 2022-07-26 01:00:00 发布
最新推荐文章于 2022-07-26 01:00:00 发布
阅读量2.7k 收藏 14
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序入门与实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tracy_Yuan2014/article/details/109563591

搜索页面、更多页面、电影详情页面

功能

搜索页面：实现点击搜索框，弹出搜索的电影结果
更多页面：点击电影页面的更多按钮，显示对应模块的更多电影
电影详情页面：点击对应的电影，进入对应的电影详情页面

搜索页面

movies.json

新增 l-search-bar组件

{
  "usingComponents": {
    "movie-list":"/components/movie-list/index",
    "movie":"/components/movie/index",
    "l-search-bar":"/miniprogram_npm/lin-ui/search-bar/index"
  }
}

movies.wxml

l-search-bar绑定两个事件：点击确认按钮触发onConfirm事件，显示对应的搜索结果，这里用到了之前实现的组件movie；取消时触发onSearchCancel，显示原始页面，这里用wx:if/wx:else实现页面显示的切换。

<!--pages/movies/movies.wxml-->
<l-search-bar bind:lincancel="onSearchCancel" bind:linconfirm="onConfirm" l-class="ex-search-bar"
  placeholder="盗梦空间、你的名字" />
<view wx:if="{{!searchResult}}">
  <movie-list bind:tap="onGotoMore" data-type="in_theaters" movies="{{inTheaters}}" title="正在热映" f-class="movie-list" />
  <movie-list bind:tap="onGotoMore" data-type="coming_soon" movies="{{comingSoon}}" title="即将上映" f-class="movie-list" />
  <movie-list bind:tap="onGotoMore" data-type="top250" movies="{{top250}}" title="豆瓣Top250" f-class="movie-list" />
</view>
<view class="search-container" wx:else>
  <block wx:for="{{searchData}}" wx:key="index">
    <movie class="movie" movie="{{item}}" />
  </block>
</view>

movies.js

// pages/movies/movies.js
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    inTheaters:[],
    comingSoon:[],
    top250:[],
    searchResult:false,
    searchData:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(app)
    wx.request({
      url:app.globalData.gBaseUrl+'in_theaters?',
      data:{
        start:0,
        count:3
      },
      success:(res)=>{
        console.log(res);
        console.log("this",this)
        
        this.setData({
          inTheaters:res.data.subjects
        })
        console.log("inTheaters",this.data.inTheaters);
      }
    })

    wx.request({
      url: app.globalData.gBaseUrl+'coming_soon?',
      data:{
        start:0,
        count:3
      },
      success:(res)=>{
        this.setData({
          comingSoon:res.data.subjects
        })
      }
    })
    wx.request({
      url: app.globalData.gBaseUrl+'top250?',
      data:{
        start:0,
        count:3
      },
      success:(res)=>{
        this.setData({
          top250:res.data.subjects
        })
      }
    })
  },
  onGotoMore(events){
    console.log("onGotoMore");
    console.log(events);
    const type = events.currentTarget.dataset.type;
    wx.navigateTo({
      url: '/pages/more-movie/more-movie?type='+type,
    })
  },

  onConfirm(events){
    this.setData({
      searchResult:true
    });
    wx.request({
      url: app.globalData.gBaseUrl + 'search',
      data:{
        q:events.detail.value
      },
      success:(res)=>{
        console.log("onConfirm");
        console.log(res);
        this.setData({
          searchData:res.data.subjects
        })
      }
    })
  },
  onSearchCancel(events){
    this.setData({
      searchResult:false
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

更多页面

功能解析

1、因为电影页面有3个模块，点击对应的更多按钮，跳转到对应的过呢更多电影页面
2、跳转到更多页面时，这里每个电影可以复用之前实现的movie组件
3、首次加载12部电影，往下拉时，再加载12部电影
4、向上拉重新加载页面，加载最新的12部电影

more-movie.json

{
  "usingComponents": {
    "l-rate":"/miniprogram_npm/lin-ui/rate/index"
  }
}

more-movie.wxml

<!--pages/more-movie/more-movie.wxml-->
<view class="container">
  <block wx:for="{{movies}}" wx:key="index">
    <movie class="movie" movie="{{item}}"></movie>
  </block>
</view>

more-movie.wxss

/* pages/more-movie/more-movie.wxss */
.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding:30rpx 28rpx;
  justify-content: space-between;
}


.movie{
  margin-bottom: 30rpx;
}

实现每行3个movie，间隔相同

justify-content: space-between;

more-movie.js

在onLoad时解析从movie.wxml中传入的data-type属性对应的值，实现加载对应模块的更多电影的数据，这个值在options.type中接收到。

当触及底部时，触发onReachBottom方法，这里将原来获取到的movies数据使用concat拼贴新申请到的电影数据。

// pages/more-movie/more-movie.js

const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    movies:[],
    _type:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("more-movie的onload");
    console.log(options);
    const type = options.type;
    this.data._type = type;
    wx.request({
      url: app.globalData.gBaseUrl+type,
      data:{
        start:0,
        count:12
      },
      success:(res)=>{
        console.log(res)
        this.setData({
          movies:res.data.subjects
        })
      }
    })
  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("more-movie page onPullDownRefresh");
    wx.request({
      url: app.globalData.gBaseUrl+this.data._type,
      data:{
        start:0,
        count:12
      },
      success:(res)=>{
        this.setData({
          movies:res.data.subjects
        })
      }
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    //每触底一次，加载新的数据
    console.log("more-movie page onReachBottom");
    wx.request({
      url: app.globalData.gBaseUrl+this.data._type,
      data:{
        start:this.data.movies.length,
        count:12
      },
      success:(res)=>{
        console.log(res);
        this.setData({
          movies:this.data.movies.concat(res.data.subjects)
        })
      }
    })
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

电影详情页面

这个页面主要涉及电影详情页面的css样式，然后import了util.js里的方法，进行电影数据的处理。

movie-detail.json

{
  "usingComponents": {
    "l-rate":"/miniprogram_npm/lin-ui/rate/index"
  }
}

movie-detail.wxml

<!--pages/movie-detail/movie-detail.wxml-->
<view class="container">
  <image mode="aspectFill" class="head-img" src="{{movie.image}}"></image>
  <view class="head-img-hover">
    <text class="main-title">{{movie.title}}</text>
    <text class="sub-title">{{movie.subtitle}}</text>
    <view class="like">
      <text class="highlight-font">{{movie.wishCount}}</text>
      <text class="plain-font">人喜欢</text>
      <text class="highlight-font">{{movie.commentsCount}}</text>
      <text class="plain-font">条评论</text>
    </view>
    <image bind:tap="onViewPost" class="movie-img" src="{{movie.image}}"></image>
  </view>

  <view class="summary">
    <view class="original-title">
      <text>{{movie.title}}</text>
    </view>
    <view class="flex-row">
      <text class="mark">评分</text>
      <view class="score-container">
        <l-rate disabled="{{true}}" size="22" score="{{movie.rating}}" />
        <text class="average">{{movie.average}}</text>
      </view>
    </view>
    <view class="flex-row">
      <text class="mark">导演</text>
      <text>{{movie.directors}}</text>
    </view>
    <view class="flex-row">
      <text class="mark">影人</text>
      <text>{{movie.casts}}</text>
    </view>
    <view class="flex-row">
      <text class="mark">类型</text>
      <text>{{movie.genres}}</text>
    </view>
  </view>

  <view class="hr"></view>

  <view class="synopsis">
    <text class="synopsis-font">剧情简介</text>
    <text class="summary-content">{{movie.summary}}</text>
  </view>

  <view class="hr"></view>

  <view class="casts">
    <text class="cast-font"> 影人</text>
    <scroll-view enable-flex scroll-x class="casts-container">
      <block wx:for="{{movie.castsInfo}}" wx:key="index">
        <view class="cast-container">
          <image class="cast-img" src="{{item.img}}"></image>
          <text>{{item.name}}</text>
        </view>
      </block>
    </scroll-view>
  </view>

</view>

movie-detail.wxss

/* pages/movie-detail/movie-detail.wxss */
.container{
  display: flex;
  flex-direction: column;
}
.head-img{
  width: 100%;
  height: 320rpx;
  -webkit-filter:blur(20px); 
  filter:blur(20px);
}
.head-img-hover{
  width: 100%;
  height: 320rpx;
  position: absolute;
  display: flex;
  flex-direction: column;
}
.main-title{
  font-size: 38rpx;
  color:#fff;
  font-weight: bold;
  letter-spacing: 2rpx;
  margin-top: 50rpx;
  margin-left: 40rpx;
}
.sub-title{
  font-size: 28rpx;
  color:#fff;
  margin-left: 40rpx;
  margin-top: 30rpx;
}
.like{
  margin-top: 30rpx;
  margin-left:40rpx;
}
.highlight-font{
  color: #f21146;
  font-size: 22rpx;
  margin-right: 10rpx;
}
.plain-font{
  color:#666;
  font-size: 22rpx;
  margin-right: 30rpx;
}
.movie-img{
  height: 238rpx;
  width: 175rpx;
  position: absolute;
  top:160rpx;
  right: 30rpx;
}

.summary{
  margin-left: 40rpx;
  margin-top: 40rpx;
  columns: #777777;
}
.original-title{
  color:#1f3463;
  font-size: 24rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}
.flex-row{
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 10rpx;
}
.mark{
  margin-right: 30rpx;
  white-space: nowrap;
  color: #999999;
}
.score-containe{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.average{
  margin-left: 20rpx;
  margin-top: 4rpx;
}

.hr{
  margin-top:45rpx;
  width: 100%;
  height: 1px;
  background-color: #d9d9d9;
}

.synopsis{
  margin-left:40rpx;
  display:flex;
  flex-direction: column;
  margin-top: 50rpx;
}

.synopsis-font{
  color:#999;
}

.summary-content{
  margin-top: 20rpx;
  margin-right: 40rpx;
  line-height:40rpx;
  letter-spacing: 1px;
}

.casts{
  display: flex;
  flex-direction: column;
  margin-top:50rpx;
  margin-left:40rpx;
}

.cast-font{
  color: #999;
  margin-bottom: 40rpx;
}

.cast-img{
  width: 170rpx;
  height: 210rpx;
  margin-bottom: 10rpx;
}
.casts-container{
  display: flex;
  flex-direction: row;
  margin-bottom: 50rpx;
  margin-right: 40rpx;
  height: 300rpx;
}

.cast-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 40rpx;
}


// pages/movie-detail/movie-detail.js
import {convertToCastString, convertToCastInfos} from '../../utils/util.js'
const app = getApp();

Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const mid = options.mid;
    wx.request({
      url: app.globalData.gBaseUrl+'subject/' + mid,
      success:(res)=>{
        console.log(res.data);
        this.processMovieData(res.data);
      }
    })
  },
  processMovieData(movie){
    const data = {}
    data.directors = convertToCastString(movie.directors)
    data.casts = convertToCastString(movie.casts)
    data.image = movie.images.large
    data.title = movie.title
    data.subtitle = movie.countries[0]+'·'+movie.year
    data.wishCount = movie.wish_count
    data.commentsCount = movie.comments_count
    data.rating = movie.rating.stars/10
    data.average = movie.rating.average
    data.genres = movie.genres.join('、')
    data.summary = movie.summary
    data.castsInfo = convertToCastInfos(movie.casts)
    this.setData({
      movie:data
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

util.js

function convertToCastString(casts){
  var castsjoin = "";
  for (var idx in casts) {
    castsjoin = castsjoin + casts[idx].name + " / ";
  }
  return castsjoin.substring(0, castsjoin.length - 2);
}

function convertToCastInfos(casts) {
  var castsArray = []
  for (var idx in casts) {
    var cast = {
      img: casts[idx].avatars ? casts[idx].avatars.large : "",
      name: casts[idx].name
    }
    castsArray.push(cast);
  }
  return castsArray;
}

export {
  convertToCastString,
  convertToCastInfos
}

// const formatTime = date => {
//   const year = date.getFullYear()
//   const month = date.getMonth() + 1
//   const day = date.getDate()
//   const hour = date.getHours()
//   const minute = date.getMinutes()
//   const second = date.getSeconds()

//   return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
// }

// const formatNumber = n => {
//   n = n.toString()
//   return n[1] ? n : '0' + n
// }

// module.exports = {
//   formatTime: formatTime
// }
【微信小程序 | 实战开发】常用小程序框架介绍
鱼干的博客
09-25 4508
微信小程序实质上是一款基于web技术的应用程序，他和我们平常所接触到的前端网页是大同小异的。相同点在于他们使用的开发语言，代码结构以及代码的运行机制是一样。但是他们也存在一些不同之处
微信小程序--搜索电影app（续）
Inite的博客
07-10 2417
热门推荐页面各个文件代码如下： recommendMovies.wxml： 名称：{{item.title}} {{item.rating.average}}分 类型：
豆瓣评分项目实战
xrs151的博客
10-27 651
1.封装组件 封装效果如下： // componets/itemBox/itemBox.js Component({ properties: { item: { type: Object, value: {} }, itemurl: { type: String, value: "" } }, data: {}, lifetimes: { attached: function () { } }
微信小程序 电影搜索
weixin_42170906的博客
09-09 956
微信小程序导航组件——电影界面
daisy211988的博客
07-26 1531
【微信小程序代码】微信小程序导航组件——电影界面。
微信小程序电影推荐
08-10
微信小程序 - 电影推荐
【微信小程序开发零基础入门】——微信小程序入门
m0_52435951的博客
02-17 1万+
微信小程序入门一、小程序介绍1.1.什么是小程序？1.2. 微信⼩程序历史1.3.小程序可以干什么？1.4.疯狂的微信⼩程序1.5. 还有其他的⼩程序 不容忽视1.6. 官⽅微信⼩程序体验二、小程序开发资料三、第⼀个微信⼩程序四、开发小程序储备知识五、小程序特点六、wxml 语法七、小程序 API八、小程序特点九、小程序支付流程 一、小程序介绍 1.1.什么是小程序？ 2017 年度百度百科十大热词之一 微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用 (
微信小程序入门.docx
最新发布
10-05
【微信小程序入门】 微信小程序是一种轻量级的应用形态，它不需要用户下载安装即可使用，极大地降低了用户接触应用的门槛。自2017年微信小程序正式上线以来，它已经成为了移动互联网领域的重要组成部分，覆盖了众多...
零基础入门微信小程序开发
热门推荐
GitChat
07-03 34万+
本课程是一个系列入门教程，目标是从 0 开始带领读者上手实战，课程以微信小程序的核心概念作为主线，介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展，另外加上开发工具的安装、小程序发布等内容，共 9 篇文章。
微信小程序开发之十九 —— 补充与结尾
@不胜寒
07-26 595
快来学习微信小程序开发呀 —— 补充与结尾
微信小程序实现搜索功能
10-15
主要介绍了微信小程序实现搜索功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序搜索功能
02-07
微信小程序搜索功能，最近一直在做微信小程序的东西，所以整理一个搜索功能。
微信小程序-微信小程序－豆瓣电影2
08-07
微信小程序－豆瓣电影2 说明： 实现热映，待映，搜索，口碑等功能，特色： 实现图片集水平滚动 实现图片上覆盖文字等内容 实现下拉加载 数据接口: https://api.getweapp.com/vendor/douban/subject https://api.getweapp.com/vendor/douban/in_theaters https://api.getweapp.com/vendor/douban/search https://api.getweapp.com/vendor/douban/top250 https://api.getweapp.com/vendor/douban/coming_soon 目录结构： comm — 存放项目数据接口等公共文件 component — 存放项目公共组件文件 pages — 存放项目页面文件 dist — 存放项目图片文件 开发环境： 微信web开发者工具 v0.11.112301 项目截图： https://www.getweapp.com/project?projectId=583ed5d6e8ff074c22
微信小程序-电影推荐功能示例.zip
04-13
微信小程序-电影推荐功能示例.zip 小程序模板代码，可以直接从源码里粘贴复制过来，虽然这样做不利于自己独立编写代码。
微信小程序实现搜索功能并跳转搜索结果页面
10-16
主要介绍了微信小程序实现搜索功能并跳转搜索结果页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序—模拟豆瓣搜索电影（图文）
Poppy_LYT的博客
08-19 1673
微信小程序—模拟豆瓣搜索电影 先新建search目录和page 1、在search.wxml页面 给input添加bindinput事件 给button绑定bindtap事件 <view id="container"> <input bindinput="keyWord" class="search" placeholder="搜索电影" /> <view w...
微信小程序电影详情功能实现
weixin_43904465的博客
06-09 1万+
小程序中详情页面 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将...
微信小程序一星期入门-完结篇--电影详情页的制作
听雨少年的博客
09-02 9785
文章目录微信小程序入门(七)--入门篇完结实现电影页面按钮的更多功能获取数据more-movie页面布局movies页面更多按钮绑定事件更多按钮的事件更多页面onLoad的更改实现movies电影页面的搜索功能注册组件使用上滑加载更多电影数据加载更多电影数据提示用户数据请求中下拉刷新数据开启页面的下拉刷新监听用户下拉动作实现下拉刷新增强阅读页面效果配置标题与动态配置标题配置标题动态配置标题电影详情页组件的独立性对post组件进行改进发射事件接收事件文章页面问题修正方式一方式二电影详情页的制作给自定义组件mo
微信小程序极简入门（四）--豆瓣电影小程序页面详情跳转
一个真实、有温度的无名小卒
01-01 5728
小程序 页面跳转
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值