微信小程序扩展1

0. 权限

一.热映

index.js

data: {
    classHot:[]
  },
  loadHot(){
    console.log("加载首页电影");
    let db = wx.cloud.database();
    db.collection("movies_hot").where({
      movieType:0
    }).get().then(res=>{
      console.log("查询到多条数据:",res)
      this.setData({classHot:res.data})
    })
  },
  onLoad(){
    this.loadHot();
  }

index.wxml

<view class="main-container">
  
  <view class="movie-item" wx:for="{{classHot}}" wx:key="index">
      <navigator url="/pages/movie/movie?id={{item.id}}" hover-class="none">
        
        <view class="movie-item-avatar">
          <image src="{{item.img}}">image>
        view>
        
        
        <view class="movie-item-content-wrapper">
            <view class="content">
                <view class="title">{{item.nm}}view>
                <view class="line-ellipsis">{{item.cat}}view>
                <view class="line-ellipsis">主演:{{item.star}}view>
            view>
            
            <view class="score-wrapper">
              <view class="score">{{item.sc}}view>
              
            view>
            
        view>
        
      navigator>
  view>
     
view>

二.待映

1. 点击顶部导航，动态更新列表内容(待映/经典)

1. 点击某一个顶部导航选项时，为选中项设置选中状态（有红色下划线）,其他选项恢复默认。
   如何通过js修改wxml页面的样式
   通过data,在data中声明变量,然后通过data中变量的值,修改页面中的样式

// index.js
data:{
    cid:1,  //描述当前顶部导航选中项的类别ID
    movies:[]
},
//自定义方法handleChangeNav,通过点击修改样式
//怎么知道点击的是哪个?通过传参(参数在自定义属性data-cid=1,2,3)
/**更新导航时,触发该事件 */
    handleChangeNav(e){
        let id = e.target.dataset.id
        this.setData({cid:id}) //将data中的cid,改为选中项ID
    },

    <view class="switch-hot">
      <text class="hot-item {{cid==1?'hot-item-active':''}}" bindtap="handleChangeNav" data-id="1">热映text>
      <text class="hot-item {{cid==2?'hot-item-active':''}}" bindtap="handleChangeNav" data-id="2">待映text>
      <text class="hot-item {{cid==3?'hot-item-active':''}}" bindtap="handleChangeNav" data-id="3">经典text>
    view>

handleChangeNav(e){
    let id = e.target.dataset.id
    this.setData({cid:id}) //将data中的cid,改为选中项ID
    if(id==1){
      this.loadHot()
    }else if(id==2){
      this.loadWait()
    }else if(id==3){
      this.loadClassic()
    }else{
      console.log("加载失败")
    }
},

三.经典/热映

loadWait(){
    console.log("加载待映电影");
    let db = wx.cloud.database();
    db.collection("movies_wait").where({
      movieType:0
    }).get().then(res=>{
      console.log("查询到多条数据:",res)
      this.setData({classHot:res.data})
    })
  },
  loadClassic(){
    console.log("加载经典电影");
    let db = wx.cloud.database();
    db.collection("movies_classic").where({
      movieType:0
    }).get().then(res=>{
      console.log("查询到多条数据:",res)
      this.setData({classHot:res.data})
    })
  },

四.电影详情页

步骤

1. 先创建movies页面
2. 编写movie页面
3. 首页在首位
4. 点击首页的电影, 跳转到对应的电影详清
5. 点击电影时,需要传参

1. 渲染页面

// index.wxml

  <view class="movie-item" wx:for="{{classHot}}" wx:key="index">
      <navigator url="/pages/movie/movie?id={{item.id}}" hover-class="none">
  view>    

onLoad(options) {
    console.log(typeof options.id)
    console.log(options.id);
    let id = parseInt(options.id);
    let db = wx.cloud.database();
    db.collection('movies_details').where({
      id:id
    }).get().then(res=>{
      console.log("查询电影详情数据:",res)
      this.setData({moviesDetails:res.data[0]})
    }).catch(err=>{
      console.warn(err);
    })
  },

  <view class="poster-background"  style="background-image:url({{moviesDetails.img}})">
  view>
  
  <view class="detail">
      
      <view class="poster">
        <image src="{{moviesDetails.img}}">image>
      view>
      
      
      <view class="content">
          <view class="title line-ellipsis">{{moviesDetails.nm}}view>
          <view class="score line-ellipsis">{{moviesDetails.sc}}view>
          <view class="type line-ellipsis">主演: {{moviesDetails.star}}view>
          <view class="type line-ellipsis">{{moviesDetails.cat}}view>
          <view class="type line-ellipsis">{{moviesDetails.rt}} 上映view>
      view>
      
  view>
