电影查询小程序知识点

本小程序分为三个模块：影院热映，电影推荐，查找电影。

1、完成app.json全局配置

 
  "pages": [
    "pages/movie/movie",
    "pages/recommend/recommend",
    "pages/search/search",
    "pages/detail/detail"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "豆瓣电影",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": "50px"
  },
  "tabBar": {
    "color": "#dddddd",
    "selectedColor": "3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#000",
    "list": [
      {
        "pagePath": "pages/movie/movie",
        "text": "影院热映",
        "iconPath": "assets/img/dy-1.png",
        "selectedIconPath": "assets/img/dy.png"
      },
      {
        "pagePath": "pages/recommend/recommend",
        "text": "电影推荐",
        "iconPath": "assets/img/tj-1.png",
        "selectedIconPath": "assets/img/tj.png"
      },
      {
        "pagePath": "pages/search/search",
        "text": "查找电影",
        "iconPath": "assets/img/search-1.png",
        "selectedIconPath": "assets/img/search.png"
      }
    ]
  }

2、使用swiper在首页轮播电影图片

< swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" style="width:100%"/>
    </swiper-item>
  </block>
</swiper>

 data: {
    imgUrls: [
      '/assets/img/001.jpg',
      '/assets/img/001.jpg',
      '/assets/img/001.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    movies:[],
    hidden:false
  }

3、使用豆瓣接口

（1）查看豆瓣接口

https://developers.douban.com/wiki/?title=api_v2

（2）查看接口返回的信息，比如查看正在上映的电影：http://api.douban.com/v2/movie/in_theaters，返回结果如图所示：输入图片说明

怎么清晰的查看返回数据呢？在浏览器的console里做如下操作：输入图片说明

回车后输入a,再回车：输入图片说明

4、热映数据读取与显示（1）调用接口时报错：appservice:996 http://api.douban.com 不在以下 request 合法域名列表中，请参考文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/net 解决办法：

输入图片说明

扫描二维码关注公众号，回复： 443762 查看本文章

（2）400 (Bad Request) 把 'Content-Type': 'application/json'变为"Content-Type": "application/text"

5、重构与封装（1）样式：引用其他文件的样式 @import "../movie/movie.wxss"

（2）视图创建模板

<template name="movies">
    <block wx:for="{{movies}}">
    <view class="movie" bindtap="detail" id="{{item.id}}">
       <view class="pic">
         <image src="{{item.images.medium}}" mode="aspectFit"/>
       </view>
       <view class="movie-info">
         <view class="base-info">
           <text>{{item.text}}</text>
         </view>
       </view>
    </view>
    <view class="hr"></view>
   </block>
</template>

引用模板

 <import src="../template/movietpl"/>
 <template is="movies" data="{{movies}}"/>

（3）逻辑层对外暴露方法

module.exports = {
  processSubjects: processSubjects
}

调用公共方法

var subjectUtil = require("../../utils/subjectUtil.js");
 subjectUtil.processSubjects(subjects);

电影查询小程序知识点

猜你喜欢