微信小程序-豆瓣电影TOP250

版权声明：本文为博主原创文章，未经博主允许不得转载。 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)
      }
    });

扫描二维码关注公众号，回复： 5681851 查看本文章

电影详情界面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)
      }
    });
  }
})