view>


<view class="introduction" bindtap="handleTapIntro">
  <view class="{{isOpen?'':'line-clamp'}}">
    {{moviesDetails.dra}} 
  view>
  <view class="more">
    <image src="/images/{{isOpen ? 'arrow_up.png' : 'arrow_down.png'}}">image>
  view>
view>


<view class="actors">
  <view class="title">演职人员view>
  <scroll-view scroll-x="true" class="actors-list">
    <view class="actors-item" wx:for="{{moviesDetails.avatorImg}}" wx:key="index">
      <image src="{{item}}">image>
    view>   
  scroll-view>
view>


<view class="photos">
  <view class="title">视频和剧照view>
  <scroll-view scroll-x="true" class="photos-list">
     <view class="photos-item" wx:for="{{moviesDetails.photos}}">
        <image src="{{item}}" mode="widthFix">image>
     view>
  scroll-view>
view>

2.渲染简介

//movie.js
data: {
    isOpen:false,
    moviesDetails:[]
  },
  handleTapIntro(){
    this.setData({isOpen:!this.data.isOpen})
  },

//movie.wxml

<view class="introduction" bindtap="handleTapIntro">
  <view class="{{isOpen?'':'line-clamp'}}">
    {{moviesDetails.dra}} 
  view>
  <view class="more">
    <image src="/images/{{isOpen ? 'arrow_up.png' : 'arrow_down.png'}}">image>
  view>
view>

3. 全屏预览图片

如果将事件绑定到image上，事件绑定数量太多，影响性能。可以将事件绑定到父元素上，这样只需要绑定一次，由于事件冒泡现象，点击image时也会触发scroll-view的tap事件，捕获该事件之后依然可以实现相应业务。

view循环遍历,图片有多少张,遍历多少次,事件绑定多次,不好 — 使用事件委托解决

//movie.js
// 全屏预览图片
  handlePreviewImage(e){
    let avatorImg = this.data.moviesDetails.avatorImg
    wx.previewImage({
      urls: avatorImg,
    })
  },

//movie.wxml
 <view class="title">演职人员view>
  <scroll-view scroll-x="true" class="actors-list">
   
    <view class="actors-item" wx:for="{{moviesDetails.avatorImg}}" wx:key="index" bindtap="handlePreviewImage">
      <image src="{{item}}">image>
    view>   
  scroll-view>

<scroll-view scroll-x="true" class="photos-list" bindtap="handlePreviewImage">
  
     <view class="photos-item" wx:for="{{movieInfo.thumb}}" wx:key="index">
        
        <image lazy-load mode="aspectFill" src="{{item}}" data-i="{{index}}">image>
     view>
  scroll-view>

通过事件源对象获取data-i属性值时，若点击的是image，则事件源对象就是这个image组件。所以获取的是image组件上绑定的data-i属性值。

点击图片之间的缝隙,点出来的一直都是第一张图片, 默认值
特殊情况，如果没有点到image组件，则e.target描述的就不是image组件，而是scroll-view。而scroll-view身上并没有data-i属性，所以拿到的参数i为undefined。

handlePreviewImage(e){
        let i = e.target.dataset.i;  //获取 data-i 参数值
        if(i==undefined){
            return;  //如果没点击到图片,方法直接返回
        }

图片预览完整代码

handlePreviewImage(e){
    let i = e.target.dataset.i;
    console.log("预览图片:",i);
    if(i==undefined){
      return;
    }
    let avatorImg = this.data.moviesDetails.avatorImg
    wx.previewImage({
      urls: avatorImg,
      current:avatorImg[i]
    })
  },

4.加载评论

data: {
    isOpen:false,
    moviesDetails:[],
    comments:[]
  },
onLoad(options) {
// 加载评论
    this.loadComments(options.id)
},
loadComments(id){
    console.log("当前电影的id:",id);
    console.log(typeof id);
    let db = wx.cloud.database();
    db.collection('comments').where({
        movieid:id
    }).get().then(res=>{
        console.log("查询到评论数据数据:",res);
        this.setData({comments:res.data})
        //未查询出结果,权限问题,评论不是我们发表的,是别人发表的
        //修改权限,所有用户可读; 
        // 索引建议,不用管
    })
},