制作微信小程序实现豆瓣榜单的使用

这是界面设计：
app.josn:

{
  "pages": [
    "pages/hello/hello",
    "pages/logs/logs",
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "豆瓣电影",
    "navigationBarTextStyle": "white"
  },
"tabBar": {
  "list": [
    {
      "pagePath": "pages/hello/hello",
      "text": "榜单",
      "iconPath": "/images/002.jpg",
      "selectedIconPath": "/images/002.jpg"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "/images/002.jpg",
      "selectedIconPath": "/images/002.jpg"
    },
    {
      "pagePath": "pages/index/index",
      "text": "个人",
      "iconPath": "/images/002.jpg",
      "selectedIconPath": "/images/002.jpg"
    }
  ]
},
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
 

榜单界面的实现：
js:

// pages/hello/hello.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    movie:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //this代表微信小程序page对象,在回调函数中，this不代表配置对象
    this.setData({
      movie:[{},{}]
    })
    var that = this;//声明一个对象（that）指向page对象
    wx.request({
      url: 'http://douban.uieee.com/v2/movie/top250', //仅为示例，并非真实的接口地址
      data: {
        start: 0,
        count: 100
      },
      header: {
        'content-type': 'application/xml' // 默认值
      },
      success(res) {
        console.log(res);
        that.setData({
          movie:res.data.subjects
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxml:

<!--pages/hello/hello.wxml-->
<view class="movie" wx:for="{{movie}}">
  <view class="left">
    <image class="cover" src="{{item.images.small}}"></image>
  </view>
  <view class="middle">
    <view class="t1">{{item.title}}</view>
    <view class="t2">{{item.original_title}}</view>
    <view class="t3">
        <text wx:for="{{item.directors}}">{{item.name}} </text>
     </view>
  </view>
  <view class="right">
    <view class="right">{{item.rating.average}}</view>
  </view>
</view>

wxss:

/* pages/hello/hello.wxss */
/*id选择器>class选择器>标签选择器*/
.left{
   width: 100px;
  height: 100px;

  /**margin: auto;适合于图片**/
  justify-content: center;/**主轴方向的对齐方式**/
  align-items: center;/**侧轴方向的对齐方式**/
}
.movie
{
  display: flex;/**设置movie为弹性盒子**/
}
/**主轴：默认是水平方向
侧轴：跟主轴垂直的方向**/
/*id*/
.middle{
  width: calc(100% - 160px);/*减去左右值的和*/
  height: 100px;
  line-height: 32px;
  white-space: nowrap;/*不换行*/
  overflow:hidden;/*溢出部分不显示*/
  text-overflow: ellipsis;/*省略号*/
}
.right{
  width: 60px;
  height: 100px;
  color: red;
  font-weight: bold;
  text-align: center;
  line-height: 100px;/*行高*/
}
.cover{
  width: 80px;
  height: 80px;
  margin-top: 10px;
  margin-left: 10px;
}
.t1{
  font-size: 16px;/*默认16像素*/
  font-weight: bold;
}
.t2{
  font-size: 10px;/*默认16像素*/
  color: #ccc;
}
.t3{
  font-size: 14px;/*默认16像素*/

}

下面是效果图：



由于时间和技术问题，跟随老师学习到的知识有限，只能实现这些功能，跳转的小图案也是拍的高数课本，后续有时间的话会继续更新的，敬请期待。