一.音樂播放完以後圖標沒有跳回未播放狀態
用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["",""]}