微信小程序開發(fā)小結(jié)

V2.0版本

2016-12-28 更新到v2.0

UI

更新日志

• 2016-11-20

  • 1.添加下拉刷新功能
  • 2.列表改為模板渲染
  • 3.封裝了api請求的代碼提高可復(fù)用性

• 2016-11-21

  • 1.添加人物的詳情頁
  • 2.將電影詳情和人物詳情的網(wǎng)絡(luò)請求進行了封裝

• 2016-11-22

  • 1.添加了消息通知組件
  • 2.搜索頁調(diào)整
  • 3.調(diào)整了目錄結(jié)構(gòu)榨崩，整合靜態(tài)資源(dist)和組件文件(component)

• 2016-11-25

  • 1.將網(wǎng)絡(luò)請求從wx.request改為fetch的方式
  • 2.完成搜索功能
  • 3.完成消息通知組件
  • 4.刪除了沒有用到的util文件夾

• 2016-12-03

  • 1.將電影列表的下拉刷新從scroll-view的bindscrolltolower改為Page的onReachBottom事件觸發(fā)
  • 2.將“我的”頁面的文件補全，功能列表改為數(shù)據(jù)渲染野揪，添加跳轉(zhuǎn)。新增換膚
  • 3.刪除了tabBar中的搜索選項，添加“我的”選項
  • 4.首頁搜索欄（點擊跳轉(zhuǎn)到搜索頁）添加輪播圖
  • 5.添加定位功能谤狡，在小程序載入時進行定位
  • 6.添加瀏覽記錄竟终、收藏、相冊、設(shè)置秸妥、搖一搖功能（都在開發(fā)中）

• 2016-12-04

  • 1.將api列表 banner列表滚停、搜索關(guān)鍵詞列表、皮膚列表整合配置文件(config.js)
  • 2.完成換膚粥惧、設(shè)置键畴、個人資料（還差修改）、搖一搖功能（再次進入不能搖的問題還需解決）
  • 3.添加util文件及文件夾突雪，用于封裝獲取并格式化時間等工具類方法
  • 4.消息組件修改起惕，刪除了成功、失敗等情況咏删，避免與wx.showToast重合惹想，添加了網(wǎng)絡(luò)不正常的提示
  • 5.電影詳情頁面添加存儲瀏覽歷史的功能

• 2016-12-06

  • 1.完成電影收藏和人物收藏功能
  • 2.搜索頁面添加為空時的提示頁面并封裝成組件

• 2016-12-14

  • 1.完成相冊功能和關(guān)于頁面
  • 2.添加定位功能（gps）

• 2016-12-24

  • 1.相冊的背景圖片方式改成image標簽的方式
  • 2.添加搖一搖debug測試開關(guān)變量

github地址：https://github.com/yesifeng/wechat-weapp-movie
提示：v2.0代碼會跟文檔有一些出入，但大部分都是相同的

第一步 項目配置

一饵婆、編寫app.json

對整個項目的公共配置

1勺馆、pages：配置頁面路徑（必須），列出所有的頁面的路徑侨核，所有存在的頁面都需要在此寫出草穆，否則在頁面跳轉(zhuǎn)的時候會報出找不到頁面的錯誤
2、window：窗口配置搓译，配置導(dǎo)航及窗口的背景色和文字顏色悲柱，還有導(dǎo)航文字和是否允許窗口進行下拉刷新
3、tabBar：tab欄配置些己，配置tab欄背景色及出現(xiàn)位置豌鸡，上邊框的顏色（目前只支持黑或白），文字顏色及文字選中顏色段标，最核心的配置是list即tab欄的列表涯冠，官方規(guī)定最少2個，最多5個逼庞，每個列表項目可配置頁面路徑蛇更、文字、圖標及選中時圖標的地址
4赛糟、network：網(wǎng)絡(luò)配置派任，配置網(wǎng)絡(luò)請求、上傳下載文件璧南、socket連接的超時時間
5掌逛、debug：調(diào)試模式，建議開發(fā)時開啟（true）司倚，可以看到頁面注冊豆混、頁面跳轉(zhuǎn)及數(shù)據(jù)初始化的信息篓像，另外報錯的錯誤信息也會比較詳細

