澳门至尊网站-首页

您的位置:澳门至尊网站 > 黑客安全 > 微信小程序,集阅读与电影于一体的小程序项目

微信小程序,集阅读与电影于一体的小程序项目

2019-11-21 23:31

31.影视详细情况页面

movie-template.wxml

<view class="movie-container" catchtap="onMovieTap" data-movieId="{{movieId}}">

movie.js

 onMovieTap:function(event) {
    var movieId = event.currentTarget.dataset.movieid;
    wx.navigateTo({
      url: "movie-detail/movie-detail?id=" + movieId
    })
  },

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;
}

module.exports = {
  convertToStarArray: convertToStarArray,
  http: http,
  convertToCastString: convertToCastString,
  convertToCastInfos: convertToCastInfos
};

movie-detail.js

var util = require('../../../utils/util.js');
var app=getApp()

Page({
  data:{
    movie:{}
  },
  onLoad:function(options){
    var movieId = options.id;
    var url = app.globalData.g_baseUrl +
      "/v2/movie/subject/" + movieId;
    util.http(url,this.processDoubanData);
  },
  processDoubanData:function(data){
    var director = {
      avatar: "",
      name: "",
      id: ""
    }
    if (data.directors[0] != null) {
      if (data.directors[0].avatars != null) {
        director.avatar = data.directors[0].avatars.large

      }
      director.name = data.directors[0].name;
      director.id = data.directors[0].id;
    }
    var movie = {
      movieImg: data.images ? data.images.large : "",
      country: data.countries[0],
      title: data.title,
      originalTitle: data.original_title,
      wishCount: data.wish_count,
      commentCount: data.comments_count,
      year: data.year,
      generes: data.genres.join("、"),
      stars: util.convertToStarArray(data.rating.stars),
      score: data.rating.average,
      director: director,
      casts: util.convertToCastString(data.casts),
      castsInfo: util.convertToCastInfos(data.casts),
      summary: data.summary
    }
    console.log(movie)
    this.setData({
      movie:movie
    })
  }
})

movie-detail.wxml

<import src="../stars/stars-template.wxml" />
<view class="container">
  <image class="head-img" src="{{movie.movieImg}}" mode="aspectFill" />
  <view class="head-img-hover" data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg">
    <text class="main-title">{{movie.title}}</text>
    <text class="sub-title">{{movie.country + " · "+movie.year}}</text>
    <view class="like">
      <text class="highlight-font">
        {{movie.wishCount}}
      </text>
      <text class="plain-font">
        人喜欢
      </text>
      <text class="highlight-font">
        {{movie.commentCount}}
      </text>
      <text class="plain-font">
        条评论
      </text>
    </view>
  </view>
  <image class="movie-img" src="{{movie.movieImg}}" data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg"/>
  <view class="summary">
    <view class="original-title">
      <text>{{movie.originalTitle}}</text>
    </view>
    <view class="flex-row">
      <text class="mark">评分</text>
      <template is="starsTemplate" data="{{stars:movie.stars, score:movie.score}}" />
    </view>
    <view class="flex-row">
      <text class="mark">导演</text>
      <text>{{movie.director.name}}</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.generes}}</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="cast">
    <text class="cast-font"> 影人</text>
    <scroll-view class="cast-imgs" scroll-x="true" style="width:100%">
      <block wx:for="{{movie.castsInfo}}" wx:for-item="item">
        <view class="cast-container">
          <image class="cast-img" src="{{item.img}}"></image>
          <text class="cast-name">{{item.name}}</text>
        </view>
      </block>
    </scroll-view>
  </view>
</view>

movie-detail.wxss

@import "../stars/stars-template.wxss";

.container{
    display:flex;
    flex-direction: column;
}

.head-img{
    width:100%;
    height: 320rpx;
}

.head-img-hover{
    width: 100%;
    height: 320rpx;
    position:absolute;
    top:0;
    left:0;
    display:flex;
    flex-direction: column;
}

.main-title{
    font-size: 19px;
    color:#fff;
    font-weight:bold;
    margin-top: 50rpx;
    margin-left: 40rpx;
    letter-spacing: 2px;
}

