微信小程序之“豆瓣电影”
生活随笔
收集整理的這篇文章主要介紹了
微信小程序之“豆瓣电影”
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
微信小程序之“豆瓣電影”
一、需求分析
1、首頁
2.搜索頁
3.列表頁
4.詳情頁
任務1.2 項目準備
1.微信開發者工具
2. 整理初始代碼，刪除部分文件及代碼
3.新建所需頁面 如下
二、自定義組件封裝
1. 打開searchbar.wxml文件，添加如下代碼：
<view class="searchbar"><navigator wx:if="{{isnavigator}}" url='/pages/search/search' class='search-navigator'></navigator><view wx:else class="search-input-group"><input class='search-input' placeholder='搜索' bindinput='onInputEvent'></input></view> </view>2.打開searchbar.wxss文件,代碼如下：
.searchbar{background-color: #41be57;padding: 20rpx; } .search-navigator{width: 100%;height: 60rpx;background-color: #fff;border-radius: 10rpx;background-image: url("base64代碼");background-position: center center;background-repeat: no-repeat;background-size: 8%; } .search-input-group{width: 100%;height: 60rpx;background-color: #fff;border-radius: 10rpx;padding: 10rpx 20rpx;box-sizing: border-box; } .search-input{min-height: 40rpx;height: 40rpx;font-size: 12px; }*[base64代碼]: 需將搜索圖標轉換為base64格式展示，提供在線轉換工具：http://tool.chinaz.com/tools/imgtobase/3. 打開searchbar.js文件，添加如下代碼
// components/searchbar/searchbar.js Component({/*** 組件的屬性列表*/properties: {isnavigator: {type: Boolean,value: false}},/*** 組件的初始數據*/data: {},/*** 組件的方法列表*/methods: {onInputEvent: function(event){var value = event.detail.value;var detail = {"value": value};var options = {};this.triggerEvent("searchinput",detail,options);}} })4. 打開searchbar.js文件，添加如下代碼
{"component": true,"usingComponents": {} }5.打開index.json文件，添加代碼：
{"usingComponents": {"searchbar": "/components/searchbar/searchbar","indexmodule": "/components/indexmodule/indexmodule"} }6.打開index.js文件，添加代碼：
import {network} from "../../utils/network.js";Page({/*** 頁面的初始數據*/data: {},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {// MVC：Model,View,Controllervar that = this;// 電影network.getMovieList({success: function(movies){that.setData({movies: movies});}});// 電視劇network.getTVList({success: function(tvs){that.setData({tvs: tvs});}});// 綜藝network.getShowList({success: function (shows) {console.log(shows)that.setData({shows: shows});}});} })7.打開index.wxml文件，添加代碼：
<searchbar isnavigator="{{true}}"></searchbar><!-- 電影 --> <indexmodule title="電影" items="{{movies}}" moreurl="/pages/list/list?type=movie" type="movie"></indexmodule><!-- 電視劇 --> <indexmodule title="電視劇" items="{{tvs}}" moreurl="/pages/list/list?type=tv" type="tv"></indexmodule><!-- 綜藝 --> <indexmodule title="綜藝" items="{{shows}}" moreurl="/pages/list/list?type=show" type="show"></indexmodule>8. 打開stars.wxml文件，添加如下代碼：
<view class='rate-group'><image style='width:{{starsize}}rpx;height:{{starsize}}rpx;' wx:for="{{lights}}" wx:key="*this" src="/images/rate_light.png"></image><image style='width:{{starsize}}rpx;height:{{starsize}}rpx;' wx:for="{{halfs}}" wx:key="*this" src='/images/rate_half.png'></image><image style='width:{{starsize}}rpx;height:{{starsize}}rpx;' wx:for="{{grays}}" wx:key="*this" src='/images/rate_gray.png'></image><text wx:if="{{istext}}" style='font-size:{{fontsize}}rpx;color:{{fontcolor}};'>{{ratetext}}</text> </view>9. 打開stars.wxss文件,為視圖層添加樣式文件，代碼如下
.rate-group{display: flex;justify-content: center;align-items: center;font-size: 20rpx;color: #ccc; } .rate-group image{width: 20rpx;height: 20rpx; }10. 打開stars.js，添加代碼：
Component({/*** 組件的屬性列表*/properties: {rate: {type: Number,value: 0,observer(newVal, oldVal, changedPath) {// 屬性被改變時執行的函數（可選），也可以寫成在methods段中定義的方法名字符串, 如：'_propertyChange'// 通常 newVal 就是新設置的數據， oldVal 是舊數據this.updateRate();}},starsize: {type: Number,value: 20 //rpx},fontsize: {type: Number,value: 20 // rpx},fontcolor: {type: String,value: "#ccc"},istext: {type: Boolean,value: true}},/*** 組件的初始數據*/data: {},/*** 組件的方法列表*/methods: {updateRate: function(){var that = this;var rate = that.properties.rate;var intRate = parseInt(rate);var light = parseInt(intRate / 2);var half = intRate % 2;var gray = 5 - light - half;var lights = [];var halfs = [];var grays = [];for (var index = 1; index <= light; index++) {lights.push(index);}for (var index = 1; index <= half; index++) {halfs.push(index);}for (var index = 1; index <= gray; index++) {grays.push(index);}var ratetext = rate && rate > 0 ? rate.toFixed(1) : "未評分"that.setData({lights: lights,halfs: halfs,grays: grays,ratetext: ratetext});}},lifetimes: {attached: function(){this.updateRate();}} })11. 打開stars.json，添加代碼：
{"component": true,"usingComponents": {} }12. 打開itemview.json文件，添加代碼：
{"component": true,"usingComponents": {"stars": "/components/stars/stars"} }13. 打開itemview.wxml文件，添加如下代碼：
<navigator wx:if="{{item}}" class='item-navigator' url="{{itemurl}}"><view class='item-group'><view class='thumbnail-group'><image class='thumbnail' src='{{item.cover.url}}'></image></view><view class='item-title'>{{item.title}}</view><stars rate="{{item.rating.value}}"></stars></view> </navigator><view wx:else class="item-navigator"></view>14.打開itemview.wxss文件,代碼如下
.item-navigator{width: 200rpx;margin-right: 20rpx;display: inline-block; }.item-navigator .item-group{width: 100%; }.item-group .thumbnail-group{width: 100%;height: 284rpx; }.thumbnail-group .thumbnail{width: 100%;height: 100%; }.item-group .item-title{font-size: 28rpx;text-align: center;margin-top: 20rpx;text-overflow: ellipsis;overflow: hidden;margin-bottom: 20rpx; }15.打開itemview.js文件,添加如下代碼：
// components/itemview/itemview.js Component({/*** 組件的屬性列表*/properties: {item: {type: Object,value: {}},itemurl: {type: String,value: ""}},/*** 組件的初始數據*/data: {},/*** 組件的方法列表*/methods: {} })16.打開itemview.json文件,添加如下代碼：
{"component": true,"usingComponents": {"stars": "/components/stars/stars"} }17.打開indexmodule.json文件,添加組件引用代碼：
{"component": true,"usingComponents": {"itemview": "/components/itemview/itemview"} }18.打開indexmodule.wxss文件,代碼如下：
.module-group{padding: 40rpx;background-color: #fff; }.module-group .module-top{font-size: 36rpx;display: flex;justify-content: space-between; }.module-top .module-title{color: #494949; }.module-top .module-more{color: #41be57; }.module-scroll-view{margin-top: 40rpx;width: 100%;height: 400rpx;white-space: nowrap; }19.打開indexmodule.wxml文件，添加如下代碼：
<view class='module-group'><view class='module-top'><view class='module-title'>{{title}}</view><navigator url="{{moreurl}}" class='module-more'>更多</navigator></view><scroll-view class='module-scroll-view' scroll-x="{{true}}"><itemview wx:for="{{items}}" wx:key="{{item.title}}" item="{{item}}" itemurl="/pages/detail/detail?type={{type}}&id={{item.id}}"></itemview></scroll-view> </view>20.打開indexmodule.js文件,添加如下代碼：
// components/indexmodule/indexmodule.js Component({/*** 組件的屬性列表*/properties: {title: {type: String,value: ""},moreurl: {type: String,value: ""},items: {type: Array,value: []},type: {type: String,value: ""}},/*** 組件的初始數據*/data: {},/*** 組件的方法列表*/methods: {} })21. 打開onecomment.json文件，添加代碼：
{"component": true,"usingComponents": {"stars": "/components/stars/stars"} }22. 打開onecomment.js文件，添加代碼：
// components/onecomment/onecomment.js Component({/*** 組件的屬性列表*/properties: {item: {type: Object,value: {}}},/*** 組件的初始數據*/data: {},/*** 組件的方法列表*/methods: {} })23. 打開onecomment.wxml文件，添加代碼：
<view class='comment-group'><view class='left-comment'><image class="avatar" src="{{item.user.avatar}}"></image></view><view class='right-comment'><view class='username-rate'><text class='username'>{{item.user.name}}</text><stars rate="{{item.rating.value*2}}" starsize="30" istext='{{false}}'></stars></view><view class="release-time">{{item.create_time}}</view><view class='content'>{{item.comment}}</view></view> </view>24. 打開onecomment.wxss文件，添加代碼：
.comment-group{display: flex;justify-content: flex-start;padding-top: 40rpx; }.comment-group .left-comment{width: 70rpx;margin-right: 20rpx; } .left-comment .avatar{width: 70rpx;height: 70rpx;border-radius: 50%; }.comment-group .right-comment{flex: 1; }.right-comment .username-rate{display: flex;justify-content: flex-start;align-items: center; }.username-rate .username{font-size: 36rpx;margin-right: 20rpx; }.release-time{color: #b3b3b3;font-size: 32rpx;margin-top: 10rpx; }.content{font-size: 32rpx;color: #353535;margin-top: 10rpx; }三、首頁功能
1. 打開urls.js文件,添加如下代碼
const globalUrls = {movieList: "https://m.douban.com/rexxar/api/v2/subject_collection/movie_showing/items",tvList: "https://m.douban.com/rexxar/api/v2/subject_collection/tv_hot/items",showList: "https://m.douban.com/rexxar/api/v2/subject_collection/tv_variety_show/items",movieDetail: "https://m.douban.com/rexxar/api/v2/movie/",tvDetail: "https://m.douban.com/rexxar/api/v2/tv/",showDetail: "https://m.douban.com/rexxar/api/v2/tv/",movieTags: function(id){return "https://m.douban.com/rexxar/api/v2/movie/"+ id +"/tags?count=8"},tvTags: function(id){return "https://m.douban.com/rexxar/api/v2/tv/"+id+"/tags?count=8"},showTags: function(id){return this.tvTags(id);},movieComments: function(id,start=0,count=3){return 'https://m.douban.com/rexxar/api/v2/movie/' + id + '/interests?count=' + count + '&start=' + start;},tvComments: function(id,start=0,count=3){return 'https://m.douban.com/rexxar/api/v2/tv/' + id + '/interests?count=' + count + '&start=' + start;},showComments: function(id,start=0,count=3){return this.tvComments(id,start,count);},searchUrl: function (q) {return "https://m.douban.com/rexxar/api/v2/search?q=" + q} }export {globalUrls}2.network.js文件,添加如下代碼：
import { globalUrls } from "urls.js";const network = {// 獲取電影列表getMovieList: function (params) {params.type = "movie";this.getItemList(params);},// 獲取電視劇列表getTVList: function (params) {params.type = "tv";this.getItemList(params);},// 獲取綜藝列表getShowList: function (params) {params.type = "show";this.getItemList(params);},// 獲取item列表getItemList: function(params){var url = "";if(params.type === 'movie'){url = globalUrls.movieList;}else if(params.type === 'tv'){url = globalUrls.tvList;}else{url = globalUrls.showList;}var count = params.count ? params.count : 7;wx.request({url: url,data: {count: count},success: function (res) {var items = res.data.subject_collection_items;var itemsCount = items.length;var left = itemsCount%3;if(left === 2){items.push(null);}if (params && params.success) {params.success(items);}}});},// 獲取詳情getItemDetail: function(params){var type = params.type;var id = params.id;var url = "";if(type === 'movie'){url = globalUrls.movieDetail + id;}else if(type === 'tv'){url = globalUrls.tvDetail + id;}else{url = globalUrls.showDetail + id;}wx.request({url: url,success: function(res){var item = res.data;if(params.success){params.success(item);}}})},// 獲取標簽getItemTags: function(params){var type = params.type;var id = params.id;var url = "";if(type === 'movie'){url = globalUrls.movieTags(id);}else if(type === 'tv'){url = globalUrls.tvTags(id);}else{url = globalUrls.showTags(id);}console.log(url)wx.request({url: url,success: function(res){var tags = res.data.tags;if(params.success){params.success(tags);}}})},// 獲取短評getItemComments: function(params){var type = params.type;var id = params.id;var start = params.start?params.start:0;var count = params.count?params.count:3;var url = "";if(type === 'movie'){url = globalUrls.movieComments(id,start,count);}else if(type === 'tv'){url = globalUrls.tvComments(id,start,count);}else{url = globalUrls.showComments(id,start,count);}wx.request({url: url,success: function(res){var data = res.data;if(params.success){params.success(data);}}})},// 搜索itemgetSearch: function(params){var q = params.q;var url = globalUrls.searchUrl(q);wx.request({url: url,success: function(res){console.log("---------2")console.log(res)var subjects = res.data.subjects;if(params.success){params.success(subjects);}}})} }export { network }四、列表頁功能
1. 打開list.json文件,添加組件引用代碼
{"usingComponents": {"searchbar": "/components/searchbar/searchbar","itemview": "/components/itemview/itemview"} }2. 打開list.wxml文件，添加如下代碼
<searchbar isnavigator="{{true}}"></searchbar> <view class='container'><itemview wx:for="{{items}}" wx:key="{{item.title}}" item="{{item}}" itemurl="/pages/detail/detail?type={{type}}&id={{item.id}}"></itemview> </view>3 打開list.wxss文件，添加如下代碼:
.container{display: flex;justify-content: space-between;flex-wrap: wrap;padding: 30rpx; }4. 打開list.js文件,添加如下代碼：
// pages/list/list.js import {network} from "../../utils/network.js"; Page({/*** 頁面的初始數據*/data: {},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {var that = this;var type = options.type;that.setData({type:type});var title = "";wx.showLoading({title: '正在加載中...',})if(type === "movie"){// 請求電影的數據network.getMovieList({success: function (items) {that.setData({items: items});wx.hideLoading();},count: 1000});title = "電影";}else if(type === 'tv'){// 請求電視劇的數據network.getTVList({success: function (items) {that.setData({items: items});wx.hideLoading();},count: 1000});title = "電視劇";}else{// 請求綜藝的數據network.getShowList({success: function (items) {that.setData({items: items});wx.hideLoading();},count: 1000});title = "綜藝";}wx.setNavigationBarTitle({title: title,})},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })五、搜索功能
1. 打開search.json文件,添加組件引用代碼：
{"usingComponents": {"searchbar": "/components/searchbar/searchbar"} }2. 打開search.wxml文件，添加如下代碼：
<searchbar bindsearchinput="onSearchInputEvent"></searchbar><view class='history-list-group' wx:if="{{histories && !subjects}}"><view class='history-title'><view class='title'>歷史記錄</view><view class='clear' bindtap="onClearEvent">清除</view></view><navigator wx:for="{{histories}}" wx:key="{{item.id}}" url='/pages/detail/detail?type={{item.type}}&id={{item.id}}' class='history-group'>{{item.title}}</navigator> </view><view class='item-list-group'><view wx:for="{{subjects}}" class='item-group' wx:key="{{item.id}}" bindtap="onItemTapEvent" data-id="{{item.id}}" data-title="{{item.title}}" data-type="{{item.type}}"><image src='{{item.pic.normal}}' class='thumbnail'></image><view class='info-group'><view class='title'>{{item.title}}</view><view class='rate-year'>{{item.rating.value}}分/{{item.year}}</view></view></view> </view>3. 打開search.wxss文件，添加如下代碼
.item-list-group{padding: 10rpx 20rpx; }.item-list-group .item-group{padding: 10rpx 0;border-bottom: 1px solid #e4e4e4;display: flex; }.item-group .thumbnail{width: 80rpx;height: 100rpx;margin-right: 20rpx; }.item-group .info-group{flex: 1;display: flex;flex-direction: column;justify-content: space-between; }.info-group .title{font-size: 32rpx; }.info-group .rate-year{font-size: 28rpx;color: #7b7b7b; }.history-list-group{padding: 10rpx 20rpx; }.history-list-group .history-title{display: flex;justify-content: space-between;padding: 20rpx 0;background: #f9f9f9;font-size: 28rpx;color: #9e9e9e; }.history-list-group .history-group{font-size: 32rpx;padding: 20rpx 0;border-bottom: 1px solid #e4e4e4; }4. 打開search.js文件,添加組件引用代碼：
// pages/search/search.js import {network} from "../../utils/network.js";Page({/*** 頁面的初始數據*/data: {},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {var that = this;wx.getStorage({key: 'searched',success: function(res) {var data = res.data;console.log("--------")console.log(data)that.setData({histories: data})},})},onSearchInputEvent: function(event){var that = this;var value = event.detail.value;if(!value || value === ""){that.setData({subjects: null});return;}network.getSearch({q: value,success: function(subjects){console.log(subjects)that.setData({subjects: subjects})}})},onItemTapEvent: function(event){var that = this;var id = event.currentTarget.dataset.id;var type = event.currentTarget.dataset.type;var title = event.currentTarget.dataset.title;var histories = that.data.histories;var isExisted = false;if(histories){for(var index=0;index<histories.length;index++){var movie = histories[index];if(movie.id === id){isExisted = true;break;}}}if(!isExisted){if(!histories){histories = [];}histories.push({ title: title, id: id, type: type});wx.setStorage({key: 'searched',data: histories,success: function () {console.log("保存成功！");}})}wx.navigateTo({url: "/pages/detail/detail?type=" + type+"&id="+id,});},onClearEvent: function(event){wx.removeStorage({key: 'searched',success: function(res) {console.log("刪除成功！");},});this.setData({histories: null});} })六、詳情頁功能
1. 打開detail.json文件,添加組件引用代碼
"stars": "/components/stars/stars""onecomment":"/components/onecomment/onecomment"2. 打開detail.wxml文件，添加如下代碼：
<view class="item-header"><view class="item-title">{{item.title}} {{item.original_title}}({{item.year}})</view><view class='item-detail'><view class="left-detail"><view class="item-rate"><stars rate="{{item.rating.value}}" starsize="30" fontsize="30" fontcolor="#595959"></stars><text class="comment-persons">{{item.rating.value}}人評價</text></view><view class="item-sub-detail"><view class="item-type">{{item.durations[0]}} {{item.genres}}</view><view class="item-show">{{item.pubdate[0]}}上映 {{item.countries[0]}}</view><view class="item-actors">{{item.authors}}</view></view></view><view class='right-detail'><image src="{{item.cover.image.small.url}}"></image></view></view> </view><view class='item-tags'><view class='item-tags-title'>豆瓣成員常用標簽</view><view class='item-tags-list'><text wx:for="{{tags}}" wx:key="*this">{{item}}</text></view> </view><view class='comment-list-group'><view class='comment-title'>短評({{totalComment}})</view><onecomment wx:for="{{comments}}" item="{{item}}"></onecomment> </view><navigator class='more-comment' url='/pages/comment/comment?id={{id}}&type={{type}}&thumbnail={{item.cover.image.small.url}}&title={{item.title}}&rate={{item.rating.value}}'>查看更多短評</navigator>3. 打開detail.wxss文件，添加如下代碼:
.item-header{padding: 60rpx 30rpx; }.item-header .item-title{font-size: 50rpx; }.item-header .item-detail{display: flex;justify-content: space-between;margin-top: 20rpx; }.item-detail .left-detail{flex: 1;margin-right: 20rpx; }.left-detail .item-rate{display: flex;justify-content: flex-start;align-items: center; }.item-rate .comment-persons{font-size: 28rpx;color: #ccc;margin-left: 20rpx; }.item-detail .right-detail{width: 200rpx;height: 300rpx; }.right-detail image{width: 100%;height: 100%; }.item-sub-detail{margin-top: 40rpx;font-size: 32rpx; }.item-sub-detail view{margin-bottom: 10rpx; }.item-tags{padding: 0 30rpx; }.item-tags .item-tags-title{color: #b3b3b3;font-size: 32rpx;margin-bottom: 20rpx; }.item-tags .item-tags-list{display: flex;justify-content: flex-start;flex-wrap: wrap; }.item-tags-list text{padding: 10rpx 20rpx;background: #f5f5f5;font-size: 32rpx;color: #353535;text-align: center;border-radius: 40rpx;margin-right: 20rpx;margin-bottom: 20rpx; }.comment-list-group{padding: 60rpx 30rpx; }.comment-list-group .comment-title{font-size: 32rpx;color: #b3b3b3; }.more-comment{text-align: center;font-size: 36rpx;color: #41be57;margin-bottom: 60rpx; }4. 打開detail.js文件，添加如下代碼：
// pages/detail/detail.js import {network} from "../../utils/network.js";Page({/*** 頁面的初始數據*/data: {},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {var that = this;var type = options.type;var id = options.id;that.setData({id: id,type: type});network.getItemDetail({type: type,id: id,success: function(item){console.log(item)var genres = item.genres;genres = genres.join("/");item.genres = genres;var actors = item.actors;var actorNames = [];if(actors.length > 3){actors = actors.slice(0,3);}for(var index=0; index<actors.length; index++){var actor = actors[index];actorNames.push(actor.name);}var authors=""actorNames = actorNames.join("/");if(type=="show"){authors = actorNames;}else{var director = item.directors[0].name;authors = director + "(導演) /" + actorNames;}item.authors = authors;that.setData({item: item});}});network.getItemTags({type: type,id: id,success: function(tags){console.log(tags)that.setData({tags: tags});}});// 獲取評論network.getItemComments({type: type,id: id,success: function(data){console.log(data)var totalComment = data.total;var comments = data.interests;that.setData({totalComment: totalComment,comments: comments});}});},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {wx.pageScrollTo({scrollTop: 0,})},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })七、短評列表功能
1. 打開comment.json文件,添加組件引用代碼：
{"usingComponents": {"onecomment": "/components/onecomment/onecomment"} }2. 打開comment.wxml文件，添加如下代碼：
<view class="container"><view class="item-group" bindtap="onItemTapEvent"><image class="thumbnail" src='{{thumbnail}}'></image><text class='item-title'>{{title}}</text><text class='item-rate'>{{rate}}分</text></view><view class='comment-title'>全部影評({{total}})</view><onecomment wx:for="{{comments}}" item="{{item}}"></onecomment><view class='page-btn-group'><button class='page-btn' bindtap='onPrePageTap' disabled='{{start <= 1}}' loading="{{preLoading}}">上一頁</button><button class='page-btn' bindtap='onNextPageTap' loading='{{nextLoading}}'>下一頁</button></view> </view>3. 打開comment.wxss文件，添加如下代碼:
.container{padding: 20rpx 30rpx; }.item-group{display: flex;justify-content: flex-start;align-items: center; }.item-group .thumbnail{width: 40rpx;height: 50rpx; }.item-group .item-title{font-size: 32rpx;color: #41be57;margin-left: 10rpx;margin-right: 10rpx; }.item-group .item-rate{font-size: 28rpx;color: #ccc; }.comment-title{margin-top: 60rpx;font-size: 40rpx; }.page-btn-group{margin-top: 40rpx;margin-bottom: 40rpx;display: flex;justify-content: flex-start;align-items: center; }.page-btn{flex: 1;height: 60rpx;color: #898989;border-color: #898989;line-height: 60rpx; }4. 打開comment.js文件,添加如下代碼：
// pages/comment/comment.js import {network} from "../../utils/network.js";Page({/*** 頁面的初始數據*/data: {total: 0,start: 1,count: 20},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {var that = this;that.setData(options);that.getComments(1);},getComments: function(start){var that = this;var type = that.data.type;console.log(type)var id = that.data.id;if(start > that.data.start){that.setData({nextLoading: true});}else{that.setData({preLoading: true});}network.getItemComments({type: type,id: id,start: start,count: 20,success: function (data) {console.log(data)var total = data.total;var comments = data.interests;console.log(comments);that.setData({total: total,comments: comments,start: start,preLoading: false,nextLoading: false});wx.pageScrollTo({scrollTop: 0,})}})},onItemTapEvent: function(event){wx.navigateBack({});},onPrePageTap: function(event){var that = this;var oldStart = that.data.start;var count = that.data.count;if(oldStart - count > 0){var start = oldStart - count;that.getComments(start);}},onNextPageTap: function(event){var that = this;var oldStart = that.data.start;var start = oldStart + that.data.count;that.getComments(start);} })5.打開network.js文件，添加如下代碼：
import { globalUrls } from "urls.js";const network = {// 獲取電影列表getMovieList: function (params) {params.type = "movie";this.getItemList(params);},// 獲取電視劇列表getTVList: function (params) {params.type = "tv";this.getItemList(params);},// 獲取綜藝列表getShowList: function (params) {params.type = "show";this.getItemList(params);},// 獲取item列表getItemList: function(params){var url = "";if(params.type === 'movie'){url = globalUrls.movieList;}else if(params.type === 'tv'){url = globalUrls.tvList;}else{url = globalUrls.showList;}var count = params.count ? params.count : 7;wx.request({url: url,data: {count: count},success: function (res) {var items = res.data.subject_collection_items;var itemsCount = items.length;var left = itemsCount%3;if(left === 2){items.push(null);}if (params && params.success) {params.success(items);}}});},// 獲取詳情getItemDetail: function(params){var type = params.type;var id = params.id;var url = "";if(type === 'movie'){url = globalUrls.movieDetail + id;}else if(type === 'tv'){url = globalUrls.tvDetail + id;}else{url = globalUrls.showDetail + id;}wx.request({url: url,success: function(res){var item = res.data;if(params.success){params.success(item);}}})},// 獲取標簽getItemTags: function(params){var type = params.type;var id = params.id;var url = "";if(type === 'movie'){url = globalUrls.movieTags(id);}else if(type === 'tv'){url = globalUrls.tvTags(id);}else{url = globalUrls.showTags(id);}console.log(url)wx.request({url: url,success: function(res){var tags = res.data.tags;if(params.success){params.success(tags);}}})},// 獲取短評getItemComments: function(params){var type = params.type;var id = params.id;var start = params.start?params.start:0;var count = params.count?params.count:3;var url = "";if(type === 'movie'){url = globalUrls.movieComments(id,start,count);}else if(type === 'tv'){url = globalUrls.tvComments(id,start,count);}else{url = globalUrls.showComments(id,start,count);}wx.request({url: url,success: function(res){var data = res.data;if(params.success){params.success(data);}}})},// 搜索itemgetSearch: function(params){var q = params.q;var url = globalUrls.searchUrl(q);wx.request({url: url,success: function(res){console.log("---------2")console.log(res)var subjects = res.data.subjects;if(params.success){params.success(subjects);}}})} }export { network }總結
以上是生活随笔為你收集整理的微信小程序之“豆瓣电影”的全部內容，希望文章能夠幫你解決所遇到的問題。