{
  "pages": [
    "pages/popular/popular",
    "pages/coming/coming",
    "pages/top/top",
    "pages/search/search",
    "pages/filmDetail/filmDetail",
    "pages/personDetail/personDetail",
    "pages/searchResult/searchResult"
  ],
  "window": {
    "navigationBarBackgroundColor": "#47a86c",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText":  "電影推薦",
    "backgroundColor": "#fff",
    "backgroundTextStyle": "dark"
  },
  "tabBar": {
    "color": "#686868",
    "selectedColor": "#47a86c",
    "backgroundColor": "#ffffff",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/popular/popular",
      "iconPath": "dist/images/popular_icon.png",
      "selectedIconPath": "dist/images/popular_active_icon.png",
      "text": "熱映"
    }, {
      "pagePath": "pages/coming/coming",
      "iconPath": "dist/images/coming_icon.png",
      "selectedIconPath": "dist/images/coming_active_icon.png",
      "text": "待映"
    },{
      "pagePath": "pages/search/search",
      "iconPath": "dist/images/search_icon.png",
      "selectedIconPath": "dist/images/search_active_icon.png",
      "text": "搜索"
    },
    {
      "pagePath": "pages/top/top",
      "iconPath": "dist/images/top_icon.png",
      "selectedIconPath": "dist/images/top_active_icon.png",
      "text": "口碑"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

二、確定目錄結(jié)構(gòu)

根據(jù)UI圖崖叫，提取組件和公共樣式/腳本遗淳，以及page的目錄

• comm - 公用的腳本及樣式
  • script - 公共腳本
    • config.js 配置信息 （單頁數(shù)據(jù)量，城市等）
    • fetch.js 接口調(diào)用 （電影列表及詳情心傀，人物詳情屈暗、搜索）
  • style - 公共樣式
    • animation.wxss 動畫
• component - 公用的組件
  • filmList - 電影列表
    • filmList.wxml - 組件結(jié)構(gòu)
    • filmList.wxss - 組件樣式
• dist - 靜態(tài)資源
  • images 本地圖片，主要存導(dǎo)航的圖標 （樣式中不可引用本地圖像資源）
• pages - 頁面
  • popular - 頁面文件夾 （"popular"為自定義的頁面名稱脂男，頁面相關(guān)文件的文件名需與頁面名相同）
    • popular.js 頁面邏輯
    • popular.wxml 頁面結(jié)構(gòu)
    • popular.wxss 頁面樣式
    • popular.json 頁面窗口配置 （可參考app.json中的window配置）
• app.js - 小程序整體邏輯 （初始化养叛、顯示、隱藏的事件宰翅，以及存放全局數(shù)據(jù)）
• app.json - 小程序公共配置
• app.wxss - 小程序公共樣式

第二步 編寫組件

電影列表

結(jié)構(gòu)

<template name="filmList">
<block wx:if="{{showLoading}}">
    <view class="loading">玩命加載中…</view>
</block>
<block wx:else>
    <scroll-view scroll-y="true" style="height: {{windowHeight}}rpx" bindscroll="scroll" bindscrolltolower="scrolltolower">
        <view class="film">
            <block wx:for="{{films}}" wx:for-index="filmIndex" wx:for-item="filmItem" wx:key="film">
                <view data-id="{{filmItem.id}}" class="film-item" catchtap="viewFilmDetail">
                    <view class="film-cover">
                        <image src="{{filmItem.images.large}}" class="film-cover-img"></image>
                        <view class="film-rating">
                            <block wx:if="{{filmItem.rating.average == 0}}">
                                暫無評分
                            </block>
                            <block wx:else>
                                {{filmItem.rating.average}}分
                            </block>
                        </view>
                    </view>
                    <view class="file-intro">
                        <view class="film-title">{{filmItem.title}}</view>
                        <view class="film-tag">
                            <view class="film-tag-item" wx:for="{{filmItem.genres}}" wx:for-item="filmTagItem" wx:key="filmTag" data-tag="{{filmTagItem}}" catchtap="viewFilmByTag">
                                {{filmTagItem}}
                            </view>
                        </view>
                    </view>
                </view>
            </block>
            <block wx:if="{{hasMore}}">
                <view class="loading-tip">拼命加載中…</view>
            </block>
            <block wx:else>
                <view class="loading-tip">沒有更多內(nèi)容了</view>
            </block>
        </view>
    </scroll-view>
</block>
</template>

樣式

import "../../comm/style/animation.wxss";
.film {
    box-sizing: border-box;
    width: 750rpx;
    padding: 10rpx;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    box-shadow: 0 0 40rpx #f4f4f4 inset;
}
.film-item {
    width: 350rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    box-shadow: 0 20rpx 40rpx #eee;
    overflow: hidden;
    animation: fadeIn 1s;
}
.film-cover, .film-cover-img {
    width: 350rpx;
    height: 508rpx;
}
.film-cover {
    position: relative;
    border-radius: 10rpx;
    overflow: hidden;
}
.film-rating {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50rpx;
    padding-right: 20rpx;
    font-size: 12px;
    text-align: right;
    line-height: 50rpx;
    background-color: rgba(0, 0, 0, .65);
    color: #fff;
}
.file-intro {
    padding: 16rpx;
    margin-top: -8rpx;
}
.film-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.film-tag {
    width: 100%;
    margin-top: 10rpx;
    display: flex;
    justify-content: flex-start;
}
.film-tag-item {
    padding: 4rpx 6rpx;
    margin-right: 10rpx;
    font-size: 24rpx;
    box-shadow: 0 0 0 1px #ccc;
    border-top: 1px solid #fff;
    border-radius: 10rpx;
    background-color: #fafafa;
    color: #666;
}
.loading-tip {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #ccc;
}

使用方法

以popular（熱映）頁面為例

在popular.wxml中插入以下代碼引入組件結(jié)構(gòu)：

<import src="../../component/filmList/filmList.wxml"/>
<template is="filmList" data="{{films: films, hasMore: hasMore, showLoading: showLoading, start: start, windowHeight: windowHeight}}"/>

在popular.wcss中插入一下代碼引入組件樣式：

import "../../component/filmList/filmList.wxss";

• import 引入組件（模板）
• template 使用組件（模板） data屬性可以給模板傳入數(shù)據(jù)

消息提示

結(jié)構(gòu)

<template name="message">
    <view class="message-area" hidden="{{message.visiable ? false : true}}">
        <view class="message">
            <view class="message-icon message-icon-{{message.icon}}"></view>
            <view class="message-content">{{message.content}}</view>
        </view>
    </view>
</template>

樣式

@import "../../component/filmList/filmList.wxss";
.message-area {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
}
.message {
    box-sizing: border-box;
    position: fixed;
    z-index: 999;
    left: 50%;
    top: 50%;
    width: 200rpx;
    height: 200rpx;
    padding: 30rpx;
    margin-top: -100rpx;
    margin-left: -100rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 16rpx;
    background-color: rgba(0, 0, 0, .75);
    color: #fff;
    animation: fadeIn .3s;
}
.message-icon {
    height: 100rpx;
    width: 100rpx;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100rpx;
}
.message-icon-success {
    background-image: url('http://139.196.214.241:8093/cdn/images/weui-success-icon.png');
}
.message-icon-warning {
    background-image: url('http://139.196.214.241:8093/cdn/images/weui-warning-icon.png');
}
.message-icon-info {
    background-image: url('http://139.196.214.241:8093/cdn/images/weui-info-icon.png');
}
.message-content {
    margin-top: 15rpx;
    text-align: center;
}

邏輯

module.exports = {
    show: function(cfg) {
        var that = this
        that.setData({
            message: {
                content: cfg.content,
                icon: cfg.icon,
                visiable: true
            }
        })
        if (typeof cfg.duration !== 'undefined') {
            setTimeout(function(){
                that.setData({
                    message: {
                        visiable: false
                    }
                })
            }, cfg.duration)
        }
    },
    hide: function() {
        var that = this
        that.setData({
            message: {
                visiable: true
            }
        })
    }
}

使用方法

以search（搜索）頁面為例

在search.wxml中插入以下代碼引入組件結(jié)構(gòu)：

<import src="../../component/message/message.wxml"/>
<template is="message" data="{{message: message}}"/>

在search.wcss中插入一下代碼引入組件樣式：

@import "../../component/message/message.wxss";

在search.js中插入一下代碼引入組件邏輯：

var message = require('../../component/message/message')
message.show.call(that,{
  content: '請輸入內(nèi)容',
  icon: 'info',
  duration: 1500
})

• import 引入組件（模板）
• template 使用組件（模板） data屬性可以給模板傳入數(shù)據(jù)
• require 引入文件中 module.exports導(dǎo)出的數(shù)據(jù)或方法
• 調(diào)用方法：message.show.call(cfg)

第二步 編寫公共腳本

請求接口

列表：

• fetchFilms：獲取電影列表（熱映弃甥、待映、排行汁讼、搜索結(jié)果頁面）
• fetchFilmDetail：獲取電影詳情
• fetchPersonDetail：獲取人物詳情
• search：搜索關(guān)鍵詞或是類型（返回的是電影列表）

var config = require('./config.js')
module.exports = {
    fetchFilms: function(url, city, start, count, cb) {
    var that = this
      if (that.data.hasMore) {
        fetch(url + '?city=' + config.city + '&start=' + start + '&count=' + count).then(function(response){
          response.json().then(function(data){
            if(data.subjects.length === 0){
              that.setData({
                hasMore: false,
              })
            }else{
              that.setData({
                films: that.data.films.concat(data.subjects),
                start: that.data.start + data.subjects.length,
                showLoading: false
              })
            }
            typeof cb == 'function' && cb(res.data)
          })
        })
      }
    },
    fetchFilmDetail: function(url, id, cb) {
      var that = this;
      fetch(url + id).then(function(response){
        response.json().then(function(data){
          that.setData({
            showLoading: false,
            filmDetail: data
          })
          wx.setNavigationBarTitle({
              title: data.title
          })
          typeof cb == 'function' && cb(data)
        })
      })
    },
    fetchPersonDetail: function(url, id, cb) {
      var that = this;
      fetch(url + id).then(function(response){
        response.json().then(function(data){
          that.setData({
            showLoading: false,
            personDetail: data
          })
          wx.setNavigationBarTitle({
              title: data.name
          })
          typeof cb == 'function' && cb(data)
        })
      })
    },
    search: function(url, keyword, start, count, cb){
      var that = this
      var url = decodeURIComponent(url)
      if (that.data.hasMore) {
        fetch(url + keyword + '&start=' + start + '&count=' + count).then(function(response){
          response.json().then(function(data){
            if(data.subjects.length === 0){
              that.setData({
                hasMore: false,
                showLoading: false
              })
            }else{
              that.setData({
                films: that.data.films.concat(data.subjects),
                start: that.data.start + data.subjects.length,
                showLoading: false
              })
              wx.setNavigationBarTitle({
                  title: keyword
              })
            }
            typeof cb == 'function' && cb(res.data)
          })
        })
      }
    }
}

項目配置

city：城市
count：數(shù)量

module.exports = {
    city: '杭州',
    count: 20
}

第三步 編寫頁面

popular（熱映）頁面

這里以熱映頁面為例
待映淆攻、口碑排行、搜索結(jié)果頁面可以以此類推

• popular.json

配置窗口標題以及允許下拉刷新

{
  "navigationBarTitleText": "正在熱映",
  "enablePullDownRefresh": true
}

• popular.wxml

直接引入電影列表組件 與coming（待映）頁嘿架、top（口碑排行）頁瓶珊、搜索結(jié)果頁相同

<import src="../../component/filmList/filmList.wxml"/>
<template is="filmList" data="{{films: films, hasMore: hasMore, showLoading: showLoading, start: start, windowHeight: windowHeight}}"/>

• popular.wxss

@import "../../component/filmList/filmList.wxss";

• popular.js

• 數(shù)據(jù)說明
• films：電影列表
• hasmore：上拉加載時是否還有更多數(shù)據(jù)
• showLoading：是否顯示loading動畫
• start：數(shù)據(jù)開始位置，用于上拉加載（每次累加）
• windowHeight： 獲取窗口高度耸彪，用于給scroll-view加高度（小程序中樣式好像不能獲取到窗口高度伞芹，用100%也沒用，所以用js獲炔跄取）
• 頁面事件
• onLoad：頁面載入唱较，通過引入的fetch請求網(wǎng)絡(luò)接口獲取電影列表
  douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)
• onShow：頁面顯示，通過 wx.getSystemInfo() 獲取窗口高度
• scroll：scroll-view滾動事件
• scrolltolower：滾動到底部觸發(fā)的事件召川，即上拉加載更多數(shù)據(jù)南缓。調(diào)用載入時請求的方法（此時start的值為20）
  douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)
