微信小程式--搜尋電影app（續）

阿新 • • 發佈：2019-02-11

熱門推薦頁面各個檔案程式碼如下：

recommendMovies.wxml：

<view class="wrapper">
  <view wx:for="{{topMovies}}" wx:for-item="item">
    <view class="content">
      <view class="picView">
        <image class="pic" src="{{item.images.medium}}" id="{{item.id}}" bindtap="toDetail" />
      </view>
      <view class="info">
        <view class="name">
          名稱：{{item.title}}
        </view>
        <view class="score">{{item.rating.average}}分</view>
        <view class="type">
          型別：
          <block wx:for="{{item.genres}}" wx:for-item="type">
            {{type}},
            <!--注意不要使用<view>，不然調不出效果。。-->
          </block>
        </view>
        <view class="director">
          導演：
          <block wx:for="{{item.directors}}" wx:for-item="director">
            {{director.name}},
          </block>
        </view>
        <view class="actor">
          演員：
          <block wx:for="{{item.casts}}" wx:for-item="actor">
            {{actor.name}},
          </block>
        </view>
        <view class="time">年份： {{item.year}}</view>
      </view>
    </view>
  </view>
</view>

recommendMovies.wxss：

.wrapper{
  padding:0;
  margin:0;
  width:100%;
  height:100%;
}
.slide-image{
  width:750rpx;
  height:100%;
}

.content{
  width:100%;
  height:300rpx;
  padding:10rx;
  display: flex;
  flex-direction: row;
  border-bottom: 2rpx solid #CCCCCC;
}
.picView{
  float:left;
  padding:20rpx 15rpx;
}
.pic{
  width:210rpx;
  height:260rpx;
}
.info{
  float:left;
  display: flex;
  flex-direction: column;
  color:#888888;
  padding-top:20rpx;
  font-size: 30rpx;
}
.name{
  color:#000;
  width:100%;
  font-size: 32rpx;
  margin-bottom: -19rpx;
}
.score{
  position: relative;
  width:80rpx;
  float:right;
  top:-18rpx;
  color:#8C5A0D;
  right:-433rpx;
}
.type{
  display: flex;
  flex-direction: row;
  margin-bottom: 10rpx;
}
.director{
  display: flex;
  flex-direction: row;
  margin-bottom: 10rpx;  
}
.actor{
  margin-bottom: 10rpx;
}

recommendMovies.js：

//recommendMovies.js
var util = require('../../utils/util.js')
Page({
  data: { 
  },
  onLoad: function () {
    /*
    var city = wx.getStorageSync('city');
    console.log('只在初次進入此頁面時執行一次');
    var topMovies = wx.getStorageSync('topMovies'+city);
    if (!topMovies){
      console.log('request');
      this.requestTopMovies();
    }else{
      console.log('storage');
      this.setData({
         topMovies:topMovies
      });
    }
     */
  },
  onShow: function () {
    /* var city = wx.getStorageSync('city'); */
    console.log('每次進入此頁面都會執行此函式，適合放需要實時呼叫頁面邏輯的程式碼');
    /*經測試，此處不需要加city特判，因為請求排行榜靠前的電影時不需要加city引數.
    var topMovies = wx.getStorageSync('topMovies' + city);*/
    var topMovies = wx.getStorageSync('topMovies');
    if (!topMovies) {
      console.log('request');
      this.requestTopMovies();
    } else {
      console.log('storage');
      this.setData({
        topMovies: topMovies
      });
    }
  },
  requestTopMovies:function(){
    /* console.log('city:' + wx.getStorageSync('city'));
    var city = wx.getStorageSync('city');*/
    var url = "https://api.douban.com/v2/movie/top250";
    /**
     * var data = {
       city : city //貌似沒有這個引數需要傳遞，結果都一樣。
    };*/
    var that = this;
    wx.request({
       url:url,
       data:'',//data,
       header:{
         'content-type':'json'//不要寫'aplication/json'，會報400錯誤。
       },
       success:function(res){
         console.log(res);
         that.setData({
           topMovies:res.data.subjects
         });
         that.saveData(res.data.subjects/*,city*/);
       }
    });
  },
  toDetail:function(event){
    wx.navigateTo({//通過 id 請求詳情頁面
      url: '/pages/detail/detail?id='+event.currentTarget.id,
    })
  },
  saveData:function(res/*,city*/){
    wx.setStorage({
       key:'topMovies'/*+city*/,
       data:res
    });
  }
})

recommendMovies.json:

{
    "navigationBarTitleText": "熱門電影推薦"
}

