別人寫的微信小程式，收藏借鑑！

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

第一步專案配置

一、編寫app.json

對整個專案的公共配置

1、pages：配置頁面路徑（必須），列出所有的頁面的路徑，所有存在的頁面都需要在此寫出，否則在頁面跳轉的時候會報出找不到頁面的錯誤
2、window：視窗配置，配置導航及視窗的背景色和文字顏色，還有導航文字和是否允許視窗進行下拉重新整理
3、tabBar：tab欄配置，配置tab欄背景色及出現位置，上邊框的顏色（目前只支援黑或白），文字顏色及文字選中顏色，最核心的配置是list即tab欄的列表，官方規定最少2個，最多5個，每個列表專案可配置頁面路徑、文字、圖示及選中時圖示的地址
4、network：網路配置，配置網路請求、上傳下載檔案、socket連線的超時時間
5、debug：除錯模式，建議開發時開啟（true），可以看到頁面註冊、頁面跳轉及資料初始化的資訊，另外報錯的錯誤資訊也會比較詳細

{
  "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
}

二、確定目錄結構

根據UI圖，提取元件和公共樣式/指令碼，以及page的目錄

comm - 公用的指令碼及樣式
- script - 公共指令碼
  - config.js 配置資訊 （單頁資料量，城市等）
  - fetch.js 介面呼叫 （電影列表及詳情，人物詳情、搜尋）
- style - 公共樣式
  - animation.wxss 動畫
component - 公用的元件
- filmList - 電影列表
  - filmList.wxml - 元件結構
  - filmList.wxss - 元件樣式
dist - 靜態資源
- images 本地圖片，主要存導航的圖示 （樣式中不可引用本地影象資源）
pages - 頁面
- popular - 頁面資料夾 （"popular"為自定義的頁面名稱，頁面相關檔案的檔名需與頁面名相同）
  - popular.js 頁面邏輯
  - popular.wxml 頁面結構
  - popular.wxss 頁面樣式
  - popular.json 頁面視窗配置 （可參考app.json中的window配置）
app.js - 小程式整體邏輯 （初始化、顯示、隱藏的事件，以及存放全域性資料）
app.json - 小程式公共配置
app.wxss - 小程式公共樣式

第二步編寫元件

電影列表

結構

<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">沒有更多內容了</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中插入以下程式碼引入元件結構：

<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屬性可以給模板傳入資料

訊息提示

結構

<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中插入以下程式碼引入元件結構：

<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: '請輸入內容',
  icon: 'info',
  duration: 1500
})

import 引入元件（模板）

template 使用元件（模板） data屬性可以給模板傳入資料

require 引入檔案中 module.exports匯出的資料或方法

呼叫方法：message.show.call(cfg)

第二步編寫公共指令碼

請求介面

列表：

fetchFilms：獲取電影列表（熱映、待映、排行、搜尋結果頁面）

fetchFilmDetail：獲取電影詳情

fetchPersonDetail：獲取人物詳情

search：搜尋關鍵詞或是型別（返回的是電影列表）

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：數量

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

第三步編寫頁面

popular（熱映）頁面

這裡以熱映頁面為例
待映、口碑排行、搜尋結果頁面可以以此類推

popular.json

配置視窗標題以及允許下拉重新整理

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

popular.wxml

直接引入電影列表元件與coming（待映）頁、top（口碑排行）頁、搜尋結果頁相同

<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

資料說明

films：電影列表

hasmore：上拉載入時是否還有更多資料

showLoading：是否顯示loading動畫

start：資料開始位置，用於上拉載入（每次累加）

windowHeight：獲取視窗高度，用於給scroll-view加高度（小程式中樣式好像不能獲取到視窗高度，用100%也沒用，所以用js獲取）

頁面事件

onLoad：頁面載入，通過引入的fetch請求網路介面獲取電影列表
douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)

onShow：頁面顯示，通過 wx.getSystemInfo() 獲取視窗高度

scroll：scroll-view滾動事件

scrolltolower：滾動到底部觸發的事件，即上拉載入更多資料。呼叫載入時請求的方法（此時start的值為20）
douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)

onPullDownRefresh：下拉重新整理，初始化資料、顯示載入動畫並再次呼叫資料

