微信小程序实例--搜索电影app
发布时间：2018-04-21 09:34 所属栏目：小程序开发教程
|
做完“天气预报”之后就尝试做“豆瓣电影app”了，学到不少东西，下面是详细步骤： 各个页面效果如下图所示：
看起来还可以吧，接下来先到豆瓣api官网看看，网址：https://developers.douban.com/wiki/?title=api_v2。 如下图所示，一步一步来做准备工作，都是现成的 API ，调用还是挺方便的。
大致目录结构如下：
好了，了解完各个页面需要调用的 API 之后，先进行简单的页面布局，一个一个来做，先来贴首页（正在热映）的布局代码，后面几个页面的布局都可以公用这份代码的！ hotMovies.wxml 文件代码如下： hotMovies.wxml 文件代码如下：
[html] view plain copy print?
<view class="wrapper">
<!--顶部轮播图-->
<swiper indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActivedColor}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" mode="scaleToFill" />
</swiper-item>
</block>
</swiper>
<view class="search">
<input bindinput="keyword" placeholder="示例输入：'广州'or'guangzhou'" placeholder-style="color:#0ff"/>
<button bindtap="requestHotMovies" data-keyword="{{keyword}}">搜索</button><!--data-keyword向函数传参keyword-->
</view>
<!--中间内容块（电影简介）-->
<view wx:for="{{hotMovies}}" wx:for-item="item">
<view class="content">
<view class="picView">
<image class="pic" src="{{item.images.medium}}" id="{{item.id}}" bindtap="toDetail" />
</view>
<view class="info">
<view class=
|