.sub-title{
    font-size: 28rpx;
    color:#fff;
    margin-left: 40rpx;
    margin-top: 30rpx;
}

.like{
    display:flex;
    flex-direction: row;
    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;
    color: #777777;
}

.original-title{
    color: #1f3463;
    font-size: 24rpx;
    font-weight: bold;
    margin-bottom: 40rpx;
}

.flex-row{
    display:flex;
    flex-direction: row;
    margin-bottom: 10rpx;
}

.mark{
    margin-right: 30rpx;
    white-space:nowrap;
    color: #999999;
}

.hr{
    margin-top:45rpx;
    height:1px;
    width: 100%;
    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;
}

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

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

.cast-container{
    display:inline-flex;
    flex-direction: column;
    margin-bottom: 50rpx;
    margin-right: 40rpx;
    width: 170rpx;
    text-align:center;
    white-space: normal;
}

.cast-imgs{
    white-space: nowrap;
}

.cast-img{
    width: 170rpx;
    height: 210rpx;
}
.cast-name{
    margin: 10rpx auto 0;
}

结果

图片 1

Wechat小程序 页面跳转 传递参数的那些知识点大家在支付进程里面会常常蒙受,记录一下,固然很简短,不过对于刚同志刚接触的人的话,看文书档案不比看demo来的快和方便。先看一下合法给出的文档:

)

index.wxml

 <view > <navigator url="../navigator/navigator?title=我来到了这个神奇的界面并且认识了一个萌妹子&&what=wangting" hover->跳转到新页面</navigator> </view>

index.js

Page({ data: { }, //事件处理函数 onLoad: function 

要把参数字传送递给navigator分界面

navigator.wxml

<view> {{title}} </view><view > {{what}} </view>

navigator.js

Page({ data: {}, onLoad: function { // 生命周期函数--监听页面加载 this.setData({ title: options.title, what: options.what }) }})

成效传递的五个参数到了这几个分界面了

图片 2

分割线:

通过js里面包车型客车绑定的函数事件来跳转index.wxml

<view bindtap="bindViewTap" > 我要绑定事件带着两个参数跳转界面</view>

index.js

Page({ data: { }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../navigator/navigator?title=我来到了这个神奇的界面并且认识了一个萌妹子&&what=wangting' // url: '../logs/logs' }) }, //事件处理函数 onLoad: function

navigator.wxml

<view> {{title}} </view><view > {{what}} </view>

navigator.js

Page({ data: {}, onLoad: function { // 生命周期函数--监听页面加载 this.setData({ title: options.title, what: options.what }) }})

效果:

图片 3

再来二个demo:便于通晓和实行index.wxml

<view> <text>姓名:{{name}}</text></view><view> <text>年龄:{{age}}</text></view><button bindtap='buttonListener'>携参数跳转界面</button>

index.js

Page({ /** * 页面的初始数据 */ data: { name: '王小婷', age: '22' }, buttonListener: function () { var that = this wx.navigateTo({ url: '/pages/navigator/navigator?nameData=' + that.data.name + '&ageData=' + that.data.age }) }})

navigator.wxml

<view><text>我的姓名是:{{name}}</text></view><view><text>我的年龄是:{{age}}</text></view>

navigator.js

Page({ /** * 页面的初始数据 */ data: { name: null, age: null }, /** * 生命周期函数--监听页面加载 */ onLoad: function  { var that = this that.setData({ name: options.nameData, age: options.ageData }) }})

图片 4

只带二个参数跳转:

index.wxml

<view> <text>姓名:{{name}}</text></view><button bindtap='buttonListener'>携参数跳转界面</button>

index.js

Page({ data: { name: '王小婷' }, buttonListener: function () { var that = this wx.navigateTo({ url: '/pages/navigator/navigator?nameData=' + that.data.name }) }})

navigator.wxml

<view><text>我的姓名是:{{name}}</text></view>

navigator.js

Page({ data: { name: null }, onLoad: function  { var that = this that.setData({ name: options.nameData, }) }})

原稿小编:祈澈姑娘。 手艺博客:

本文由澳门至尊网站发布于黑客安全,转载请注明出处:微信小程序,集阅读与电影于一体的小程序项目

关键词:

  • 上一篇:没有了
  • 下一篇:没有了