用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2017-7-11 00:05

做完“天气预报”之后就尝试做“豆瓣电影app”了,学到不少东西,下面是详细步骤: 各个页面效果如下图所示: 看起来还可以吧,接下来先到豆瓣api官网看看,网址:https://developers.douban.com/wiki/?title=api ...

  做完“天气预报”之后就尝试做“豆瓣电影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=
鲜花
鲜花
鸡蛋
鸡蛋 (1)

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: limitlessness 来自: csdn博客

相关阅读