微信小程序实例--搜索电影app

发布：2018-04-21 09:34浏览：次来源：网络作者：cola

做完“天气预报”之后就尝试做“豆瓣电影app”了，学到不少东西，下面是详细步骤：

各个页面效果如下图所示：

微信小程序实例--搜索电影app(图1) 微信小程序实例--搜索电影app(图2)

微信小程序实例--搜索电影app(图3) 微信小程序实例--搜索电影app(图4)

看起来还可以吧，接下来先到豆瓣api官网看看，网址：https://developers.douban.com/wiki/?title=api_v2。

如下图所示，一步一步来做准备工作，都是现成的 API ，调用还是挺方便的。

微信小程序实例--搜索电影app(图5) 微信小程序实例--搜索电影app(图6)

微信小程序实例--搜索电影app(图7)

微信小程序实例--搜索电影app(图8)

微信小程序实例--搜索电影app(图9) 微信小程序实例--搜索电影app(图10)

大致目录结构如下：

微信小程序实例--搜索电影app(图11)

好了，了解完各个页面需要调用的 API 之后，先进行简单的页面布局，一个一个来做，先来贴首页（正在热映）的布局代码，后面几个页面的布局都可以公用这份代码的！

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=

上一篇：微信小程序分页加载

下一篇：javascript/微信小程序中将String进行Base

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。