豆瓣不能用了,可以用这个
data-
自定义数据属性 设置
<view class='container movie-card' bindtap='f1' data-user-name="bla">
f1: function(event) {
//在控制台查看被封装到事件对象中的属性
console.log(event.currentTarget)
wx.navigateTo({
//到转到detail页且不关闭本页面
url: '/pages/detail/detail',
})
}
在这里插入图片描述
视频中实例
weekly.js
f1: function(event) {
//从事件对象event中获取dataset属性的movievId并赋值给movieId
var movieId = event.currentTarget.dataset.movieId
console.log(movieId);
wx.navigateTo({
//到转到detail页且不关闭本页面(?后传参)
url: '/pages/detail/detail?id=' + movieId
})
}
<view class=''>
<!-- swiper幻灯片轮播 默认生成像素150px,image为240 -->
<!-- indicator-dots='{{true}}'显示面板指示 -->
<!-- current 幻灯片默认页面,默认为0 -->
<swiper class='movie-swiper' indicator-dots='{{true}}'
previous-margin='50rpx' next-margin='50rpx' current='{{currentIndex}}'>
<swiper-item class='movie' wx:for="{{weeklyMovieList}}">
<view class='container movie-card' bindtap='f1' data-movie-id="{{item.id}}">
<image class='movie-image'src='{{item.imagePath}}'></image>
<!-- index:item下标 -->
<text>{{item.id}}</text>
<text>第{{index+1}}周:{{item.name}}</text>
<text>点评:{{item.comment}}</text>
<text wx:if="{{item.isHighlyRecommended}}"
style="font-size:16px;color:red;">强烈推荐</text>
<!-- bindtap会向上冒泡触发f1,所以此处用catchtap -->
<text catchtap='f0' wx:if='{{index<(weeklyMovieList.length - 1)}}'class='return-button'>返回本周</text>
</view>
</swiper-item>
</swiper>
</view>
获取url传来参数
detail.js
//获取本次被打开时传入的参数对象options
onLoad: function(options) {
console.log(options.id)
this.setData({
mid:options.id
})
}
request发送请求
//获取本次被打开时传入的参数对象options
onLoad: function(options) {
console.log(options.id)
this.setData({
mid:options.id
})
//要写在onLoad内部
//异步调用发送请求 请求完立即返回(不管回调函数),调用其他方法
wx.request({
//请求目标
url: "https://api.douban.com/a/b.jsp",
//http方法
method: "GET",
//捎带的数据
data: {
x: 1, y: 2
},
//设置header字段(元数据)
header: {
},
//成功收到response,success回调函数处理
success: function (res) {
console.log(res)
},
//失败才执行
fail: function () {
},
//不论成功还是失败都执行
complete: function () {
}
})
}
-
request请求的url要在下图中配置
在这里插入图片描述
调用豆瓣api
小程序请求豆瓣API报403的三种解决方法
不知道怎么说,请看我完整的代码
detail.js
Page({
data: {
},
//获取本次被打开时传入的参数对象options
onLoad: function(options) {
console.log(options.id)
this.setData({
mid:options.id
})
var that= this
//异步调用发送请求 请求完立即返回(不管回调函数),调用其他方法
wx.request({
//请求目标
url: "https://douban.uieee.com/v2/movie/subject/" + options.id,
header: {
"content-type": "json"
},
//成功收到response,success回调函数处理
success: function (res) {
console.log(res)
//找到电影才返回movie
if(res.statusCode==200){
//引用外部对象使用setData方法
that.setData({
movie: res.data
})
}
},
//失败才执行
fail: function () {
},
//不论成功还是失败都执行
complete: function () {
}
})
}
})
detail.wxml
<view class='container'>
<image class='detail-image' src='{{movie.images.small}}'></image>
<text style='font-weight:bold; font-size:50px;'>{{movie.title}}</text>
<text>想看: {{moview.wish_count}}</text>
<text>看过: {{movie.collect_count}}</text>
<text>评分: {{movie.rating.average}}</text>
<text>简介: {{movie.summary}}</text>
</view>
detail.wxss
.detail-image {
width: 300rpx;
height: 300rpx;
}
在这里插入图片描述
网友评论