程序思路：
- 用微信自带组件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;
}
7.index.js
//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();
}
});
}
})
8.logs.wxml
<!--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>
9.logs.wxss
.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.log-item {
margin: 10rpx;
}
10.logs.json
{
"navigationBarTitleText": "查看启动日志"
}
11.logs.js
//logs.js
var 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))
})
})
}
})