【練習】電影詳情頁面 (finished)，版本更新後的一些變化，表單元件

YIYIYI1205發表於2018-04-24
元件

一.音樂播放完以後圖示沒有跳回未播放狀態

用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["",""]}

相關文章