微信小程序豆瓣電影

前言

打開app.js文件，刪除自帶代碼，只保留以下代碼。
//app.js
App({
})
5.2 刪除logs文件包。
5.3 打開app.json文件，刪除"pages/logs/logs"，保留以下代碼。
{
“pages”:[
“pages/index/index”
],
“window”: {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#41be57”,
“navigationBarTitleText”: “豆瓣評分”,
“navigationBarTextStyle”: “white”
},
}
5.4 刪除index.wxml、index.wxss和app.wxss中所有代碼。
5.5 打開index.js文件，刪除自帶代碼，只保留以下代碼。
//index.js
//獲取應用實例
const app = getApp()
Page({
})
5.6 將附件中的imgage文件夾拷貝進項目，放在與pages同級目錄下。
6新建所需頁面
6.1新建pages/list目錄，在該目錄下新建list頁面。
6.2 相同方法，新建search、detail、comment頁面

搜索欄

1.新建components/searchbar目錄，在該目錄下新建components，命名為searchbar。
2.搜索欄的視圖層渲染
2.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.2 打開searchbar.wxss文件,為視圖層添加樣式文件，代碼如下：
備注：標記為base64代碼字樣部分，需將搜索圖標轉換為base64格式展示，提供在線轉換工具：http://tool.chinaz.com/tools/imgtobase/
.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;
}
3 打開searchbar.js文件，為該自定義組件添加屬性值，在properties對象下添加如下代碼：
isnavigator: {
type: Boolean,
value: false
}
4 為該自定義組件添加onInputEvent方法，實時監聽輸入框屬性值變化，在methods對象下添加如下代碼：
onInputEvent: function(event){
var value = event.detail.value;
var detail = {“value”: value};
var options = {};
this.triggerEvent(“searchinput”,detail,options);
}
5.組件測試
5.1打開index.json文件，在usingComponents對象下添加組件引用代碼：
“searchbar”: “/components/searchbar/searchbar”,
5.2打開index.wxml文件，添加搜索欄組件代碼：

評分組件

1.新建components/stars目錄，在該目錄下新建components，命名為stars。
2.評分星星組件的視圖層渲染
2.1打開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>

2.2 打開stars.wxss文件,為視圖層添加樣式文件，代碼如下：
.rate-group{
display: flex;
justify-content: center;
align-items: center;
font-size: 20rpx;
color: #ccc;
}
.rate-group image{
width: 20rpx;
height: 20rpx;
}
3 打開stars.js文件，為該自定義組件添加updateRate方法，根據傳入分值計算出滿星星、半星星和灰色星星的個數，在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
});
}
4為該自定義組件添加屬性值，在properties對象下添加如下代碼：
rate: {
type: Number,
value: 0,
observer(newVal, oldVal, changedPath) {
this.updateRate();
}
},
starsize: {
type: Number,
value: 20 //rpx
},
fontsize: {
type: Number,
value: 20 // rpx
},
fontcolor: {
type: String,
value: “#ccc”
},
istext: {
type: Boolean,
value: true
}
5 添加生命周期函數，在組件掛載時調用星星個數統計，添加代碼如下：
lifetimes: {
attached: function(){
this.updateRate();
}
}
*6.組件測試
6.1打開index.json文件，在usingComponents對象下添加組件引用代碼：
“stars”: “/components/stars/stars”,
6.2打開index.wxml文件，添加搜索欄組件代碼：
< stars rate=“6”>< /stars>

數據模塊組件

1.新建components/ itemview目錄，在該目錄下新建components，命名為itemview。
2.數據模塊組件的視圖層渲染
2.1打開itemview.json文件，在usingComponents對象下添加組件引用代碼：
“stars”: “/components/stars/stars”
2.2打開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>
2.3 打開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;
}
3打開itemview.js文件為該自定義組件添加屬性值，在properties對象下添加如下代碼：
item: {
type: Object,
value: {}
},
itemurl: {
type: String,
value: “”
}
*6.組件測試
6.1打開index.json文件，在usingComponents對象下添加組件引用代碼：
“itemview”: “/components/itemview/itemview”
6.2打開index.wxml文件，添加搜索欄組件代碼：
< itemview item="{{item}}" itemurl="/pages/detail/detail?type={{type}}&id={{item.id}}">< /itemview>
6.3 打開index.js文件，為頁面添加測試數據，代碼如下：
data:{
item:{
cover:{
url:“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581654839849&di=7daafbe7d5a57121340d08c8ffd73632&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201802%2F20%2F20180220165946_RiGPS.thumb.700_0.jpeg”
},
rating:{
value:6.7
},
title:“jarvis”
}
}

