目录:
1.组件的自定义数据属性
2.电影详情页的基本框架
3.发起请求API
4.调用豆瓣API
5.动态设置导航栏
6.页面事件处理函数
-------------------------------------------------------------------------------------------------------------------------
1.组件的自定义数据属性
新建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:
运行结果:(右上方三个点->转发)
总结:
获取信息(抓包)、显示信息、更改对应显示配置、转发功能。