记录小程序学习(3)( 制作电影栏1)

给项目添加tab 选项卡

添加movies目錄
用小程序提高的tabBar

嵌套template

看到效果图，养成习惯，先简单的思考逻辑，首先想做三个template嵌套，然后先用假数据填充看效果

从最小的template开始编写

星星的

一列的
首先import
然后放入一个星星的template
<template is=“starsTemplate” /

一行的
正在热映用text
更多与小于号用个view包裹
然后在放入三个列的template

在movies.wxml中调用, 初步完成

设置样式
用弹性模型比较方便
.stars-container{
display: flex;
flex-direction: row;
}
星星评分

padding-left: 3rpx;星星之间的间距
margin-right: 24rpx;星星与评分的间距

写好星星的样式，发现没有效果
没有效果的原因是 需要在主引用方 引用一下

换个更加符合逻辑的引用方式
@import “movie-list/movie-list-template.wxss”
@import “…/movie/movie-template.wxss”
@import “…/stars/stars-template.wxss”

海报
padding-bottom: 20rpx;
海报内边距

flex-direction: column;
主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）

padding: 0 22rpx;
内边距 上下0，左右22

movie-list 热映更多

.inner-container{
margin: 0 auto 20rpx;
}
三个组件作为一个整体左右居中

.more{
float: right;
/* 右移 */
}
右浮动

方法2：

display: flex;
flex-direction: row;
justify-content: space-between;两边
设置弹性模型
因为用了弹性模型 所以vertical-align: middle;失效
所以热映与更多不在同一水平上 需要微调

调用豆瓣api

小程序中发起网络请求wx.request

向服务器提交数据，要在data{}中填写
data{}当method 为post,put时使用
method里每个都代表接口的类型

获取数据

编写了样式，可是为什么间距没有出现呢？
解决方法：
因为template只是站位符号，需要在外面创建 <view

为了简洁
将http://t.yushu.im变为一个全局变量房子app
然后var app= gerApp();//获取全局的app
最后将wx.request变为一个请求函数


因为是异步，所以打印的顺序不一样
getMovieListData是同步 但里面有异步方法wx.request

数据绑定

信息处理，只取三条数据

结合上图
processDoubanData:function(moviesDouban){
var movies=[];//处理数据的容器
for (var idx in moviesDouban.subjects){
var subject = moviesDouban.subjects[idx];
var title =subject.title;
if(title.length>=6){
title=title.substring(0,6)+"…";
}
//把所有元素先装到temp里面，最后再一起push(实例数组添加新元素)到movies数组里面
var temp = {
title:title,
average:subject.rating.average,//评分
coverageUrl:subject.images.large,
movieId:subject.id//方便之后跳转到电影详情
}
movies.push(temp)
}
this.setData({
movies:movies//数据绑定
})
}

template的数据绑定至上而下(大至小)

movie-list-template中有三个template，所以改写成for循环。

wx:for="{
   {movies}}" wx:for-item="movie"

传进来的是movies,指定item 叫 movie

问题1

data="{
   {...movie}}"

用三个小点把movie展开？？什么意思

movie-template中 ，将评分传进去

<template is="starsTemplate" data="{
   {average}}"/>

如上两图比较，如未注释数据绑定会绑定最后一次调用的top250

---

在page创建一个结构体变量

 data:{
   
    inTheaters:{
   },
    comingSoon:{
   },
    top250:{