首頁模塊組件實現

1.新建components/ indexmodule目錄，在該目錄下新建components，命名為indexmodule。
2.數據模塊組件的視圖層渲染
2.1打開indexmodule.json文件，在usingComponents對象下添加組件引用代碼：
“itemview”: “/components/itemview/itemview”
2.2打開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>

2.3 打開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;
}
3打開indexmodule.js文件為該自定義組件添加屬性值，在properties對象下添加如下代碼：
title: {
type: String,
value: “”
},
moreurl: {
type: String,
value: “”
},
items: {
type: Array,
value: []
},
type: {
type: String,
value: “”
}

6.組件測試
6.1打開index.json文件，在usingComponents對象下添加組件引用代碼：
“indexmodule”: “/components/indexmodule/indexmodule”
6.2打開index.wxml文件，添加搜索欄組件代碼：
< indexmodule title=“電影” items="{{movies}}" moreurl="/pages/list/list?type=movie" type=“movie”>< /indexmodule>
*6.3 打開index.js文件，為頁面添加測試數據，在data對象下添加代碼如下：
movies: [{
cover: {
url: “”
},
rating: {
value: 6.7
},
title: “jarvis”
}, {
cover: {
url: “”
},
rating: {
value: 6.7
},
title: “jarvis”
}, {
cover: {
url: “”
},
rating: {
value: 6.7
},
title: “jarvis”
}]

首頁功能

任務3.1 功能實現
1.為首頁添加頁面渲染
2.1 打開index.json文件，在usingComponents對象下添加組件引用代碼：
“searchbar”: “/components/searchbar/searchbar”,
“indexmodule”: “/components/indexmodule/indexmodule”
2.2 為首頁界面的視圖層添加頁面渲染，打開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>
2. 添加工具類，方便網絡請求地址集中管理及網絡接口統一調用。
2.1在utils包下新建js文件，命名為urls
2.2相同辦法，新建network.js文件
2.3 打開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”,
}
export { globalUrls }
2.4 為首頁需要的網絡請求封裝函數，方便請求調用。
2.4.1 在network.js文件中引入urls.js文件，在network.js文件頂部添加如下代碼：
import { globalUrls } from “urls.js”;
2.4.2 打開network.js文件，封裝getItemList函數，傳入參數分別為type（請求類型），count（請求個數）。順序添加如下代碼：
const network = {
// 獲取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);
}
}
});
}
}
export { network }
2.4.3 分別添加獲取電影列表，電視劇列表，綜藝節目列表封裝代碼，在network.js文件中順序添加如下代碼：
// 獲取電影列表
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);
},
3.為首頁頁面添加業務邏輯代碼
3.1 打開index.js文件，添加network.js文件的引用代碼，在頁面最頂部添加如下代碼：
import {network} from “…/…/utils/network.js”;
3.2 在生命周期函數中添加獲取數據的函數，調用network中封裝的函數，在onLoad函數中添加如下代碼：
/**

• 生命周期函數–監聽頁面加載
  */
  onLoad: function (options) {
  // MVC：Model,View,Controller
  var 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) {that.setData({shows: shows});} });

}
單元4 列表頁功能
任務4.1 功能實現
1.為列表頁添加頁面渲染
1.1 打開list.json文件，在usingComponents對象下添加組件引用代碼：
“searchbar”: “/components/searchbar/searchbar”,
“itemview”: “/components/itemview/itemview”

1.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>
1.3 為頁面添加樣式文件，打開打開list.wxss文件，添加如下代碼:
.container{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 30rpx;
}
2.為首頁頁面添加業務邏輯代碼
2.1 打開list.js文件，添加network.js文件的引用代碼，在頁面最頂部添加如下代碼：
import {network} from “…/…/utils/network.js”;
2.2 在生命周期函數中添加獲取數據的函數，根據頁面跳轉type類型，調用network中封裝的函數，在onLoad函數中添加如下代碼：
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,
})

總結

以上是生活随笔為你收集整理的微信小程序豆瓣电影（上）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。