如何用微信小程序模仿豆瓣首页

程序思路：

用微信自带组件swiper来实现轮播图
用豆瓣提供的api(这里使用的电影api)来获取最近的电影数据【豆瓣api地址】

获取数据用微信的request方法，只需要提供豆瓣api的url链接，就能够get到数据

用setData()方法来将数据存进对应的page里面，在视图层(html)用wx:for来进行列表渲染
在渲染过程中加一个加载提示框(微信的showToast，API)，等到数据请求并渲染完成后，结束提示框

如何用微信小程序模仿豆瓣首页

1.app.js 获取用户登录状态并获取用户信息

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

2.app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "color": "#fff",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "豆瓣",
    "navigationBarTextStyle":"#fff"
  },
  "tabBar": {
    "color": "#888",
    "selectedColor": "#09bb07",
    "backgroundColor": "#000",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "观看电影",
      "iconPath": "icon/1.png",
      "selectedIconPath": "icon/1.png"
    },{
      "pagePath": "pages/index/index",
      "text": "当前热映",
      "iconPath": "icon/2.png",
      "selectedIconPath": "icon/2.png"
    }]
  }
}

3.app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

4.until.js

function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()


  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
//获取对象类型
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

5.index.wxml

<!--index.wxml-->
<view class="content">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" width="355" height="150" />
      </swiper-item>
    </block>
  </swiper>
  <block wx:for="{{movie}}" wx:key="*this">
    <view class="movie">
      <view class="pic">
        <image src="{{item.images.medium}}" mode="aspectFill"></image>
      </view>
      <view class="movie-info">
        <view class="base-info">
          <text>电影名字：{{item.title}}\n 导演：{{item.directors[0].name}}\n 演员：
            <text wx:for="{{item.casts}}">{{item.name}} </text>
          </text>
        </view>
      </view>
    </view>
  </block>
</view>

6.index.wxss

/**index.wxss**/
page {
  height: 100%;
}
.content {
  background-color: #3a3a3a;
  min-height: 100%;
}
swiper-item image {
  width: 100%;
}
.movie {
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  border-bottom: 1px solid #888;
}
.pic image {
  width: 100px;
  height: 150px;
  vertical-align: top;
}
.movie-info {
  padding-left: 20px;
}
.base-info {
  color: #fff;
  font-size: 12px;
  padding-top: 20px;
  line-height: 20px;
}

View Code