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

總結

以上是生活随笔為你收集整理的微信小程序-豆瓣电影TOP250的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。