微信小程序豆瓣电影(上)

微信小程序豆瓣电影

前言

打开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,
})

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页