viewFilmDetail：檢視電影詳情，通過e.currentTarget.dataset 獲取標籤中的data-*的資料，然後在路徑中傳遞id給filmDetail頁面

viewFilmByTag：點選標籤（型別）時進入對應型別的搜尋頁

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">導演：{{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">評分人數</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">導演/演員</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">導演</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

資料說明

filmDetail：電影詳情資料

showLoading：是否顯示loading動畫

頁面事件

onLoad：頁面載入，獲取從電影列表傳入的id （在options中），通過fetch請求網路介面獲取電影詳情
douban.fetchFilmDetail.call(that, url, id)

viewPersonDetail：檢視人物詳情，通過e.currentTarget.dataset 獲取標籤中的data-*的資料，然後在路徑中傳遞id給personDetail頁面

viewFilmByTag：點選標籤（型別）時進入對應型別的搜尋頁

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元件，當沒有輸入內容時給出提示

<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 ? '請輸入電影標題、演員或導演' : '請輸入影片型別，如：愛情、喜劇'}}"/>
            <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

資料說明

searchType：搜尋型別 0為關鍵詞，1為型別（標籤）

hotKeyword：熱門關鍵詞

hotTag：熱門標籤

頁面事件

changeSearchType：改變搜尋型別，通過wx.showActionSheet

search：搜尋表單提交事件，如果沒有輸入內容，則自定義訊息元件的show方法即message.show.call(cfg)來提示使用者，有內容則通過e.detail.value來獲取表單的資料，並傳遞給searchDetail（搜尋結果頁）

searchByKeyword：點選關鍵詞時進入對應型別的搜尋頁

viewFilmByTag：點選標籤（型別）時進入對應型別的搜尋頁

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: '請輸入內容',
        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
任務詳情

screenshot-5
搜尋

screenshot-6
搜尋結果 (關鍵詞搜尋)

screenshot-7
搜尋結果 (標籤/型別搜尋)

screenshot-8
資訊提示

screenshot-9

思維導圖

mindMap

作者：sesine
連結：https://www.jianshu.com/p/447b36463f09

別人寫的微信小程式，收藏借鑑！

第一步專案配置

一、編寫app.json

二、確定目錄結構

第二步編寫元件

電影列表

訊息提示

第二步編寫公共指令碼

請求介面

專案配置

第三步編寫頁面

popular（熱映）頁面

filmDetail（電影詳情）頁面

search（搜尋）頁面

附錄

UI

思維導圖

別人寫的微信小程式，收藏借鑑！

4個別人都愛用的微信小程式，快來親自體驗一下啦！

哇！5款不為人知的微信小程式，每一款都是你需要的！低調收藏！

微信小程式，返回資料給上一介面

推薦一款智慧黑科技微信小程式，簡直不要太良心！

不管什麼手機，擁有這4個微信小程式就無敵了！

微信小程式，精選Demo合集，你確定不要嗎？

mpvue寫微信小程式-圖片引入（一）

5款小巧有趣的微信小程式，個個讓你心花怒放！

4個無敵好用的微信小程式，用了你都離不開

微信小程式，圖片上傳在java後端接收不到圖片的問題

5個功能逆天的微信小程式，每個都相見恨晚！

微信小程式，如何去掉或修改button的邊框、圓角

微信小程式，全域性樣式（總的樣式）和區域性樣式（頁面樣式）的用法和區別。

7個黑科技十足的微信小程式，每一個都能讓你念念不舍！

5個值得信賴的微信小程式，好用到任你挑選！

前端，Java，產品經理，微信小程式，Python等資源合集大放送

5個伴你成長的微信小程式，每一個都是一等一的小能手！

python打造微信小程式，加帽神器祝你聖誕節快樂！

微信小程式，如何在返回前一個頁面時，執行前一個頁面的方法

別人寫的微信小程式，收藏借鑑！

第一步 專案配置

一、編寫app.json

二、確定目錄結構

第二步 編寫元件

電影列表

訊息提示

第二步 編寫公共指令碼

請求介面

專案配置

第三步 編寫頁面

popular（熱映）頁面

filmDetail（電影詳情）頁面

search（搜尋）頁面

附錄

UI

思維導圖

相關推薦

第一步專案配置

第二步編寫元件

第二步編寫公共指令碼

第三步編寫頁面