• onPullDownRefresh：下拉刷新，初始化數(shù)據(jù)荧呐、顯示加載動畫并再次調(diào)用數(shù)據(jù)
• viewFilmDetail：查看電影詳情汉形，通過e.currentTarget.dataset 獲取標簽中的data-*的數(shù)據(jù)，然后在路徑中傳遞id給filmDetail頁面
• viewFilmByTag：點擊標簽（類型）時進入對應(yīng)類型的搜索頁

var douban = require('../../comm/script/fetch')
var config = require('../../comm/script/config')
var url = 'https://api.douban.com/v2/movie/in_theaters'
var searchByTagUrl = 'https://api.douban.com/v2/movie/search?tag='
Page({
    data: {
        films: [],
        hasMore: true,
        showLoading: true,
        start: 0,
        windowHeight: 0
    },
    onLoad: function() {
        var that = this
        douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)
    },
    onShow: function() {
        var that = this
        wx.getSystemInfo({
          success: function(res) {
              that.setData({
                  windowHeight: res.windowHeight*2
              })
          }
        })
    },
    scroll: function(e) {
        console.log(e)
    },
    scrolltolower: function() {
        var that = this
        douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)
    },
    onPullDownRefresh: function() {
        var that = this
        that.setData({
            films: [],
            hasMore: true,
            showLoading: true,
            start: 0
        })
        douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)
    },
    viewFilmDetail: function(e) {
        var data = e.currentTarget.dataset;
        wx.navigateTo({
            url: "../filmDetail/filmDetail?id=" + data.id
        })
    },
    viewFilmByTag: function(e) {
        var data = e.currentTarget.dataset
        var keyword = data.tag
        wx.navigateTo({
            url: '../searchResult/searchResult?url=' + encodeURIComponent(searchByTagUrl) + '&keyword=' + keyword
        })
    }
})