這裡的頁面佈局基本同第一個頁面一致，熱門推薦的電影 api 介面地址為：https://api.douban.com/v2/movie/top250。

沒有city的引數，加上沒效果，已試過！可以檢視上面的截圖框。

要注意的一點時，請求 wx.request 時，header:{ 'conten-type':'json' }不能寫成 'application/json' 不然會一直報400錯誤，應該是版本問題。

詳情頁面各個檔案程式碼如下：

detail.wxml：

<!--detail.wxml-->
<image src="../../assets/imgs/bg.jpg" mode="scaleToFill" />
<view class="wrapper">
  <view class="filmIntro">
    <view class="filmPic">
      <image src="{{filmDetail.images.medium}}" />
    </view>
    <view class="filmInfo">
      <view class="name">名稱：{{filmDetail.title}}</view>
      <view class="score">{{filmDetail.rating.average}}分</view>
      <view class="type">
      型別：<block wx:for="{{filmDetail.genres}}" wx:for-item="type">
             {{type}},
           </block>
      </view>
      <view class="director">
      導演：<block wx:for="{{filmDetail.directors}}" wx:for-item="director">
             {{director.name}},
           </block>
      </view>
      <view class="actor">
      演員：<block wx:for="{{filmDetail.casts}}" wx:for-item="cast">
             {{cast.name}},
           </block>
      </view>
      <view class="time">年份： {{filmDetail.year}}</view>
    </view>
  </view>
  <view class="descrision">
      {{filmDetail.summary}}
    <!--<textarea value="{{filmDetail.summary}}" auto-height focus="true" />有一些文字出不來不知為啥所以沒用textarea-->
  </view>
  <view class="bottom">
    <view class="title">主要參演人員</view>
    <scroll-view scroll-x bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" class="casts">
      <view wx:for="{{filmDetail.casts}}" wx:for-item="cast" class="castsItem">
        <view class="castImg"><image src="{{cast.avatars.medium}}" /></view>
        <view class="castName">{{cast.name}}</view>
      </view>
      <view wx:for="{{filmDetail.directors}}" wx:for-item="director" class="castsItem">
        <view class="castImg"><image src="{{director.avatars.medium}}" /></view>
        <view class="castName">{{director.name}}</view>
      </view>
    </scroll-view>
  </view>
</view>

detail.wxss程式碼如下：

/* detail.wxss */
image{
  width:750rpx;
  height:350rpx;
}
.wrapper{
  padding:0;
  margin:0;
  width:750rpx;
  height:100%;
  position: absolute;
  left:0;
  top:0;
}
.filmIntro{
  width:100%;
  height:350rpx;
}
.filmPic{
  float:left;
  width:175rpx;
  height:300rpx;
  padding:40rpx 15rpx 10rpx 40rpx;
}
.filmPic image{
  width:175rpx;
  height:240rpx;
  border:2rpx solid #fff;
}
.filmInfo{
  float:right;
  position: relative;
  width:507rpx;
  left:-11rpx;
  top:38rpx;
  font-size: 0.8rem;
  color:#fff;
}
.name{
  float:left;
  margin-bottom:10rpx;
  font-size: 0.9rem;
}
.score{
  position: absolute;
  right: -10rpx;
  color:aqua;
}
.type{
  clear:both;
  display: flex;
  flex-direction: row;
  margin-bottom:6rpx;
}
.director{
  display: flex;
  flex-direction: row;
  margin-bottom:6rpx;
}
.actor{
  display: flex;
  flex-direction: row;
  margin-bottom:6rpx;
}
.descrision{
  clear:both;
  width:700rpx;
  height:346rpx;
    overflow: hidden;  
    text-overflow: ellipsis;  
    display: -webkit-box;  
    -webkit-line-clamp: 11;  
    -webkit-box-orient: vertical; 
  padding:30rpx 30rpx;
  font-size: 0.8rem;
  color:#aaa;
  border-bottom:18rpx solid #ccc;
}
.title{
  width:100%;
  font-size: 1rem;
  padding:10rpx;
  border-bottom: 2rpx solid #ccc;
}
.casts{
  /*display: flex;
  flex-direction: row;*/
  width:750rpx;
  white-space: nowrap;/*不換行（放在父元素）*/
  border-bottom:22rpx solid #ccc;
}

.castsItem{
  display: inline-block;/*內聯塊（放在子元素）*/
  padding:26rpx;
  text-align: center;/*文字居中*/
}
.castImg>image{
  width:180rpx;
  height:254rpx;
}

.castName{
  font-size: 0.7rem;
  color:#0ff;
}
textarea{
  width:700rpx;
  height:350rpx;
}

detail.js程式碼如下：

