模拟豆瓣API的电影小程序

最新推荐文章于 2022-04-26 11:54:59 发布

zqzq19950725

最新推荐文章于 2022-04-26 11:54:59 发布

阅读量969

点赞数

本文链接：https://blog.csdn.net/zqzq19950725/article/details/100049512

版权

1、微信开发者工具

开发环境为微信web开发者工具，可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。
下载后，打开该工具，选择代码目录和申请的AppID，勾选quickStart选项，这样会创建几个基础页面。实现的功能是可以在首页查看豆瓣电影评分前250名并且可以点击跳转到详情页，在搜索页输入关键字搜索相关电影。

使用步骤

将仓库克隆到本地：

bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban

2.打开微信Web开放者工具（注意：必须是0.9.092300版本）

必须是0.9.092300版本，之前的版本不能保证正常运行
不需要所谓的破解，网上所谓的破解只是针对之前的0.9.092100版本，新的官方版本不需要破解，不需要破解，不需要破解！
下载链接（官方版本，放心下载）：https://pan.baidu.com/s/1qYld6Vi
- wechat_web_devtools_0.9.092300_x64.exe（Windows 64位）
- wechat_web_devtools_0.9.092300_ia32.exe（Windows 32位）
- wechat_web_devtools_0.9.092300.dmg（macOS）

3.选择添加项目，填写或选择相应信息

AppID：点击右下角无AppID（我也没有资格，据说这次200个名额是小龙钦点的）
项目名称：随便填写，因为不涉及到部署，所以无所谓
项目目录：选择刚刚克隆的文件夹
点击添加项目

2、实战代码

这里说一下，在新建目录后，可以选择添加page,js,wxml,wxss,json文件，如果直接添加page文件的话，会直接在该目录下生成与目录相同名字的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。app.js:项目主入口文件（用于创建应用程序对象）。app.json：项目配置声明文件（指定项目的一些信息，比如导航栏样式颜色等等）。

效果图如下:

在根目录下的app.json文件中配置小程序的窗口样式和导航栏

在这个demo里面，我更改了小程序的navigationBar，设置了最下方的三个tabBar,这是公共的设置需要在app.json里面设置，

{

"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/query/index",
"pages/moveTop/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#222",
"navigationBarTitleText": "豆瓣电影",
"navigationBarTextStyle": "#fff"
},
"tabBar": {
"backgroundColor": "#222",
"list": [
{
"pagePath": "pages/index/index",
"text": "当前热映",
"iconPath": "pages/images/collection-o.png",
"selectedIconPath": "pages/images/collection.png"
},
{
"pagePath": "pages/moveTop/index",
"text": "影片排行榜",
"iconPath": "pages/images/examResult-time.png",
"selectedIconPath": "pages/images/icon_clock.png"
},
{
"pagePath": "pages/query/index",
"text": "查询",
"iconPath": "pages/images/nav_icon.png",
"selectedIconPath": "pages/images/icon_nav_cell.png"
}]
}}

在做好小程序之后，把几个公共页面的样式抽离出来，放到了app.wxss文件里面

/**app.wxss**/
.container {
height: 100%;
padding: 0;
}

.list_img {
float: left;
width: 120px;
}

image {
width: 100%;
height: 140px;
padding: 20px 20px 0 20px;
}

.list_info {
float: left;
width: 210px;
height: 140px;
padding-left: 30px;
padding-top: 40px;
}

.move-item_fontWeight {
font-weight: bold;
font-size: 16px;
}

.move-item_moveName{
font-size: 16px;
}
.move-item_fontSize {
font-size: 13px;
}

当前热映部分的代码

<!--index.wxml-->
<view class="container">

  <!--轮播图-->
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}" wx:key="{{item}}">
      <swiper-item>
        <image src="{{item}}" />
      </swiper-item>
    </block>
  </swiper>

  <!--热映列表展示-->
  <block wx:for="{{moves}}" wx:key="{{item}}">
    <view class="list">

      <view class="list_img">
        <image src="{{item.images.medium}}"></image>
      </view>

      <view class="list_info">
        <text class="move-item_fontWeight">片名:</text>
        <text class="move-item_moveName">{{item.title}}\n</text>

        <view>
          <text class="move-item_fontWeight">主演:</text>
          <block wx:for="{{item.casts}}" wx:key="{{index}}">
            <text class="move-item_fontSize">{{item.name}} </text>
          </block>
        </view>

        <view>
          <text class="move-item_fontWeight">导演:</text>
          <block wx:for="{{item.directors}}" wx:key="{{index}}">
            <text class="move-item_fontSize">{{item.name}} </text>
          </block>
        </view>

 <view>
          <text class="move-item_fontWeight">类型:</text>
          <block wx:for="{{item.genres}}" wx:key="{{index}}">
            <text class="move-item_fontSize">{{item}} </text>
          </block>
        </view>

      </view>
    </view>
  </block>