filmDetail（電影詳情）頁面

這里以電影頁面為例
人物詳情頁面可以以此類推

• filmDetail.json

配置窗口標題

{
  "navigationBarTitleText": "電影詳情"
}

• filmDetail.wxml

<view class="container">
    <block wx:if="{{showLoading}}">
        <view class="loading">玩命加載中…</view>
    </block>
    <block wx:else>
    <!-- fd: film detail -->
        <view class="fd-hd">
            <view class="fd-hd-bg" style="background-image: url({{filmDetail.images.large}})"></view>
            <image src="{{filmDetail.images.large}}" class="fd-cover"></image>
            <view class="fd-intro">
                <view class="fd-title">{{filmDetail.title}}</view>
                <view class="fd-intro-txt">導(dǎo)演：{{filmDetail.directors[0].name}}</view>
                <view class="fd-intro-txt">
                    演員：
                    <block wx:for="{{filmDetail.casts}}" wx:for-item="filmDetailCastItem" wx:for-index="filmDetailCastIndex" wx:key="filmDetailCastItem">
                        {{filmDetailCastItem.name}}
                        <block wx:if="{{filmDetailCastIndex !== filmDetail.casts.length - 1}}">/</block>
                    </block>
                </view>
                <view class="fd-intro-txt">豆瓣評分：
                    <block wx:if="{{filmDetail.rating.average == 0}}">
                        暫無評分
                    </block>
                    <block wx:else>
                        {{filmDetail.rating.average}}分
                    </block>
                </view>
                <view class="fd-intro-txt">上映年份：{{filmDetail.year}}年</view>
            </view>
        </view>
        <view class="fd-data">
            <view class="fd-data-item">
                <view class="fd-data-num">{{filmDetail.collect_count}}</view>
                <view class="fd-data-title">看過</view>
            </view>
            <view class="fd-data-item">
                <view class="fd-data-num">{{filmDetail.wish_count}}</view>
                <view class="fd-data-title">想看</view>
            </view>
            <view class="fd-data-item">
                <view class="fd-data-num">{{filmDetail.ratings_count}}</view>
                <view class="fd-data-title">評分人數(shù)</view>
            </view>
        </view>
        <view class="fd-bd">
            <view class="fd-bd-title">劇情簡介</view>
            <view class="fd-bd-intro">{{filmDetail.summary}}</view>
            <view class="fd-bd-title">導(dǎo)演/演員</view>
            <view class="fd-bd-person">
                <view class="fd-bd-person-item" data-id="{{filmDetail.directors[0].id}}" bindtap="viewPersonDetail">
                    <image class="fd-bd-person-avatar" src="{{filmDetail.directors[0].avatars.medium}}"></image>
                    <view class="fd-bd-person-name">{{filmDetail.directors[0].name}}</view>
                    <view class="fd-bd-person-role">導(dǎo)演</view>
                </view>
                <block wx:for="{{filmDetail.casts}}" wx:for-item="filmDetailCastItem" wx:key="filmDetailCastItem">
                    <view class="fd-bd-person-item" data-id="{{filmDetailCastItem.id}}" bindtap="viewPersonDetail">
                        <image class="fd-bd-person-avatar" src="{{filmDetailCastItem.avatars.medium}}"></image>
                        <view class="fd-bd-person-name">{{filmDetailCastItem.name}}</view>
                        <view class="fd-bd-person-role">演員</view>
                    </view>
                </block>
            </view>
            <view class="fd-bd-title">標簽</view>
            <view class="fd-bd-tag">
                <block wx:for="{{filmDetail.genres}}" wx:for-item="filmDetailTagItem" wx:key="filmDetailTagItem">
                    <view class="fd-bd-tag-item" data-tag="{{filmDetailTagItem}}" catchtap="viewFilmByTag">{{filmDetailTagItem}}</view>
                </block>
            </view>
        </view>
    </block>