// detail.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {

  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    var that = this, data = null;
    var filmId = options.id;
    console.log('detail\'s id:' + filmId);//獲取在首頁點選的電影圖片的id
    /*
    一開始在首頁電影資料中獲取詳情頁資料，後來發現並沒有簡介的文字部分，所以上官網找到了相應的api來獲取詳情頁資料，通過id獲取的，方便許多！不需遍歷陣列了。
    var hotMovies = wx.getStorageSync('hotMovies');
    console.log(hotMovies.length);
    if(hotMovies){
       for(var i=0;i<hotMovies.length;i++){
         if (hotMovies[i].id == filmId){//遍歷電影資料找到符合的就退出。
            data = hotMovies[i];
            break;
         }
       }
       that.setData({
         filmDetail: data
       });
    }
    */
    var name = 'detailInfo' + filmId;
    var detailInfo = wx.getStorageSync(name);/**獲取本地同步資料 */
    console.log(detailInfo);
    if (!detailInfo) {
      console.log('request');
      this.requestDetailInfo(filmId);
    }else{
      console.log('storage');
      this.setData({
        filmDetail: detailInfo
      });
    }
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {

  },

  requestDetailInfo: function (filmId) {
    var that = this;
    var url = 'https://api.douban.com/v2/movie/subject/'+filmId;
    wx.request({
      url: url,
      data: '',
      header: {
        'content-type': 'json',
      },
      success: function (res) {
        console.log('detailInfo\'s summary is:' + res.data.summary);
        console.log(res.data);
        //return res.data;不起作用，因為是回撥函式，非同步性。
        that.setData({
          filmDetail: res.data
        });
        that.saveData(res.data,filmId);
      }
    });
  },
  saveData: function (data,id) {
    wx.setStorage({
      key: 'detailInfo'+id,
      data: data,
    })
  }
})

佈局就基本同上，主要是底部滑鼠控制滑動圖片使用了元件 scroll-view 元件，這裡是橫向滑動，所以必須設定固定高度，還有就是要使得多個元素橫向排列不換行，使用之前flex佈局不起作用，得在 scroll-view 元件上加屬性： white-space: nowrap;/*不換行（放在父元素）*/，在其子元素（橫向排布的元素）加屬性：display: inline-block;/*內聯塊（放在子元素）*/。具體見程式碼。

搜尋頁面各個檔案程式碼如下：

searchMovies.wxml程式碼如下：

<view class="wrapper">
  <view class="search">
    <input bindinput="keyword" placeholder="請輸入主演名字" />
    <button type="default" bindtap="searchMovies" data-keyword="{{keyword}}">搜尋</button><!--data-keyword向函式傳參keyword-->
  </view>
  <view class="searchText">您要搜尋：{{keyword}}</view>
  <view class="horLine"></view>
  <view wx:for="{{searchMovies}}" wx:for-item="item">
    <view class="content">
      <view class="picView">
        <image class="pic" src="{{item.images.medium}}" id="{{item.id}}" bindtap="toDetail" />
      </view>
      <view class="info">
        <view class="name">
          名稱：{{item.title}}
        </view>
        <view class="score">{{item.rating.average}}分</view>
        <view class="type">
          型別：
          <block wx:for="{{item.genres}}" wx:for-item="type">
            {{type}},
            <!--注意不要使用<view>，不然調不出效果。。-->
          </block>
        </view>
        <view class="director">
          導演：
          <block wx:for="{{item.directors}}" wx:for-item="director">
            {{director.name}},
          </block>
        </view>
        <view class="actor">
          演員：
          <block wx:for="{{item.casts}}" wx:for-item="actor">
            {{actor.name}},
          </block>
        </view>
        <view class="time">年份： {{item.year}}</view>
      </view>
    </view>
  </view>
</view>

searchMovies.wxss 程式碼如下：

.wrapper{
  padding:0;
  margin:0;
  width:750rpx;
  height:100%;
}
.search{
  width:100%;
  height:92rpx;
  display: flex;
  flex-direction: row;
}
input{
  height:1rem;
  flex-grow: 1; /**剩餘空間都給我*/
  line-height: 70rpx;
  border:2rpx solid #ccc;
  margin:20rpx;
  border-radius: 10rpx;
  font-size: 0.8rem;
}
button{
  width:130rpx;
  height:50rpx;
  line-height: 50rpx;
  margin:24rpx 30rpx 0rpx 0rpx;
  font-size: 0.8rem;
}
.searchText{
  margin-left:20rpx;
  font-size: 0.8rem;
  padding-bottom:20rpx;
}
.horLine{
  width:100%;
  border:10rpx solid #ccc;
}

