本小程序用于展示豆瓣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文件中用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) } });