</view>

• filmDetail.wxss

@import "../../comm/style/animation.wxss";
.fd-hd {
    position: relative;
    width: 100%;
    height: 600rpx;
    display: flex;
    justify-content: center;
    align-content: center;
    overflow: hidden;
}
.fd-hd:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 600rpx;
    background-color: rgba(0, 0, 0, .6);
}
.fd-hd-bg {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 600rpx;
    background-size: cover;
    background-position: center;
    filter: blur(30rpx);
}
.fd-cover {
    z-index: 2;
    width: 300rpx;
    height: 420rpx;
    margin-top: 80rpx;
    border-radius: 8rpx;
    box-shadow: 0 30rpx 150rpx rgba(255, 255, 255, .3)
}
.fd-intro {
    z-index: 2;
    width: 320rpx;
    margin-top: 80rpx;
    margin-left: 40rpx;
    color: #fff;
}
.fd-title {
    margin-bottom: 30rpx;
    font-size: 42rpx;
}
.fd-intro-txt {
    margin-bottom: 18rpx;
    color: #eee;
}
.fd-data {
    display: flex;
    height: 150rpx;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #f4f4f4;
}
.fd-data-item {
    width: 33.33%;
    text-align: center;
}
.fd-data-item {
    border-left: 1px solid #eee;
}
.fd-data-item:first-child {
    border-left: none;
}
.fd-data-num {
    font-size: 40rpx;
    font-weight: 100;
    color: #444;
}
.fd-data-title {
    color: #999;
}
.fd-bd {
    padding: 0 40rpx 40rpx;
}
.fd-bd-title {
    padding-left: 20rpx;
    margin-top: 40rpx;
    margin-bottom: 20rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #444;
    border-left: 10rpx solid #47a86c;
}
.fd-bd-intro {
    text-align: justify;
    line-height: 1.5;
    color: #666;
}
.fd-bd-tag {
    display: flex;
}
.fd-bd-tag-item {
    padding: 5rpx 10rpx;
    margin-right: 15rpx;
    border: 1px solid #ccc;
    border-radius: 10rpx;
    color: #666;
}
.fd-bd-person {
    display: flex;
    width: 100%;
    height: 480rpx;
    overflow-x: scroll;
    overflow-y: hidden;
}
.fd-bd-person-item {
    margin-left: 20rpx;
    text-align: center;
}
.fd-bd-person-item:first-child {
    margin-left: 0;
}
.fd-bd-person-avatar {
    width: 280rpx;
    height: 400rpx;
}
.fd-bd-person-name {
    color: #666;
}
.fd-bd-person-role {
    color: #999
}