.content{
  width:100%;
  height:300rpx;
  padding:10rx;
  display: flex;
  flex-direction: row;
  border-bottom: 2rpx solid #CCCCCC;
}
.picView{
  float:left;
  padding:20rpx 15rpx;
}
.pic{
  width:210rpx;
  height:260rpx;
}
.info{
  float:left;
  display: flex;
  flex-direction: column;
  color:#888888;
  padding-top:20rpx;
  font-size: 30rpx;
}
.name{
  color:#000;
  width:100%;
  font-size: 32rpx;
  margin-bottom: -19rpx;
}
.score{
  position: relative;
  width:80rpx;
  float:right;
  top:-18rpx;
  color:#8C5A0D;
  right:-433rpx;
}
.type{
  display: flex;
  flex-direction: row;
  margin-bottom: 10rpx;
}
.director{
  display: flex;
  flex-direction: row;
  margin-bottom: 10rpx;  
}
.actor{
  margin-bottom: 10rpx;
}

searchMovies.js程式碼如下：

//searchMovies.js
var util = require('../../utils/util.js')
Page({
  data: {
    
  },
  onLoad: function () {
    
  },
  searchMovies:function(event){
    var that = this;
    var keyword = event.currentTarget.dataset.keyword;
    console.log(keyword);
    var url = 'https://api.douban.com/v2/movie/search?q='+keyword;
    wx.request({
         url:url,
         data:'',
         header:{
           'content-type':'json',
         },
         success:function(res){
            console.log(res);
            that.setData({
              searchMovies:res.data.subjects
            });
         }
    });
  },
  keyword:function(event){
     var keyword = event.detail.value;/**獲取input輸入的值並設定到搜尋值 */
     this.setData({
        keyword:keyword
     });
  },
  toDetail:function(event){
    console.log(event.currentTarget.id);
    wx.navigateTo({
      url: '/pages/detail/detail?id='+event.currentTarget.id,
    });
  }
})

searchMovies.json程式碼如下：

{
  "navigationBarTitleText": "電影搜尋"
}

佈局基本都跟第一個頁面一樣，api 介面地址：https://api.douban.com/v2/movie/search?q=人名。

這裡只選了一個引數即人物名字來搜尋，你可以自己擴充套件。

好了，詳情請自己參閱程式碼吧。這篇博文寫了好久啊啊。。

尷尬死了，中午寫到兩點多要釋出博文時居然把我部落格關閉了，後來聯絡之後解決之後又被鎖了，最後csdn負責人叫我改標題，果然解決！！！感謝！終於解決了，可以釋出了！

微信小程式--搜尋電影app（續）

熱門推薦頁面各個檔案程式碼如下： recommendMovies.wxml： <view class="wrapper"> <view wx:for="{{topMovies}}" wx:for-item="item"> <vi

微信小程式開發詳解（七）---微信小程式APP生命週期

1：微信小程式APP的生命週期方法：在微信小程式工程中的app.js中增加如圖1所示方法圖1 編譯執行，檢視日誌如圖2，圖3所示：微信小程式啟動時，呼叫生命週期方法為：onLaunch方法（app.js）---onShow方法（app.js）---onLoad方法（首

微信小程式開發框架——WXSS（一）

WXSS語言決定了小程式頁面的各個元素在視覺上的展示，WXSS與CSS即為相試的、為了適合微信小程式開發WXSS對CSS進行相應的修改。 width:用來設定元素'寬度' / height:用來設定元素'高度 '/

微信小程式入門學習筆記（二）——阿里雲伺服器PHP MYSQL Apache配置

持續更新持續學習感謝原文大佬連結 https://www.linuxidc.com/Linux/2017-08/146220.htm 筆者在阿里雲上買了輕量應用伺服器學生認證通過以下便宜的選擇的CentOS 7.3 64位 https://promot

微信小程式入門學習筆記（一）

入門級的跳轉格式： wx.redirectTo（）：不能返回上一層頁面 wx.navigateTo（）:用於頁面的跳轉以上兩個不能跳轉於"tabBar" 因此跳轉"tabBar": wx.switchTab 感謝大佬的教程解答了我的問題以下附上原文連結作者

微信小程式開發文件（4）

微信小程式網路API 發起請求上傳、下載 Websocket 檔案資料快取微信小程式媒體API 圖片錄音音訊播放控制音樂播放控制背景音訊播放管理 wx.createAudioContext(audioId) 視訊 wx.createVideoContext(videoId)

微信小程式二維碼（JAVA）

