版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Co_zy/article/details/77772653
本小程序用于展示豆瓣TOP250电影及其详情,下面开始:
新建好项目后,先删除app.js
app.wxss
index.js
里面的内容
打开app.json文件,删除原来中默认的页面,如果自己要定义页面,修改pages,则按下图中3,4,5,6行编写代码,并保存,开发工具会自动创建好文件以及文件夹,更改windows修改默认外观
我们需要底部的bar,如下图,所以编辑app.json
app.json完整代码
注意"text"
"iconPath"
"selectedIconPath"
"pagePath"
{
"pages":[
"pages/index/index",
"pages/movie/movie",
"pages/search/search",
"pages/profile/profile"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "豆瓣电影",
"navigationBarTextStyle":"white"
},
"tabBar":{
"color":"#ccc",
"list":[
{
"text":"推荐电影",
"iconPath":"/images/featured.png",
"selectedIconPath":"/images/featured-actived.png",
"pagePath":"pages/index/index"
},
{
"text":"搜索",
"iconPath":"/images/search.png",
"selectedIconPath":"/images/search-actived.png",
"pagePath":"pages/search/search"
},
{
"text":"我的",
"iconPath":"/images/profile.png",
"selectedIconPath":"/images/profile-actived.png",
"pagePath":"pages/profile/profile"
}
]
}
}
基本配置完毕,下面开始编写各个页面(这里只展示js代码段)
首页index.js
主页包括了豆瓣电影的中文名称,英文名称,电影导演,以及豆瓣评分,在index.js文件中用POST向豆瓣API发送请求,然后接收返回的结果并渲染在界面上
Page({
data: {
title:"加载中",
movies:[]
},
onLoad:function (){
var that = this;
wx.showToast({
title: '加载中...',
icon:"loading",
duration:10000
});
wx.request({
url: 'https://douban.uieee.com/v2/movie/top250',
data:{},
method:'POST',
header: {
'content-type': 'application/xml'
},
success:function (res){
wx.hideToast(); //当加载出来后隐藏'加载中'
var data = res.data;
that.setData({
title:data.title,
movies:data.subjects
});
//console.log(res.data)
}
});
}
})
其中
wx.showToast({
title: '加载中...',
icon:"loading",
duration:10000
});
用于显示加载中提示框,当数据加载出来后,然后在success函数中设置隐藏
wx.hideToast();
下面的是向服务器接口发送请求,然后将请求得到的数据动态更新页面中数据
wx.request({
url: 'https://api.douban.com/v2/movie/top250',
data:{},
method:'POST',
header: {
'content-type': 'application/json'
},
success:function (res){
wx.hideToast(); //当加载出来后隐藏'加载中'
var data = res.data;
that.setData({
title:data.title,
movies:data.subjects
});
console.log(res.data)
}
});
电影详情界面movie.js
Page({
data: {
title:"加载中",
movies:[]
},
onLoad:function (){
var that = this;
wx.showToast({
title: '加载中...',
icon:"loading",
duration:10000
});
wx.request({
url: 'https://douban.uieee.com/v2/movie/top250',
data:{},
method:'POST',
header: {
'content-type': 'application/xml'
},
success:function (res){
wx.hideToast(); //当加载出来后隐藏'加载中'
var data = res.data;
that.setData({
title:data.title,
movies:data.subjects
});
//console.log(res.data)
}
});
}
})