• filmDetail.js

• 數(shù)據(jù)說明
• filmDetail：電影詳情數(shù)據(jù)
• showLoading：是否顯示loading動畫
• 頁面事件
• onLoad：頁面載入坛增，獲取從電影列表傳入的id （在options中），通過fetch請求網(wǎng)絡(luò)接口獲取電影詳情
  douban.fetchFilmDetail.call(that, url, id)
• viewPersonDetail：查看人物詳情薄腻，通過e.currentTarget.dataset 獲取標簽中的data-*的數(shù)據(jù)收捣，然后在路徑中傳遞id給personDetail頁面
• viewFilmByTag：點擊標簽（類型）時進入對應(yīng)類型的搜索頁

var douban = require('../../comm/script/fetch')
var url = 'https://api.douban.com/v2/movie/subject/'
var searchByTagUrl = 'https://api.douban.com/v2/movie/search?tag='
Page({
    data: {
        filmDetail: {},
        showLoading: true
    },
    onLoad: function(options) {
        var that = this
        var id = options.id
        douban.fetchFilmDetail.call(that, url, id)
    },
    viewPersonDetail: function(e) {
        var data = e.currentTarget.dataset;
        wx.redirectTo({
          url: '../personDetail/personDetail?id=' + data.id
        })
    },
    viewFilmByTag: function(e) {
        var data = e.currentTarget.dataset
        var keyword = data.tag
        wx.navigateTo({
            url: '../searchResult/searchResult?url=' + encodeURIComponent(searchByTagUrl) + '&keyword=' + keyword
        })
    }
})