前言最近在做小程式相關的專案，之前也在網上找過很多資料，遇到不少坑，和大家分享一下成果。簡介小程式獲取二維碼有官網三種介面： POST https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access

微信小程式開發文件（5）

微信小程式開放介面：生物認證 getUpdateManager 拓展介面 createWorker 開啟/關閉除錯微信小遊戲工具：設定頁介面專案頁卡介面開發快捷鍵開發工具除錯命令列呼叫 HTTP 呼叫微信小遊戲渲染API：畫布物件Canvas Canvas（畫布物件

微信小程式學習之路（一）

1、前言微信小程式所使用的是騰訊自己開發的MINA框架，MINA框架跟主流框架有很大的相似之處，是一個MVVM框架，很慶幸本人先前有學過一點點VUE所以入門MINA框架還算比較順利，由於需要完全熟悉MINA框架我還需要學習很多，所以微信小程式學習之路篇打算一

微信小程式踩坑日誌（二）

indexOf 在wxml檔案中不能使用 Object.keys() toString() indexOf() ；其中indexOf()方法在wxml中怎麼樣都返回undefined； textarea textarea在小程式中算是一個比較大的坑了；

基於區塊鏈的微信小程式雲筆記實戰（DApp）

主要實現一個小程式版本的雲筆記專案，不過這個專案支援區塊鏈（這裡使用以太坊網路），可以將雲筆記的內容儲存到真正的以太坊網路中，永久儲存，永不丟失。而且會和傳統的資料庫相結合。本場 Chat 會基於傳統的資料庫技術和區塊鏈技術實現一款真正的去中心化應用（DApp）。本Chat的

微信小程式入門到實戰（一）

瞭解小程式什麼是小程式？小程式其實就是一個工具，為人提供便捷服務的；隨時可用，用完即走，減少桌面上面的app數量； B2C（人與商品）淘寶 JD P2P（人與人）微信 QQ C2P（人與服務）微信小程式支付寶小程式什

微信小程式“反編譯”實戰（二）：原始碼還原

小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java線上bug實時監控。真的是一個很好用的bug監控服務，眾多大佬公司都在使用。在上一篇文章《微信小程式“反編譯”實戰（一）：解包》中，我們詳細介紹瞭如何獲取某一個小程式

微信小程式 —— 快遞查詢Demo（入門）

原始碼地址及提醒： 2、由於使用的是外部api，故選擇無appid登入小程式開發工具，無需更改後臺伺服器域名簡要介紹這是一個微信小程式的快遞查詢Demo，僅供初學者學習使用。主要展示了一些常用的一些微信API和元件，如有錯誤或建議，歡迎指出

微信小程式開發常用技巧（6）——列表上拉載入更多

微信小程式API提供了監聽頁面使用者下拉重新整理事件，但是沒有提供上拉監聽事件，實際開發過程中經常會用到上拉列表，載入更多的需求。那麼如何實現呢？實現原理：利用onReachBottom監聽頁面滑動到底部，然後執行具體的函式方法，例如請求資料，然後將列表資料

微信小程式頁面跳轉（五）

事件：微信小程式中任何一個事件，事件繫結時都要在前面加上bind或catch（bind用的較多）；頁面跳轉： wx.navigateTo({ url:"../posts/post", })；括號裡面是一個物件。這樣寫會有一個返回，把他當成啟動頁面

微信小程式之人臉識別（2）

上一篇部落格已經將人臉的照片上傳到了人臉庫，接下來需要做的就是登入時拍照儲存並與人臉庫的圖片進行對比，當score大於95即識別成功！下面是wxml程式碼，主要用的就是camera元件，點選按鈕拍照並儲存，利用開關來控制使用前置還是後置攝像頭。<!--pages/cam

微信小程式開發詳解（四）---微信小程式開發元件使用初步

1：建立一個微信小程式的工程 2：請參考如下連結裡面的內容，這是微信小程式的官方開發指南： https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html?t=20161222 3：可以拷貝部分例子程式到你

微信小程式之側欄分類 —— 微信小程式實戰商城系列（1）

在商場專案中，一般都會有分類頁面。分類頁面可以給使用者快速找到相關的商品，下面以側欄分類為例，如下圖佈局分析： <主盒子> <左盒子></左盒子> <

微信小程式之仿淘寶分類入口 —— 微信小程式實戰商城系列（2）

分類入口，已經成為了商城專案必須的佈局之一，這裡以仿照淘寶的分類入口來做案例下圖紅框部分，就是本文重點講解部分，另外本文並沒有寫點選某個入口跳轉頁面。如需學習頁面跳轉的同學，可以參考此文頁

微信小程式--搜尋電影app（續）

相關推薦