目录：

1.组件的自定义数据属性

2.电影详情页的基本框架

3.发起请求API

4.调用豆瓣API

5.动态设置导航栏

6.页面事件处理函数

-------------------------------------------------------------------------------------------------------------------------

1.组件的自定义数据属性

小程序导航API

新建detail

weekly.wxml新增代码：

weekly.js新增代码：

效果图（点击跳转）

点击后，Console显示movieId

附：在Console显示的代码：

console.log(movieId);

 

2.电影详情页的基本框架

问题：点击“返回本周”后，先返回最后一周，有进入之前对应页面的detail页面

原因：bindtap产生冒泡

解决：完成自己的事件处理后，不要将事件向上冒泡传递给父元素。将bindtap改为catchtap

实现detail页的基本框架：（显示ID）

detail.js:

Page({

  data:{

  },

  onLoad:function(options){
    console.log(options.id)
    this.setData({
      mid:options.id
    })
  }
})

detail.wxml:

<text>detail page for movie id = {{mid}}</text>

运行结果：

 

3.发起请求API

发起请求API-wx.request（小程序与数据库交互的方式之一）

（代码在下方）

报错：

解决：

方法一：微信公众平台->开发->开发设置->服务器域名---------------（好像用不了）

方法二： 微信小程序如何调用API实现数据请求-wx.request()

参考文献：小程序——使用Easy Mock

用Easy Mock（https：//easy-mock.com/），提供模拟数据。

detail.js:（在onLoad中添加代码）

wx.request({
      // url: 'https://baidu.com/a/b.jsp',
      url: 'https://easy-mock.com/mock/5cb181fc31c1f7511b033328/example/test',
      method:"GET",
      data:{
        x:1,y:2
      },
      header:{

      },

    // 服务器端返回调用后信息的处理（三个回调函数）
      success:function(res){
        console.log(res)

      },
      fail:function(){

      },
      complete:function(){

      }
    })

运行结果：

 

4.调用豆瓣API

不断更改后：（主要更改如下打开的4个页面）

代码存入百度云：

链接：https://pan.baidu.com/s/1KCDJS_zAG_D_Pq57zYAxYg 
提取码：rwkn 
 

问题：

解决：

在detail.js中添加代码：

继续添加代码，但运行报错。

问题：

原因：this指向的是success回调函数所在的参数对象，不再是指向这个页面所注册的页面对象，故没有setData方法。

解决：增加that，改为that

 

个人问题：

豆瓣的API找不到，故用聚合数据（https://www.juhe.cn/ucenter/account）进行detail.js页面wx.request中url的跳转运行。我选择了“影讯API合集”（https://www.juhe.cn/docs/api/id/42）注册并登陆后选择“API测试工具”，之后按照提示步骤运行即可。注意：决定页面的标识是title，而不是id。

部分图如下：

教父 页面：https://www.juhe.cn/box/index/id/42

我以title为标记，实现页面查找，完成页面跳转。完成后如下：

附：MP4转GIF 在线 网址：https://app.xunjiepdf.com/mp42gif

 

5.动态设置导航栏

detail.js代码添加：（显示导航栏loading动画、刷新显示后，隐藏动画、用评分和名称构成字符串）三部分

Page({

  data:{

  },

  onLoad:function(options){
    // console.log(options.id)
    console.log(options.title)
    this.setData({
      mid:options.title
    })

    var that = this


    wx.request({
      // url: 'https://api.douban.com/v2/movie/subject/'+options.id,
      // url: 'https://easy-mock.com/mock/5cb181fc31c1f7511b033328/example/test',
      // url: 'https://api.weibo.com/2/search/topics.json',
      // url: 'http://v.juhe.cn/boxoffice/rank',
      url: 'http://v.juhe.cn/movie/index?key=d78d75a676d3219959436aae0934ddd0&title='+ options.title,



      header:{
        "content-type":"json"
      },

    // 服务器端返回调用后信息的处理（三个回调函数）
      success:function(res){
        console.log(res)
        if(res.statusCode==200){
          that.setData({
            movie: res.data
          })
          // 用评分和名称构成字符串
          wx:wx.setNavigationBarTitle({
            title: res.data.result[0].rating+"分："+res.data.result[0].title,
          })
          // 刷新显示后，隐藏动画
          wx:wx.hideNavigationBarLoading()
        }
        
      },
      fail:function(){

      },
      complete:function(){

      }
    })
    // 显示导航栏loading动画
    wx:wx.showNavigationBarLoading()
  }
})

效果显示：从“每周推荐”跳转至"“电影详情页”中间空白等待部分与Loading图标，跳转后上方“电影详情页”改为“分数+名称”形式。

 

6.页面事件处理函数

//下拉刷新时被调用

//上划触底时被调用

//在页面上滑动时被调用

//分享时被调用

weekly.js:

detail.js:

运行结果：（右上方三个点->转发）

 

总结：

获取信息（抓包）、显示信息、更改对应显示配置、转发功能。