search（搜索）頁面

• search.json

配置窗口標題

{
  "navigationBarTitleText": "搜索"
}

• search.wxml

引用了message組件，當沒有輸入內(nèi)容時給出提示

<import src="../../component/message/message.wxml"/>
<template is="message" data="{{message: message}}"/>
<view class="search-hd">
    <view class="search-area">
        <form bindsubmit="search">
            <view class="search-type" bindtap="changeSearchType">{{searchType == 0 ? '默認' : '類型'}}</view>
            <input class="search-txt" name="keyword" auto-focus placeholder="{{searchType == 0 ? '請輸入電影標題庵楷、演員或?qū)а? : '請輸入影片類型罢艾，如：愛情楣颠、喜劇'}}"/>
            <button class="search-btn" formType="submit">搜索</button>
        </form>
    </view>
    <view class="search-keyword">
        <view class="search-keyword-title">熱門搜索</view>
        <view wx:for="{{hotKeyword}}" wx:for-item="hotKeywordItem" wx:key="hotKeywordItem" class="search-keyword-item" data-keyword="{{hotKeywordItem}}" bindtap="searchByKeyword">{{hotKeywordItem}}</view>
        <view class="search-keyword-title">熱門標簽</view>
        <view wx:for="{{hotTag}}" wx:for-item="hotTagItem" wx:key="hotTagItem" class="search-keyword-item" data-keyword="{{hotTagItem}}" bindtap="searchByTag">{{hotTagItem}}</view>        
    </view>