</view>

/**index.wxss**/

swiper-item > image {
  width: 100%;
  height: 200px;
  padding: 0px;
}

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    imgUrls: [
      '/pages/images/swiper_01.jpg', '/pages/images/swiper_02.jpg', '/pages/images/swiper_03.jpg', '/pages/images/swiper_04.jpg',
    ],
    indicatorDots: true,
    autoplay: true,    // 轮播图自动播放
    circular: true,    
    interval: 3000,
    duration: 1000,
    moves:[],   // 当前热映相关数据
  },

  onLoad: function () {
    this.moveList();
  },

  // 加载当前热映电影目录
  moveList() {
    wx.showToast({
      title: '正在加载',
      icon: 'loading',
      duration: 5000
    })
    let thisPage = this;
    wx.request({
      url: 'https://api.douban.com/v2/movie/in_theaters',
      method: 'GET',
      header: {
        "Content-Type": "json"
      },
      success: function (res) {
       thisPage.setData({
         moves:res.data.subjects,
         })
       console.log(res.data.subjects)
       wx.hideLoading();
      },
    })
  },

})

影片排行榜部分的代码

<!--index.wxml-->
<view class="container">

  <!--影片排行榜列表展示-->
  <block wx:for="{{moves}}" wx:key="{{item}}">
    <view class="list">

      <view class="list_img">
        <image src="{{item.images.medium}}"></image>
      </view>

      <view class="list_info">
        <text class="move-item_fontWeight">片名:</text>
        <text class="move-item_moveName">{{item.title}}\n</text>

        <view>
          <text class="move-item_fontWeight">主演:</text>
          <block wx:for="{{item.casts}}" wx:key="{{index}}">
            <text class="move-item_fontSize">{{item.name}} </text>
          </block>
        </view>

        <view>
          <text class="move-item_fontWeight">导演:</text>
          <block wx:for="{{item.directors}}" wx:key="{{index}}">
            <text class="move-item_fontSize">{{item.name}} </text>
          </block>
        </view>

 <view>
          <text class="move-item_fontWeight">类型:</text>
          <block wx:for="{{item.genres}}" wx:key="{{index}}">
            <text class="move-item_fontSize">{{item}} </text>
          </block>
        </view>

      </view>
    </view>
  </block>

</view>

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    moves: [],   // 当前热映相关数据
  },

  onLoad: function () {
    this.moveList();
  },

  // 加载口碑榜电影目录
  moveList() {
    wx.showToast({
      title: '正在加载',
      icon: 'loading',
      duration: 5000
    })
    let thisPage = this;
    wx.request({
      url: 'https://api.douban.com/v2/movie/top250',
      method:'GET',
      header: {
        "Content-Type": "json"
      },
      success: function (res) {
        thisPage.setData({
          moves: res.data.subjects,
        })
        console.log(res.data.subjects)
        wx.hideLoading();
      },
    })
  },

})

查询部分的代码

<!--pages/query/index.wxml-->
<!--查询-->
<view class="container page_query">

  <view class="section">
    <input type="text" value="{{searchValue}}" class="searchMove" placeholder="查询片名" auto-focus bindfocus="focusSearch" bindinput="searchActiveChangeinput" />
    <icon type="search" />
  </view>

  <view class="movesList" wx:if="{{isShowQueryMoves}}">
    <block wx:for="{{searchMoves}}" wx:key="item">
      <view class="move-item">
        <text class="item-name" bindtap="showDetailInfo" data-info="{{item}}">{{item.title}}\n</text>
      </view>
    </block>
  </view>

  <view class="classname" wx:if="{{isShowDetailInfo}}">
    <view class="list_img">
      <image src="{{info.images.medium}}"></image>
    </view>

    <view class="list_info">
      <text class="move-item_fontWeight">片名:</text>
      <text class="move-item_moveName">{{info.title}}\n</text>

      <view>
        <text class="move-item_fontWeight">主演:</text>
        <block wx:for="{{info.casts}}" wx:key="{{index}}">
          <text class="move-item_fontSize">{{item.name}} </text>
        </block>
      </view>

      <view>
        <text class="move-item_fontWeight">导演:</text>
        <block wx:for="{{info.directors}}" wx:key="{{index}}">
          <text class="move-item_fontSize">{{item.name}} </text>
        </block>
      </view>

      <view>
        <text class="move-item_fontWeight">类型:</text>
        <block wx:for="{{info.genres}}" wx:key="{{index}}">
          <text class="move-item_fontSize">{{item}} </text>
        </block>
      </view>

    </view>
  </view>
