博客简介
本篇博客是一个经典的豆瓣电影微信小程序实战项目,由于豆瓣API不再对公众开放,这个小项目遇到了不少的阻力,但是最终基本上都得到了解决,本篇博客的中心也是API的调用:
- 项目展示
- 构架和配置
- 城市热榜获取
- 豆瓣电影Top250获取
- 获取电影详情
- 豆瓣电影搜索
项目展示
项目主要实现了轮播图,城市热榜获取,豆瓣电影Top250列表,电影详情页,电影搜索:
豆瓣电影微信小程序
构架和配置
这里主要是用了三个页面,分别是城市热播榜页面,豆瓣电影Top250列表,搜索页面。在三个页面下设有一个跳转页面,用来展示电影详情。
全局的json配置如下:
{
"pages": [
"pages/me/me",
"pages/search/search",
"pages/index/index",
"pages/movie/movie"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#87CEFA",
"navigationBarTitleText": "Movie show",
"navigationBarTextStyle": "black",
"enablePullDownRefresh":true
},
"tabBar":{
"color":"#708090",
"selectedColor":"#FF4500",
"backgroundColor":"#87CEFA",
"list":[
{
"pagePath": "pages/me/me",
"text": "城市热播",
"iconPath": "images/me.png",
"selectedIconPath": "images/now.png"
},
{
"pagePath":"pages/index/index",
"text":"Top250",
"iconPath":"images/index.png",
"selectedIconPath":"images/now.png"
},
{
"pagePath": "pages/search/search",
"text": "搜索",
"iconPath": "images/search.png",
"selectedIconPath": "images/now.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
}
城市热榜获取
城市热榜页面获取的是城市热榜数据,我们先用微信APi获取经纬度,再用百度地图API获取中心城市,获取之后再有豆瓣API获取城市热播,步骤如下
- 用wx.getLocation获取当前位置的经纬度
- 用百度地图的接口:https://api.map.baidu.com/reverse_geocoding/v3/获取城市信息
- 豆瓣API获取城市热播榜:https://douban.uieee.com/v2/movie/in_theaters
- 设置必要的弹窗提示用户
- 效果展示
(1)用wx.getLocation获取当前位置的经纬度
function getLocation() {
var that = this;
wx.getLocation({
type: 'wgs84',
//请求成功
success(res) {
const latitude = res.latitude
const longitude = res.longitude
getCity(latitude, longitude);
},
//请求失败
fail() {
wx.showToast({
title: '获取失败,请检查网络设置',
icon: 'none',
duration: 2000
});
}
})
}
(2)用百度地图的接口获取城市信息
- API:https://api.map.baidu.com/reverse_geocoding/v3/
//获取城市信息
function getCity(latitude, longitude) {
var url = "https://api.map.baidu.com/reverse_geocoding/v3/";
var struct = {
location: latitude + "," + longitude,
ak: "jENyKFL5cVcIHtRanGbvaBllXFbTDexu",
output: "json"
}
wx.request({
url: url,
data: struct,
//成功
success: function (res) {
var city = res.data.result.addressComponent.city;//获取城市信息
city = city.slice(0,city.length-1);
//获取城市电影
getMovies(city);
},
//失败
fail: function (res) {
wx.showToast({
title: '获取失败,请检查网络设置',
icon: 'none',
duration: 2000
});
}
})
}
豆瓣API获取城市热播榜:
- API:https://douban.uieee.com/v2/movie/in_theaters
//获取当地电影信息
function getMovies(city)
{
wx.request({
url: 'https://douban.uieee.com/v2/movie/in_theaters',
data: {
city:city
},
header: { 'content-type': 'application/text' },
//成功
success: function (res) {
wx.hideToast();
page.setData({
movies: res.data.subjects,
title: res.data.title
});
console.log(page.data.movies);
console.log(page.data.title);
},
fail: function (res) {
wx.showToast({
title: '获取失败,请检查网络设置',
icon: 'none',
duration: 2000
});
},
});
}
豆瓣电影Top250获取
豆瓣电影Top250获取算是一个很基础的API请求,我们直接调用即可,重要的是信息的展示。Top250拿到数据后,用于index页面的信息展示
- URL:https://douban.uieee.com/v2/movie/top250
- 注意做一些必要的弹窗
onReady: function () {
//显示消息提示弹窗
var that=this;
wx.showToast({
title: 'Loading',
icon: 'loading',
duration: 60000
});
//发送网络请求,调用API,获取信息
wx.request({
url: 'https://douban.uieee.com/v2/movie/top250',
data:{
count:100
},
header: {
'content-type': 'application/text' // 默认值
},
success(res) {
console.log(res.data);
var data=res.data;
that.setData({
text:data.title,
movies: data.subjects
});
wx.hideToast();
},
//请求失败
fail()
{
console.log('fail request!');
//调用失败,提示失败弹窗
wx.showToast({
title: '获取失败,请检查网络连接',
icon: 'none',
duration: 2000
});
}
})
},
获取电影详情
电影详情页面,这个页面主要是根据电影id获取当前id电影对应的电影详情,步骤如下:
- 在首页用navigator标签做跳转,带上参数
- 在详情页面调用API
- 通过API获取信息,展示页面
(1)在首页用navigator标签做跳转,带上参数
<navigator url="../movie/movie?id={{item.id}}" wx:for="{{movies}}">
<view class="page-areas">
<view class="page-image">
<image src="{{item.images.small}}"></image>
</view>
<view class="page-text">
<text class="text-item1">{{item.title}}</text>
<text class="text-item2">{{item.original_title}}</text>
<text class="text-item3">
<text wx:for="{{item.genres}}">{{item}} </text>
</text>
<text class="text-item4">
<text wx:for="{{item.directors}}">{{item.name}}</text>
</text>
</view>
<view class="point">
<text>{{item.rating.average}}</text>
</view>
</view>
</navigator>
(2)在详情页面调用API
- 通过页面跳转在目标页面的onLoad函数中可以获取这个参数
- 将URL和参数做简单拼接
- 豆瓣URL:https://douban.uieee.com/v2/movie/subject/:id
onLoad: function (options) {
var that=this;
console.log(options);//参数
wx.request({
url: 'https://douban.uieee.com/v2/movie/subject/'+options.id, //拼接参数
header: {
'content-type': 'application/text' // 默认值
},
success(res) {
var data = res.data;
console.log(data);
that.setData({
imageSrc:data.images.large,
title:data.title,
countries: data.countries,
languages: data.languages,
year:data.year,
genres: data.genres,
directors: data.directors,
casts: data.casts,
summary: data.summary,
popular_comments: data.popular_comments
});
},
//请求失败
fail() {
console.log('fail request!');
//调用失败,提示失败弹窗
wx.showToast({
title: '获取失败,请检查网络连接',
icon: 'none',
duration: 2000
});
}
})
}
豆瓣电影搜索
关于电影搜索API,博主在网上找了许多,都没有找到能用的接口,目前是想要用其他的电影接口API。最终由于小程序官方域名request请求修改次数过多没能在当月解决,只能下个月解决了,现在这个页面有一个小的搜索栏效果:
当每搜索一次搜索栏的图标将会替换一次,实现方法也很简单,当确认输入后就将图片的来源下标更新:
search:function(e)
{
var that=this;
var num=((this.data.srcs)+1)%2;
console.log(num);
this.setData({
srcs:num,
});
if (e.detail.value)
{
//提示搜索进行
wx.showToast({
title: 'Loading',
icon: 'loading',
duration: 60000
});
//发送网络请求,调用API,获取信息
wx.request({
url: 'php.test',
data: {
tag: e.detail.value,
},
header: {
'content-type': 'application/json'
},
success(res) {
console.log(res.data);
var data = res.data;
that.setData({
});
wx.hideToast();
},
//请求失败
fail() {
console.log('fail request!');
//调用失败,提示失败弹窗
wx.showToast({
title: '由于开发者本月的域名修改次数不慎用完,搜索功能要到次月才能开放',
icon: 'none',
duration: 8000
});
}
})
}
},