微信小程序-项目开发宝典：19.豆瓣电影搜索页

微信小程序内测大概有二十天了，很多人制作并发布了不少不错的DEMO。前几天看到豆瓣电影的demo，很不错，于是也做了一个，回顾巩固一下文档API。

不用多说，我们直接进入正题：

第一部分只展示一个主页，所用的数据都是我自己编写的虚拟数据。

新建一个demo，不要用微信自带的demo，从头开始：

首先创建3个文件：

应用程序.json

应用程序.js

应用程序.wxss

app.json：主要写配置项：内容如下，每个键值具体含义这里就不详细解释了，可以参考我之前的配置指南，

“”[

“//”,

“/排名/排名”

]，

""：{

“h”：真，

"":"#eee",

"xt": "顶部导航标题文本",

“乐”：“”

}，

"：{

"": "#",

"": "#",

"": "",

"": "#",

“列表”： [

"": "//",

"text": "推荐电影",

"": "/.png",

“”：“/-.png”

}，

"": "/排名/排名",

"text": "北美票房",

"": "/note.png",

"": "/note-.png"

}，

"：{

"": ,

"": 9000,

“”：8000，

"":7000

}，

““： 真的

app.js：主要用于注册小程序实例

应用程序（{

：（）{

}，

：（）{

}，

：（）{

}，

: “我就是数据”

});

app.wxss ：公共样式，基本相当于CSS，暂时不需要写内容。

创建完三个文件之后，就可以开始编写页面内容了：

创建两个新文件夹，一个用于存放图片，一个用于存放页面。

目前下面只创建了两个文件夹和rank，每个文件下创建了json、js、wxml、wxss文件，目录如下：

虽然这四种文件类型并不是都需要用到，但是为了以后的方便，建议先创建好，这样需要的时候就比较方便，不用再重复创建。

先写.js：（为了模拟循环数组，下面的数据需要复制多次，这里只写出一次，路径一定要写好）

页（{

数据：{

:[{

: "../..//AN2.jpg",

： “肖申克的救赎”，

: “The (1994)”，

: “弗兰克·德拉·利本”

排名：“9.6”

：（）{

.log（1）；

}，

：（）{

// 当页面时执行。

}，

：（）{

// 当页面显示时执行。

}，

：（）{

// 页面隐藏时执行的操作。

}，

：（）{

// 当页面时执行。

}，

：（）{

// 下拉时执行

}，

//.

：（）{

这。（{

文本：“设置一些数据以供查看。”

}）

}）

这里有多个on函数事件，分别对应页面生命周期中各个流程的事件，这里我们暂时先关注数据对象。

小程序是数据驱动的，当页面进来的时候，动态获取数据，通过{{xxx}}绑定数据，并将数据渲染到视图层，这里我们先用一个虚拟数据来模拟

然后编写.wxml文件：

从上面展示的首页图片来看，主要就是一个标题，下面是一个列表，列表使用循环来渲染所有的数据。

：标题比较简单，主要写CSS

豆瓣电影

这里主要讲一下下面的列表循环，大家可以发现我们只需要写列表中的第一个，其他的都是通过循环来显示的。

榜单主要分为左中右三部分，分别是图片、内容、评分。