</view>

// pages/query/index.js
Page({
  data: {
    searchValue: '',    // 搜索框的文字
    showClearBtn: false,   // 清除按钮
    searchMoves: [],      // 搜索到的结果
    num: 0,
    info: null,              // 可供点击的查询出来的单个影片名
    isShowQueryMoves:false,    // 默认不显示查询出来的影片信息
    isShowDetailInfo:false,    // 默认不现实单个影片的详细信息
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  focusSearch() {
    if (this.data.searchValue) {
      this.setData({
        showClearBtn: true
      })
    }
  },

  //对输入框输入的字符进行查询
  searchActiveChangeinput(e) {
    let thisPage = this;
    const val = e.detail.value;
    this.setData({
      // showClearBtn: val != '' ? true : false,
      searchValue: val,
      num: (this.data.num)++
    })
    if (this.data.num > 35) {
      return;
    }
    wx.request({
      url: 'https://api.douban.com/v2/movie/search',
      data: {
        q: thisPage.data.searchValue,
      },
      method: 'GET',
      header: {
        "Content-Type": "json"
      },
      success: function (res) {

        thisPage.setData({
          searchMoves: res.data.subjects,
          isShowQueryMoves: true,    // 显示查询出来的影片信息
          
        })
      }
    })
  },

  // 点击查询出来的影片名，显示影片的具体信息
  showDetailInfo(e) {
    this.setData({
      info: e.currentTarget.dataset.info,
      isShowQueryMoves:false,
      isShowDetailInfo:true,
    })
  }
})
/* pages/query/index.wxss */

.page_query {
  min-height: 100%;
  background-color: #666;
}

.searchMove {
  width: 200px;
  margin: 10px 0px 20px 60px;
}

view>input {
  border: 1px solid #fff;
  border-radius: 15px;
  width: 250px;
  padding: 5px;
  margin: 10px;
  color: #fff;
  display: inline-block;
}

view>icon {
  float: right;
  margin: 20px 60px 0 0;
}
.move-item {
  border-bottom: 1px solid #999;
}
.item-name {
  line-height: 2rem;
  padding: 0.1rem 0.5rem; 
}

注意：

wx.request()

请求数据调用wx.request(); 详细属性介绍点击这里

因为请求电影列表在list和index页面都需要用到，所以我在app.js作为一个全局的方法来写

然而，在调用接口的时候发现了这样的错误

原因是我在开发配置里，没有豆瓣api的域名添加到request合法域名里，所以只要在配置里加上需要的即可

豆瓣电影API

【获取正在上映电影】
https://api.douban.com/v2/movie/in_theaters
【获取豆瓣TOP250电影】
https://api.douban.com/v2/movie/top250
【获取即将上映电影】
https://api.douban.com/v2/movie/coming_soon
【获取具体某一电影信息】
https://api.douban.com/v2/movie/subject/:id
详细数据情况可看
https://developers.douban.com/wiki/?title=movie_v2

其实前三个API返回的数据都是一致的，只是返回的电影类型数据不一样而已，所以在list页面，我们只要传入不同的类型即可。在电影列表页和首页，都有展示电影的基础信息（海报，名字，评分），所以可以把这个部分拿出来做一个模板公用。
大体的思路就是这样，比较简单。

zqzq19950725

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
模拟豆瓣API的电影小程序

1、微信开发者工具开发环境为微信web开发者工具，可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。下载后，打开该工具，选择代码目录和申请的AppID，勾选quickStart选项，这样会创建几个基础页面。实现的功能是可以在首页查看豆瓣电影评分前250名并且可以点击跳转到详情页，在搜索页输入关键字搜索相关电影。使用步骤将仓库克隆到本地：bash $...
复制链接

扫一扫