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

//app.jsApp({  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  }})

{  "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"    }]  }}

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

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}

<!--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>

/**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

//index.js//获取应用实例var app = getApp()Page({  data: {    imgUrls: [],    indicatorDots: false,    autoplay: true,    interval: 5000,    duration: 1000,    movie: null  },  //事件处理函数  bindViewTap: function () {  },  onLoad: function () {    this.loadMovie();  },  loadMovie() {    wx.showToast({      title: '正在加载',      icon: 'loading',      duration: 10000    });    let thispage = this;    wx.request({      url: 'http://api.douban.com/v2/movie/in_theaters',      method: 'GET',      header: { 'content-type': 'json' },      success: function (res) {        let subject = res.data.subjects;        thispage.setData({ movie: subject });        thispage.setData({          imgUrls: [            res.data.subjects[0].images.large,            res.data.subjects[1].images.large,            res.data.subjects[2].images.large          ]        });        wx.hideToast();      }    });  }})

View Code

<!--logs.wxml--><view class="container log-list">  <block wx:for="{{logs}}" wx:for-item="log" wx:key="*this">    <text class="log-item">{{index + 1}}. {{log}}</text>  </block></view>

.log-list {  display: flex;  flex-direction: column;  padding: 40rpx;}.log-item {  margin: 10rpx;}

View Code

{    "navigationBarTitleText": "查看启动日志"}

View Code

//logs.jsvar util = require('../../utils/util.js')Page({  data: {    logs: []  },  onLoad: function () {    this.setData({      logs: (wx.getStorageSync('logs') || []).map(function (log) {        return util.formatTime(new Date(log))      })    })  }})

View Code