</view>

• search.js

• 數(shù)據(jù)說明
• searchType：搜索類型 0為關(guān)鍵詞，1為類型（標簽）
• hotKeyword：熱門關(guān)鍵詞
• hotTag：熱門標簽
• 頁面事件
• changeSearchType：改變搜索類型咐蚯，通過wx.showActionSheet
• search：搜索表單提交事件童漩，如果沒有輸入內(nèi)容，則自定義消息組件的show方法即message.show.call(cfg)來提示用戶春锋，有內(nèi)容則通過e.detail.value來獲取表單的數(shù)據(jù)矫膨，并傳遞給searchDetail（搜索結(jié)果頁）
• searchByKeyword：點擊關(guān)鍵詞時進入對應(yīng)類型的搜索頁
• viewFilmByTag：點擊標簽（類型）時進入對應(yīng)類型的搜索頁

var message = require('../../component/message/message')
var douban  = require('../../comm/script/fetch')
var url = ['https://api.douban.com/v2/movie/search?q=', 'https://api.douban.com/v2/movie/search?tag=']

Page({
  data:{
    searchType: 0,
    hotKeyword: ['功夫熊貓', '烈日灼心', '擺渡人', '長城', '我不是潘金蓮', '這個殺手不太冷', '驢得水', '海賊王之黃金城', '西游伏妖片', '我在故宮修文物', '你的名字'],
    hotTag: ['動作', '喜劇', '愛情', '懸疑']
  },
  changeSearchType: function() {
    var types = ['默認', '類型'];
    var that = this
    wx.showActionSheet({
      itemList: types,
      success: function(res) {
        if (!res.cancel) {
          that.setData({
            searchType: res.tapIndex
          })
        }
      }
    })
  },
  search: function(e) {
    var that = this
    var keyword = e.detail.value.keyword
    if (keyword == '') {
      message.show.call(that,{
        content: '請輸入內(nèi)容',
        icon: 'info',
        duration: 1500
      })
      return false
    } else {
      wx.navigateTo({
        url: '../searchResult/searchResult?url=' + encodeURIComponent(url[that.data.searchType]) + '&keyword=' + keyword
      })
    }
  },
  searchByKeyword: function(e) {
    var that = this
    var keyword = e.currentTarget.dataset.keyword
    wx.navigateTo({
      url: '../searchResult/searchResult?url=' + encodeURIComponent(url[0]) + '&keyword=' + keyword
    })
  },
  searchByTag: function(e) {
    var that = this
    var keyword = e.currentTarget.dataset.keyword
    wx.navigateTo({
      url: '../searchResult/searchResult?url=' + encodeURIComponent(url[1]) + '&keyword=' + keyword
    })
  }
})

附錄

UI

• 頁面加載
  
  screenshot-1
• 電影列表
  
  screenshot-2
• 下拉刷新
  
  screenshot-3
• 電影詳情
  
  screenshot-4
• 任務(wù)詳情
  
  screenshot-5
• 搜索
  
  screenshot-6
• 搜索結(jié)果 (關(guān)鍵詞搜索)
  
  screenshot-7
• 搜索結(jié)果 (標簽/類型搜索)
  
  screenshot-8
• 信息提示
  
  screenshot-9

思維導(dǎo)圖

mindMap