[TOC]
# 这个页面要用封装来做 封装里面套封装
## 建一个文件 utils/utils.js
* 用来存储函数
```
function http(url,callback,type){
wx.request({
url,
header:{
'Content-type':'json'
},
success:function(res){
callback(res,type)
}
});
}
function star(stars) {
var value = stars.slice(0, 1);
var arr = [];
for(let i = 0;i<5 ;i++){
if(i<value){
arr.push(1)
}
else(
arr.push(0)
)
}
return arr;
}
// module.exports = {
// http: http
// }
function slice(title){
if(title.length>6){
title = title.slice(0,6) + '...';
}
return title
}
function list(subjects){
var movies = [];
subjects.forEach(ele => {
var average = ele.rating.average;
var title = slice(ele.title);
var stars = star(ele.rating.stars);
var imgUrl = ele.images.small;
var id = ele.id;
var temp = {
average,
title,
stars,
imgUrl,
id,
}
movies.push(temp);
})
return movies;
}
export default{
http,
star,
list,
}
```
## star 封装评分星
* pages/star/star
### star.wxml
```
<template name="starTemplate">
<view class="star">
<block wx:for="{{stars}}" wx:key="index">
<image wx:if="{{item==1}}" src="/images/icon/star.png" />
<image wx:if="{{item==0}}" src="/images/icon/none-star.png" />
</block>
</view>
</template>
```
### star.wxss
```
.star image{
width: 20rpx;
height: 20rpx;
margin-right: 5rpx ;
}
```
## movie-item 用来封装一个小单元的显示
* pages/movies/movie-item/movie-item
### movie-item.wxml
```
<import src="../star/star-template"></import>
<template name="movieItem">
<view class="movie-item">
<image src="{{imgUrl}}" class="banner" mode="aspectFit" catchtap='onClick' data-id='{{id}}'/>
<text class='title'>{{title}}</text>
<view class="evaluate">
<template is="starTemplate" data="{{stars}}"></template>
<text>{{average}}</text>
</view>
</view>
</template>
```
### movie-item.wxss
```
@import '../star/ster-template';
.movie-item{
display: flex;
flex-direction: column;
}
.banner{
width: 200rpx;
height: 280rpx;
}
.evaluate{
display: flex;
}
.title{
margin: 15rpx 0;
}
```
## movie-grid 电影页的分类格
* pages/movies/movie-grid/movie-grid
### movie-grid.wxml
```
<import src="../movie-item/movie-item"></import>
<template name="movieItemTemplate" >
<view class='movie-grid'>
<view class='more'>
<text>{{title}}</text>
<text catchtap="more" data-type="{{type}}" data-title="{{title}}">更多</text>
</view>
<view class='movie-grid-item'>
<!-- <template is="movieItem" data="{{...item}}"></template> -->
<block wx:for="{{movies}}" wx:key="index">
<template is="movieItem" data="{{...item}}" ></template>
</block>
</view>
</view>
</template>
```
### movie-grid.wxss
```
@import "../movie-item/movie-item";
.movie-grid-item{
display: flex;
justify-content: space-between;
}
.movie-grid{
padding: 15rpx;
margin: 20rpx 0;
background: #fff;
}
.more{
display: flex;
justify-content: space-between;
margin: 20rpx 0;
font-size: 30rpx;
}
```
## movie
### movie.js
```
const app = getApp();
const douban = app.globalData.doubanUrl;
import utils from "../../utils/utils"
var http = utils.http;
var star = utils.star;
var list = utils.list
Page({
data:{
"in_theaters":{},
"coming_soon": {},
"top250": {}
},
onLoad:function(options){
var self = this;
var count = "?start=0&count=3";
var inTheatersUrl = douban+"in_theaters"+ count;
var comingSoon = douban + "coming_soon" + count;
var top250 = douban + "top250" + count;
http(inTheatersUrl, this.handleData,"in_theaters")
http(comingSoon, this.handleData,"coming_soon")
http(top250,this.handleData,"top250")
},
handleData(res,type){
var title = res.data.title;
var subjects = res.data.subjects;
var movies = list(subjects);
var readyData ={};
readyData[type]={
movies,
title,
type
};
this.setData(readyData);
},
more(event) {
var type = event.currentTarget.dataset.type;
var title = event.currentTarget.dataset.title;
wx.navigateTo({
url: 'movie-more/movie-more?type=' + type+"&title=" + title
})
},
onClick(event) {
var id = event.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/web-page/web-page?id=' + id,
})
}
})
```
### movie.wxml
```
<!--pages/movie/movie.wxml-->
<import src="./movie-grid/movie-grid-template"></import>
<template is="movieItemTemplate" data="{{...in_theaters}}"></template>
<template is="movieItemTemplate" data="{{...coming_soon}}"></template>
<template is="movieItemTemplate" data="{{...top250}}"></template>
```
### movie.wxss
```
/* pages/movie/movie.wxss */
@import "./movie-grid/movie-grid-template";
page{
font-size: 30rpx;
background: #eee;
}
```
- 开发环境及接口
- 0.豆瓣接口
- 1.开发环境配置
- 2.一些相关文档
- 小程序实例效果
- 第0节、TodoList
- 第一节、豆瓣相关
- 1、tabBar的配置及导航加标题
- 2、数据加载及下拉加载
- 3、加载相关
- 4、轮播
- 5、星星评分
- 第二节、音乐播放相关
- 1.点击收藏分享
- 2.音乐播放
- 初始版
- 组件版
- 组件加强版
- 3.点赞
- 点赞初级版
- 点赞第二版
- 5.左右按钮
- 6.缓存
- 第三节、补充
- 地图
- 点击拍照换图
- 扫一扫
- 小程序语法
- 第一节 、HTTP的封装
- 0.http请求
- 1.function封装
- 2.class封装http
- 3.promise封装
- 4.config地址
- 第二节、组件
- 2.组件单独设置样式
- 3.一些有意义的标签
- 4.behavior
- 5.SLOT
- 6.左右按钮
- 5.点赞组件
- 6.用户授权
- 图片按钮 如分享
- 第三节、api
- 1.页面跳转
- 获取input里的值
- 1.添加评论
- 2.搜索框
- 3. 获取input里的值
- 2.设置缓存
- 3.模态框,弹出框
- 4.分享showActionSheet
- 5.定义全局的数据
- 2. 基础知识
- 1.setData
- 2.文件结构
- 3.wxml语法
- 第一节 数据绑定
- 第二节 列表渲染
- 第三节 条件渲染
- 第四节 模板
- 第五节 事件
- 第六节 引用
- 4.wxs
- 1.文本缩进问题
- 5.小程序中遇到的wxss 问题
- 1.width100%越界问题
- 废弃的文件
- 一个完整的小程序
- 1.启动页面
- 2.yuedu轮播+封装及数据调用
- yuedu的详情页
- 3.电影
- movie-more
- web-view