微信小程序?qū)嵗?-搜索電影app
發(fā)布時間：2018-04-21 09:34 所屬欄目：小程序開發(fā)教程
|
做完“天氣預(yù)報”之后就嘗試做“豆瓣電影app”了，學(xué)到不少東西，下面是詳細(xì)步驟： 各個頁面效果如下圖所示：
看起來還可以吧，接下來先到豆瓣api官網(wǎng)看看，網(wǎng)址：https://developers.douban.com/wiki/?title=api_v2。 如下圖所示，一步一步來做準(zhǔn)備工作，都是現(xiàn)成的 API ，調(diào)用還是挺方便的。
大致目錄結(jié)構(gòu)如下：
好了，了解完各個頁面需要調(diào)用的 API 之后，先進(jìn)行簡單的頁面布局，一個一個來做，先來貼首頁（正在熱映）的布局代碼，后面幾個頁面的布局都可以公用這份代碼的！ 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向函數(shù)傳參keyword-->
</view>
<!--中間內(nèi)容塊（電影簡介）-->
<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=
|
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉庫:
本文地址：http://m.chqfk.com/wxmini/doc/course/23843.html 復(fù)制鏈接
如需定制請聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
