【练习】电影详情页面 (finished)，版本更新后的一些变化，表单组件

一.音乐播放完以后图标没有跳回未播放状态

用wx.onBackgroundAudioStop(CALLBACK)监听

wx.onBackgroundAudioStop(CALLBACK)  停止

wx.onBackgroundAudioPlay(CALLBACK)  播放

二.电影详情页面

1.在movie项目创建movie-detail项目

在app.json中直接配置"pages/movie/movie-detail/movie-detail"

2.在movie-picture-template.wxml中绑定事件，传输数据（点的是哪个电影）（要找点击的这个元素在哪里，所以找到movie-picture-template）

 

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

找谁使用了movie-picture-template，就在这个使用了模版的js中定义事件函数

3.在movie.js中编写onMovieTap

 

onMovieTap: function (event) {

var movieId = event.currentTarget.dataset.movieid;

wx.navigateTo({

url: 'movie-detail/movie-detail?movieId=' + movieId movie.js和 movie-detail目录是在同一级的

})

}

传输数据，跳转页面

4.在movie-detail.js页面获取数据，因为电影详情的api需要id,生成新的url，发送请求

 

Resources URI

/v2/movie/subject/:id

Example:

GET /v2/movie/subject/1764796

 

onLoad: function (options) {

var movieId = options.movieId;

var url = app.globalData.doubanBase+"/v2/movie/subject/"+movieId;

console.log(url);

util.http(url,this.processDoubanData);

}

5.处理processDoubanData，要判断是否为空，可以先输出data,一般直接能取到的都不用判空，如data.title,像directors这种中间有一级的判断一下

 

processDoubanData:function(data){

console.log(data);

var director={avatar:"",name:"",id:""};

if (data.directors[0]!=null){

if (data.directors[0].avatar!= null){

director.avatar = data.directors[0].avatars.large;

}

director.name = data.directors[0].name;

director.id = data.directors[0].id;

}

var movies={

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,

genres:data.genres.join(","), 把数组转为字符串，用逗号隔开

stars: util.convertToStarsArray(data.rating.stars),

score:data.rating.average,

director: director,

casts:util.convertToCastString(data.casts),

castInfo: util.convertToCastInfos(data.casts),

summary:data.summary

}

this.setData({

movies:movies

})

}

其中两个方法：convertToCastString和convertToCastInfos在util中定义

 

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={

  convertToCastString: convertToCastString,

convertToCastInfos: convertToCastInfos

}

6.写页面

 

1）image中mode性质：图片处理：4种缩放模式和9种裁剪模式（只能选择缩放或裁剪中的一种）（只有给了高宽缩放和裁剪才有意义）

缩放：scaleToFill:不保持纵横比完全拉伸填满（默认）

aspectFit:保持纵横比缩放，完整显示图片（不填满）

aspectFill:保持纵横比缩放，不完整显示图片（填满）（居中的，上下裁剪掉）

widthFix:保持纵横比缩放,宽度不变，高度随纵横比变化（会比规定的样式要大）

裁剪：不缩放图片，只显示图片的top,bottom,left,right,center，top left,top right,bottom left,bottom right部分

2)-webkit-filter: blur(20px); 模糊效果 css3

    white-space: nowrap; 不让换行

    display: inline-flex; 设置成行内元素

 

white-space: normal; 可以换行    

<import src="../stars-template/stars-template.wxml" />

<view class="container">

<image class="head-img" src="{{movies.movieImg}}" mode="aspectFill"></image>

<view class="head-img-hover" catchtap='viewMoviePostImg' data-src="{{movies.movieImg}}">

<text class="main-title">{{movies.title}}</text>

<text class="sub-title">{{movies.country}}·{{movies.year}}</text> 好像不用加{{movies.country}}+“·”+{{movies.year}}

<view class="like">

<text class="highlight-font">{{movies.wishCount}}</text>

<text class="plain-font">人喜欢</text>

<text class="highlight-font">{{movies.commentCount}}</text>

<text class="plain-font">条评论</text>

</view>

</view>

<image class="movie-img" src="{{movies.movieImg}}" catchtap='viewMoviePostImg' data-src="{{movies.movieImg}}"></image>

<view class="summary">

<view class="original-title">

<text>{{movies.originalTitle}}</text>

</view>

<view class="flex-row">

<text class="mark">评分</text>

<!-- <template is="stars-template" data="{{stars:movies.stars,score:movies.score}}"/> -->

<text>{{movies.score}}</text>

</view>

<view class="flex-row">

<text class="mark">导演</text>

<text>{{movies.director.name}}</text>

</view>

<view class="flex-row">

<text class="mark">影人</text>

<text>{{movies.casts}}</text>

</view>

<view class="flex-row">

<text class="mark">类型</text>

<text>{{movies.genres}}</text>

</view>

</view>

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

<view class="synopsis">

<text class="synopsis-font">剧情简介</text>

<text class="summary-content">{{movies.summary}}</text>

</view>

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

<view class="cast">

<text class="cast-font">影人</text>

<scroll-view class="cast-imgs" scroll-x="true">

<block wx:for="{{movies.castInfo}}" data-item="item">

<view class="cast-container">

<image src="{{item.img}}" class="cast-img"></image>

