別人寫的微信小程式,收藏借鑑!
第一步 專案配置
一、編寫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 動畫
- script - 公共指令碼
- component - 公用的元件
- filmList - 電影列表
- filmList.wxml - 元件結構
- filmList.wxss - 元件樣式
- filmList - 電影列表
- dist - 靜態資源
- images 本地圖片,主要存導航的圖示 (樣式中不可引用本地影象資源)
- images 本地圖片,主要存導航的圖示 (樣式中不可引用本地影象資源)
- pages - 頁面
- popular - 頁面資料夾 ("popular"為自定義的頁面名稱,頁面相關檔案的檔名需與頁面名相同)
- popular.js 頁面邏輯
- popular.wxml 頁面結構
- popular.wxss 頁面樣式
- popular.json 頁面視窗配置 (可參考app.json中的window配置)
- popular - 頁面資料夾 ("popular"為自定義的頁面名稱,頁面相關檔案的檔名需與頁面名相同)
- 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