<text class="cast-name">{{item.name}}</text>

</view>

</block>

</scroll-view>

</view>

</view>

样式：

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

.container{

width: 100%;

display: flex;

flex-direction: column;

}

.head-img{

width: 100%;

height: 320rpx;

-webkit-filter: blur(20px); 模糊效果 css3

}

.head-img-hover{

position: absolute; 用定位把文字定位到图片上

top: 0;

left: 0;

width: 100%;

height: 320rpx;

display: flex;

flex-direction: column;

}

.main-title{

font-size: 19px;

color: #fff;

font-weight: 700;

margin: 50rpx 0 0 40rpx;

letter-spacing: 2px;

}

.sub-title{

font-size: 28rpx;

color: white;

margin: 30rpx 0 0 40rpx;

}

.like{

display: flex;

flex-direction: row;

margin: 30rpx 0 0 40rpx;

}

.highlight-font{

font-size: 22rpx;

color: #f21146;

margin-right: 10rpx;

}

.plain-font{

font-size: 22rpx;

color: #666;

margin-right: 30rpx;

}

.movie-img{

height: 238rpx;

width: 175rpx;

position: absolute;

top: 160rpx;

right: 30rpx;

}

.summary{

margin: 40rpx 0 0 40rpx;

color: #777;

}

.original-title{

color: #1f3463;

font-size: 24rpx;

font-weight: 700;

margin-bottom: 40rpx;

}

.flex-row{

display: flex;

flex-direction: row;

margin-bottom: 10rpx;

}

.mark{

color: #999;

margin-right: 30rpx;

white-space: nowrap; 不让换行

}

.hr{

width: 100%;

height: 1px;

background: #d9d9d9;

margin-top: 45rpx;

}

.synopsis{

margin: 50rpx 0 0 40rpx;

display: flex;

flex-direction: column;

}

.synopsis-font{

color: #999;

}

.summary-content{

margin: 20rpx 4 0 0rpx;

line-height: 40rpx;

letter-spacing: 1px;

}

.cast{

margin-left: 40rpx;

display: flex;

flex-direction: column;

}

.cast-font{

color: #999;

margin-bottom: 40rpx;

}

.cast-imgs{

white-space: nowrap; 不让换行

}

.cast-container{

display: inline-flex; 设置成行内元素

flex-direction: column;

width: 170rpx;

margin: 0 40rpx 50rpx 0;

white-space: normal; 可以换行

text-align: center;

}

.cast-img{

height: 210rpx;

width: 170rpx;

}

.cast-name{

margin: 10rpx auto 0;

}

7.在movie-more.js中也加上onMovieTap，因为 movie-more中也用了模板

点击<view class="head-img-hover" catchtap='viewMoviePostImg' data-src="{{movies.movieImg}}">

<image class="movie-img" src="{{movies.movieImg}}" catchtap='viewMoviePostImg' data-src="{{movies.movieImg}}"></image>

跳出大图，所以要把大图的地址传出去

在movie-detail.js中

 

viewMoviePostImg:function(event){

var src=event.currentTarget.dataset.src;

wx.previewImage({

urls: [src]

})

}

wx.previewImage({

urls: [src]

})这个方法展示图片

三、版本更新后的一些变化：

1.navigateTo和redirectTo不能跳转到带tab的页面，必须用wx.swichTab

2.onload中不能用this.data来进行数据绑定

3.wx.request中的“content-Type”参数不能为“”空，也不可以为“application/json”，其它什么都可以

4.input中的bindblur事件可以用“回车”触发，但是多了一个事件bindconfirm，输入完成后触发，以后用这个事件

5.下拉刷新和scroll-view不能同时使用（我现在使用下拉刷新时必须把鼠标放在最上面）

    解决方法：把scroll-view换成view, 下拉到最底部的事件onScrollLower换成onReachBottom

四、表单组件

1.开关组件<swich>

属性：checked="true"  默认是"{{false}}"

          type="swich/checkbox(复选框)"

           color="red"

自带方法：bindchange="onBindChange"

onBindChange:function(event){

console.log(event.detail.value)

2.滑动组件<slide>

属性：color    selected-color 被选中的颜色    show-value显示值     value当前值   max最大值  min最小值   step步长（最好能被整除，否则拉不到最后）  bindchange

3.单选组件(至少两个)

<radio-group bindchange="onBindChange">

    <label> <radio value="radio1"/>radio1</label>

    <label> <radio value="radio2"/>radio2</label>

</radio-group>

checked="true"默认选中

<label>把radio上每个选项的内容与选择框进行绑定

4.多选组件<checkbox-group>

和单选组件基本上一模一样

只有console.log(event.detail.value)  输出值是一个数组["value1","value2"]

5.表单提交：获取所有表单组件的值并提交给服务器

form表单

用<form>把所有子元素包裹起来

两个事件：catchsubmit="formSubmit"(提交)   catchreset="formReset"(重置)

加两个button触发这两个事件：button就是用来做这个的

<button formType="submit">submit</button>

<button formType="reset">reset</button>

formSubmit:function(event){

console.log(event.detail.value)     组件中name属性必须写，否则输出为空

输出：object{switch:true,slide:450,input:"",radio-group:"radio1",check-box:Array["",""]}